本文已授权微信公众号：鸿洋（hongyangAndroid）在微信公众号平台原创首发。
*转眼间，2016伴随着互联网寒冬和帝都的雾霾马上就过去了，不知道大家今年一整年过得怎么样？最近票圈被各个城市的雾霾刷屏，
内心难免会动荡，庆幸自己早出来一年，也担忧着自己的未来的职业规划。无所谓了，既然选择了这个行业，我觉得大家就应该坚持下去，路是自己走的，及时再寒冬，只要你足够优秀，足够努力，相信你最后还是会找到自己满意的工作的。最后还要感谢今年博客之星大家对我的投票支持，非常感谢。不多说了，今天的主题是它–对，自定义View柱状图。
先来说说我最近在做什么吧？好久没有写博客了，最近手里有两个项目，闲的时候一直在忙着做项目，也封装了属于自己的一套Library，抽下来我会把它分享出来的。公司的项目也一直在忙，今天的柱状图就是公司的项目所用到的。先来看一下效果吧
*
需求刚下来的时候我去网上找了一些开源的项目比如：
MpChart
hellocharts-android
AndroidCharts
等等有好多，但是最后为什么我选择了自定义，一来是这些开源库都很“重”,好多都用不到；二来很少有双条的柱状图；三来也想提高一下自己，仔细研究一下发现也并没有那么难。感兴趣的话可以去研究一下开源的那些图表，不过我曾经想过在上面的那几个基础上去修改，发现很难，所幸自己定义吧。
可以看到，今天的柱状图分为三类：双条竖向柱状图、单条竖向柱状图以及单条横向柱状图，其实原理都是一样的，下面我们具体看一下怎么实现，怎么去画一个这样的柱状图。
我们可以看到这个柱状图主要包括下面几个方面：
好了上面五点就是需求和UI所提出来的所有东西，我们开始着手去“画”吧。
1.首先我们定义一些资源style供使用
包括
leftColor 左侧柱状图顶部颜色
leftColorBottom 左侧柱状图底部颜色
rightColor 右侧柱状图顶部颜色
rightColorBottom 右侧柱状图底部颜色
selectRightColor 左侧点击选中颜色
selectRightColor 右侧点击选中颜色
xyColor 横轴字体颜色
底部和顶部颜色是用于渐变用的
<declare-styleable name="MyChartView">
<attr name="leftColor" format="color"></attr>
<attr name="leftColorBottom" format="color"></attr>
<attr name="selectLeftColor" format="color"></attr>
<attr name="rightColor" format="color"></attr>
<attr name="rightColorBottom" format="color"></attr>
<attr name="selectRightColor" format="color"></attr>
<attr name="xyColor" format="color"></attr>
</declare-styleable>2.接下来我们看具体代码，注释写的很详细了，仔细看：
touch点击事件判断点击所属哪个月份，接口回调给activity显示具体月份数值
注意：onWindowVisibilityChanged这个方法（当屏幕焦点变化时重新侧向起始位置,必须重写次方法,否则当焦点变化时柱状图会跑到屏幕外面）
下面主要说一下绘制部分吧
我们将每次onTouch的条的索引放到selectIndexRoles数组中，然后当这个数组包含该绘制的柱状图的索引是我们设置不用颜色以及不设置渐变；
同时我们给每两个双条之间的的空白处绘制成阴影；
最后drawRoundRect（）就绘制了一个圆角的矩形。
//画柱状图
for (int i = 0; i < list.size(); i++) {
int size = mHeight / 120;
if (selectIndexRoles.contains(i)) {
//偶数
mChartPaint.setShader(null);
if (i % 2 == 0) {
mChartPaint.setColor(selectLeftColor);
} else {
mChartPaint.setColor(selectRightColor);
}
} else {
//偶数
if (i % 2 == 0) {
LinearGradient lg = new LinearGradient(mChartWidth, mChartWidth + mSize, mHeight - 100,
(float) (mHeight - 100 - list.get(i) * size), lefrColorBottom, leftColor, Shader.TileMode.MIRROR);
mChartPaint.setShader(lg);
} else {
LinearGradient lg = new LinearGradient(mChartWidth, mChartWidth + mSize, mHeight - 100,
(float) (mHeight - 100 - list.get(i) * size), rightColorBottom, rightColor, Shader.TileMode.MIRROR);
mChartPaint.setShader(lg);
}
}
mChartPaint.setStyle(Paint.Style.FILL);
//画阴影
if (i == number * 2 || i == number * 2 + 1) {
mShadowPaint.setColor(Color.BLUE);
} else {
mShadowPaint.setColor(Color.WHITE);
}
//画柱状图
RectF rectF = new RectF();
rectF.left = mChartWidth;
rectF.right = mChartWidth + mSize;
rectF.bottom = mHeight - 100;
rectF.top = (float) (mHeight - 100 - list.get(i) * size);
canvas.drawRoundRect(rectF, 10, 10, mChartPaint);
//canvas.drawRect(mChartWidth, mHeight - 100 - list.get(i) * size, mChartWidth + mSize, mHeight - 100, mChartPaint)
// ;// 长方形
mChartWidth += (i % 2 == 0) ? (3 + getWidth() / 39) : (getWidth() / 13 - 3 - mSize);
}package com.hankkin.mycartdemo.chatview;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import com.hankkin.mycartdemo.R;
import java.util.ArrayList;
import java.util.List;
/**
* Created by Hankkin on 2016/12/10.
*/
public class MyChartView extends View {
private int leftColor;//双柱左侧
private int rightColor;//双柱右侧
private int lineColor;//横轴线
private int selectLeftColor;//点击选中左侧
private int selectRightColor;//点击选中右侧
private int lefrColorBottom;//左侧底部
private int rightColorBottom;//右侧底部
private Paint mPaint, mChartPaint, mShadowPaint;//横轴画笔、柱状图画笔、阴影画笔
private int mWidth, mHeight, mStartWidth, mChartWidth, mSize;//屏幕宽度高度、柱状图起始位置、柱状图宽度
private Rect mBound;
private List<Float> list = new ArrayList<>();//柱状图高度占比
private Rect rect;//柱状图矩形
private getNumberListener listener;//点击接口
private int number = 1000;//柱状图最大值
private int selectIndex = -1;//点击选中柱状图索引
private List<Integer> selectIndexRoles = new ArrayList<>();
public void setList(List<Float> list) {
this.list = list;
mSize = getWidth() / 39;
mStartWidth = getWidth() / 13;
mChartWidth = getWidth() / 13 - mSize - 3;
invalidate();
}
public void setListener(getNumberListener listener) {
this.listener = listener;
}
public MyChartView(Context context) {
this(context, null);
}
public MyChartView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyChartView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//获取我们自定义的样式属性
TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MyChartView, defStyleAttr, 0);
int n = array.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = array.getIndex(i);
switch (attr) {
case R.styleable.MyChartView_leftColor:
// 默认颜色设置为黑色
leftColor = array.getColor(attr, Color.BLACK);
break;
case R.styleable.MyChartView_selectLeftColor:
// 默认颜色设置为黑色
selectLeftColor = array.getColor(attr, Color.BLACK);
break;
case R.styleable.MyChartView_rightColor:
rightColor = array.getColor(attr, Color.BLACK);
break;
case R.styleable.MyChartView_selectRightColor:
selectRightColor = array.getColor(attr, Color.BLACK);
break;
case R.styleable.MyChartView_xyColor:
lineColor = array.getColor(attr, Color.BLACK);
break;
case R.styleable.MyChartView_leftColorBottom:
lefrColorBottom = array.getColor(attr, Color.BLACK);
break;
case R.styleable.MyChartView_rightColorBottom:
rightColorBottom = array.getColor(attr, Color.BLACK);
break;
}
}
array.recycle();
init();
}
//初始化画笔
private void init() {
mPaint = new Paint();
mPaint.setAntiAlias(true);
mBound = new Rect();
mChartPaint = new Paint();
mChartPaint.setAntiAlias(true);
mShadowPaint = new Paint();
mShadowPaint.setAntiAlias(true);
mShadowPaint.setColor(Color.WHITE);
}
//测量高宽度
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width;
int height;
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
if (widthMode == MeasureSpec.EXACTLY) {
width = widthSize;
} else {
width = widthSize * 1 / 2;
}
if (heightMode == MeasureSpec.EXACTLY) {
height = heightSize;
} else {
height = heightSize * 1 / 2;
}
setMeasuredDimension(width, height);
}
//计算高度宽度
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
mWidth = getWidth();
mHeight = getHeight();
mStartWidth = getWidth() / 13;
mSize = getWidth() / 39;
mChartWidth = getWidth() / 13 - mSize;
}
//重写onDraw绘制
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setColor(lineColor);
//画坐标轴
//canvas.drawLine(0, mHeight - 100, mWidth, mHeight - 100, mPaint);
for (int i = 0; i < 12; i++) {
//画刻度线
//canvas.drawLine(mStartWidth, mHeight - 100, mStartWidth, mHeight - 80, mPaint);
//画数字
mPaint.setTextSize(35);
mPaint.setTextAlign(Paint.Align.CENTER);
mPaint.getTextBounds(String.valueOf(i + 1) + "", 0, String.valueOf(i).length(), mBound);
canvas.drawText(String.valueOf(i + 1) + "月", mStartWidth - mBound.width() * 1 / 2,
mHeight - 60 + mBound.height() * 1 / 2, mPaint);
mStartWidth += getWidth() / 13;
}
//画柱状图
for (int i = 0; i < list.size(); i++) {
int size = mHeight / 120;
if (selectIndexRoles.contains(i)) {
//偶数
mChartPaint.setShader(null);
if (i % 2 == 0) {
mChartPaint.setColor(selectLeftColor);
} else {
mChartPaint.setColor(selectRightColor);
}
} else {
//偶数
if (i % 2 == 0) {
LinearGradient lg = new LinearGradient(mChartWidth, mChartWidth + mSize, mHeight - 100,
(float) (mHeight - 100 - list.get(i) * size), lefrColorBottom, leftColor, Shader.TileMode.MIRROR);
mChartPaint.setShader(lg);
} else {
LinearGradient lg = new LinearGradient(mChartWidth, mChartWidth + mSize, mHeight - 100,
(float) (mHeight - 100 - list.get(i) * size), rightColorBottom, rightColor, Shader.TileMode.MIRROR);
mChartPaint.setShader(lg);
}
}
mChartPaint.setStyle(Paint.Style.FILL);
//画阴影
if (i == number * 2 || i == number * 2 + 1) {
mShadowPaint.setColor(Color.BLUE);
} else {
mShadowPaint.setColor(Color.WHITE);
}
//画柱状图
RectF rectF = new RectF();
rectF.left = mChartWidth;
rectF.right = mChartWidth + mSize;
rectF.bottom = mHeight - 100;
rectF.top = (float) (mHeight - 100 - list.get(i) * size);
canvas.drawRoundRect(rectF, 10, 10, mChartPaint);
//canvas.drawRect(mChartWidth, mHeight - 100 - list.get(i) * size, mChartWidth + mSize, mHeight - 100, mChartPaint)
// ;// 长方形
mChartWidth += (i % 2 == 0) ? (3 + getWidth() / 39) : (getWidth() / 13 - 3 - mSize);
}
}
@Override
public void onWindowFocusChanged(boolean hasWindowFocus) {
super.onWindowFocusChanged(hasWindowFocus);
if (hasWindowFocus) {
}
}
/**
* 注意:
* 当屏幕焦点变化时重新侧向起始位置,必须重写次方法,否则当焦点变化时柱状图会跑到屏幕外面
*/
@Override
protected void onWindowVisibilityChanged(int visibility) {
super.onWindowVisibilityChanged(visibility);
if (visibility == VISIBLE) {
mSize = getWidth() / 39;
mStartWidth = getWidth() / 13;
mChartWidth = getWidth() / 13 - mSize - 3;
}
}
/**
* 柱状图touch事件
* 获取触摸位置计算属于哪个月份的
* @param ev
* @return
*/
@Override
public boolean onTouchEvent(MotionEvent ev) {
int x = (int) ev.getX();
int y = (int) ev.getY();
int left = 0;
int top = 0;
int right = mWidth / 12;
int bottom = mHeight - 100;
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
for (int i = 0; i < 12; i++) {
rect = new Rect(left, top, right, bottom);
left += mWidth / 12;
right += mWidth / 12;
if (rect.contains(x, y)) {
listener.getNumber(i, x, y);
number = i;
selectIndex = i;
selectIndexRoles.clear();
;
selectIndexRoles.add(selectIndex * 2 + 1);
selectIndexRoles.add(selectIndex * 2);
invalidate();
}
}
break;
case MotionEvent.ACTION_UP:
break;
}
return true;
}
public interface getNumberListener {
void getNumber(int number, int x, int y);
}
public int getLeftColor() {
return leftColor;
}
public void setLeftColor(int leftColor) {
this.leftColor = leftColor;
}
public int getRightColor() {
return rightColor;
}
public void setRightColor(int rightColor) {
this.rightColor = rightColor;
}
public int getLineColor() {
return lineColor;
}
public void setLineColor(int lineColor) {
this.lineColor = lineColor;
}
public int getSelectLeftColor() {
return selectLeftColor;
}
public void setSelectLeftColor(int selectLeftColor) {
this.selectLeftColor = selectLeftColor;
}
public int getSelectRightColor() {
return selectRightColor;
}
public void setSelectRightColor(int selectRightColor) {
this.selectRightColor = selectRightColor;
}
public int getLefrColorBottom() {
return lefrColorBottom;
}
public void setLefrColorBottom(int lefrColorBottom) {
this.lefrColorBottom = lefrColorBottom;
}
public int getRightColorBottom() {
return rightColorBottom;
}
public void setRightColorBottom(int rightColorBottom) {
this.rightColorBottom = rightColorBottom;
}
}3.具体使用：
private void initChatView() {
myChartView.setLefrColorBottom(getResources().getColor(R.color.leftColorBottom));
myChartView.setLeftColor(getResources().getColor(R.color.leftColor));
myChartView.setRightColor(getResources().getColor(R.color.rightColor));
myChartView.setRightColorBottom(getResources().getColor(R.color.rightBottomColor));
myChartView.setSelectLeftColor(getResources().getColor(R.color.selectLeftColor));
myChartView.setSelectRightColor(getResources().getColor(R.color.selectRightColor));
myChartView.setLineColor(getResources().getColor(R.color.xyColor));
chartList = new ArrayList<>();
relativeLayout = (RelativeLayout) findViewById(R.id.linearLayout);
relativeLayout.removeView(llChart);
Random random = new Random();
while (chartList.size() < 24) {
int randomInt = random.nextInt(100);
chartList.add((float) randomInt);
}
myChartView.setList(chartList);
myChartView.setListener(new MyChartView.getNumberListener() {
@Override
public void getNumber(int number, int x, int y) {
relativeLayout.removeView(llChart);
//反射加载点击柱状图弹出布局
llChart = (LinearLayout) LayoutInflater.from(MainActivity.this).inflate(R.layout.layout_shouru_zhichu, null);
TextView tvZhichu = (TextView) llChart.findViewById(R.id.tv_zhichu);
TextView tvShouru = (TextView) llChart.findViewById(R.id.tv_shouru);
tvZhichu.setText((number + 1) + "月支出" + " " + chartList.get(number * 2));
tvShouru.setText ( "收入: " + chartList.get(number * 2 + 1));
llChart.measure(0, 0);//调用该方法后才能获取到布局的宽度
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
params.leftMargin = x - 100;
if (x - 100 < 0) {
params.leftMargin = 0;
} else if (x - 100 > relativeLayout.getWidth() - llChart.getMeasuredWidth()) {
//设置布局距左侧屏幕宽度减去布局宽度
params.leftMargin = relativeLayout.getWidth() - llChart.getMeasuredWidth();
}
llChart.setLayoutParams(params);
relativeLayout.addView(llChart);
}
});
}经过以上步骤，我们的双条竖向柱状图就绘制完成了，也显示出来了。其实自己坐下来仔细拿笔算一下，画一下，也没有想象的那么难。至于单条和横向的实现原理都一样，比这个要简单的多。哦对了，横向的我只是自定义了一个横向的柱状图View，然后用ListView显示的各个部门的具体内容。好了最后感谢我的朋友帮了我很多忙Young_Kai，大家也可以看看他的博客，很不错的。
代码我已经上传我的Github，欢迎大家star，fork：
https://github.com/Hankkin/MyCartDemo
最后推荐一下老刘解析的MPChart
微信关注我们
转载内容版权归作者及来源网站所有！
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。
Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。
Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。
Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。
扫码在手机上查看文章
扫描二维码，手机阅读更方便
有任何问题或合作意向欢迎联系我们
Email: 99873273@qq.com
QQ: 99873273