本文通过示例代码介绍如何自定义简单的直方图表，此图表并非常见的直方图表，而是可以分组的。此文不会过多涉及原理，比较简单，示例图片如下(gif图片没有制作好，有闪烁，请见谅)：

对于该示例的代码实现，其实重点在于坐标轴、文字、直方图的位置控制，需要随滑动距离而动态更新。注意事项会在示例代码中标注。下面贴出示例代码

public class MultiGroupHistogramView extends View {private int width;private int height;// 坐标轴线宽度private int coordinateAxisWidth;// 组名称字体大小private int groupNameTextSize;// 小组之间间距private int groupInterval;// 组内子直方图间距private int histogramInterval;private int histogramValueTextSize;// 图表数值小数点位数private int histogramValueDecimalCount;private int histogramHistogramWidth;private int chartPaddingTop;private int histogramPaddingStart;private int histogramPaddingEnd;// 各组名称到X轴的距离private int distanceFormGroupNameToAxis;// 直方图上方数值到直方图的距离private int distanceFromValueToHistogram;// 直方图最大高度private int maxHistogramHeight;// 轴线画笔private Paint coordinateAxisPaint;// 组名画笔private Paint groupNamePaint;private Paint.FontMetrics groupNameFontMetrics;private Paint.FontMetrics histogramValueFontMetrics;// 直方图数值画笔private Paint histogramValuePaint;// 直方图画笔private Paint histogramPaint;// 直方图绘制区域private Rect histogramPaintRect;// 直方图表视图总宽度private int histogramContentWidth;// 存储组内直方图shader color，例如，每组有3个直方图，该SparseArray就存储3个相对应的shader colorprivate SparseArray<int[]> histogramShaderColorArray;private List<MultiGroupHistogramGroupData> dataList;private SparseArray<Float> childMaxValueArray;private Scroller scroller;private int minimumVelocity;private int maximumVelocity;private VelocityTracker velocityTracker;public MultiGroupHistogramView(Context context) {this(context, null);}public MultiGroupHistogramView(Context context, @Nullable AttributeSet attrs) {this(context, attrs, 0);}public MultiGroupHistogramView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init(attrs);}private void init(AttributeSet attrs) {setLayerType(View.LAYER_TYPE_HARDWARE, null);TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.MultiGroupHistogramView);coordinateAxisWidth = typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_coordinateAxisWidth, DisplayUtil.dp2px(2));// 坐标轴线颜色int coordinateAxisColor = typedArray.getColor(R.styleable.MultiGroupHistogramView_coordinateAxisColor, Color.parseColor("#434343"));// 底部小组名称字体颜色int groupNameTextColor = typedArray.getColor(R.styleable.MultiGroupHistogramView_groupNameTextColor, Color.parseColor("#CC202332"));groupNameTextSize = typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_groupNameTextSize, DisplayUtil.dp2px(15));groupInterval = typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_groupInterval, DisplayUtil.dp2px(30));histogramInterval = typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_histogramInterval, DisplayUtil.dp2px(10));// 直方图数值文本颜色int histogramValueTextColor = typedArray.getColor(R.styleable.MultiGroupHistogramView_histogramValueTextColor, Color.parseColor("#CC202332"));histogramValueTextSize = typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_histogramValueTextSize, DisplayUtil.dp2px(12));histogramValueDecimalCount = typedArray.getInt(R.styleable.MultiGroupHistogramView_histogramValueDecimalCount, 0);histogramHistogramWidth = typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_histogramHistogramWidth, DisplayUtil.dp2px(20));chartPaddingTop = typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_chartPaddingTop, DisplayUtil.dp2px(10));histogramPaddingStart = typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_histogramPaddingStart, DisplayUtil.dp2px(15));histogramPaddingEnd = typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_histogramPaddingEnd, DisplayUtil.dp2px(15));distanceFormGroupNameToAxis = typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_distanceFormGroupNameToAxis, DisplayUtil.dp2px(15));distanceFromValueToHistogram = typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_distanceFromValueToHistogram, DisplayUtil.dp2px(10));typedArray.recycle();coordinateAxisPaint = new Paint(Paint.ANTI_ALIAS_FLAG);coordinateAxisPaint.setStyle(Paint.Style.FILL);coordinateAxisPaint.setStrokeWidth(coordinateAxisWidth);coordinateAxisPaint.setColor(coordinateAxisColor);groupNamePaint = new Paint(Paint.ANTI_ALIAS_FLAG);groupNamePaint.setTextSize(groupNameTextSize);groupNamePaint.setColor(groupNameTextColor);groupNameFontMetrics = groupNamePaint.getFontMetrics();histogramValuePaint = new Paint(Paint.ANTI_ALIAS_FLAG);histogramValuePaint.setTextSize(histogramValueTextSize);histogramValuePaint.setColor(histogramValueTextColor);histogramValueFontMetrics = histogramValuePaint.getFontMetrics();histogramPaintRect = new Rect();histogramPaint = new Paint(Paint.ANTI_ALIAS_FLAG);scroller = new Scroller(getContext(), new LinearInterpolator());ViewConfiguration configuration = ViewConfiguration.get(getContext());minimumVelocity = configuration.getScaledMinimumFlingVelocity();maximumVelocity = configuration.getScaledMaximumFlingVelocity();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);width = getMeasuredWidth();height = getMeasuredHeight();maxHistogramHeight = height - groupNameTextSize - coordinateAxisWidth - distanceFormGroupNameToAxis - distanceFromValueToHistogram - histogramValueTextSize - chartPaddingTop;}/*** 判断是否可以水平滑动* @param direction 标识滑动方向  正数：右滑(手指从右至左移动)；负数：左滑(手指由左向右移动)* 您可参考ScaollView或HorizontalScrollView理解滑动方向*/@Overridepublic boolean canScrollHorizontally(int direction) {if (direction > 0) {return histogramContentWidth - getScrollX() - width + histogramPaddingStart + histogramPaddingEnd > 0;} else {return getScrollX() > 0;}}/*** 根据滑动方向获取最大可滑动距离* @param direction 标识滑动方向  正数：右滑(手指从右至左移动)；负数：左滑(手指由左向右移动)* 您可参考ScaollView或HorizontalScrollView理解滑动方向*/private int getMaxCanScrollX(int direction) {if (direction > 0) {return histogramContentWidth - getScrollX() - width + histogramPaddingStart + histogramPaddingEnd > 0 ?histogramContentWidth - getScrollX() - width + histogramPaddingStart + histogramPaddingEnd : 0;} else if (direction < 0) {return getScrollX();}return 0;}private float lastX;@Overridepublic boolean onTouchEvent(MotionEvent event) {initVelocityTrackerIfNotExists();velocityTracker.addMovement(event);switch (event.getAction()) {case MotionEvent.ACTION_DOWN: {if (!scroller.isFinished()) {scroller.abortAnimation();}lastX = event.getX();return true;}case MotionEvent.ACTION_MOVE: {int deltaX = (int) (event.getX() - lastX);lastX = event.getX();// 滑动处理if (deltaX > 0 &amp;&amp; canScrollHorizontally(-1)) {scrollBy(-Math.min(getMaxCanScrollX(-1), deltaX), 0);} else if (deltaX < 0 &amp;&amp; canScrollHorizontally(1)) {scrollBy(Math.min(getMaxCanScrollX(1), -deltaX), 0);}break;}case MotionEvent.ACTION_UP: {velocityTracker.computeCurrentVelocity(1000, maximumVelocity);int velocityX = (int) velocityTracker.getXVelocity();fling(velocityX);recycleVelocityTracker();break;}case MotionEvent.ACTION_CANCEL: {recycleVelocityTracker();break;}}return super.onTouchEvent(event);}private void initVelocityTrackerIfNotExists() {if (velocityTracker == null) {velocityTracker = VelocityTracker.obtain();}}private void recycleVelocityTracker() {if (velocityTracker != null) {velocityTracker.recycle();velocityTracker = null;}}// ACTION_UP事件触发private void fling(int velocityX) {if (Math.abs(velocityX) > minimumVelocity) {if (Math.abs(velocityX) > maximumVelocity) {velocityX = maximumVelocity * velocityX / Math.abs(velocityX);}scroller.fling(getScrollX(), getScrollY(), -velocityX, 0, 0, histogramContentWidth + histogramPaddingStart - width, 0, 0);}}@Overridepublic void computeScroll() {if (scroller.computeScrollOffset()) {scrollTo(scroller.getCurrX(), 0);}}public void setDataList(@NonNull List<MultiGroupHistogramGroupData> dataList) {this.dataList = dataList;if (childMaxValueArray == null) {childMaxValueArray = new SparseArray<>();} else {childMaxValueArray.clear();}histogramContentWidth = 0;for (MultiGroupHistogramGroupData groupData : dataList) {List<MultiGroupHistogramChildData> childDataList = groupData.getChildDataList();if (childDataList != null &amp;&amp; childDataList.size() > 0) {for (int i = 0; i < childDataList.size(); i++) {histogramContentWidth += histogramHistogramWidth + histogramInterval;MultiGroupHistogramChildData childData = childDataList.get(i);Float childMaxValue = childMaxValueArray.get(i);if (childMaxValue == null || childMaxValue < childData.getValue()) {childMaxValueArray.put(i, childData.getValue());}}histogramContentWidth += groupInterval - histogramInterval;}}histogramContentWidth += -groupInterval;postInvalidate();}/*** 设置组内直方图颜色(并不是设置所有直方图颜色，而是根据每组数据内直方图数量设置)*/public void setHistogramColor(int[]... colors) {if (colors != null &amp;&amp; colors.length > 0) {if (histogramShaderColorArray == null) {histogramShaderColorArray = new SparseArray<>();} else {histogramShaderColorArray.clear();}for (int i = 0; i < colors.length; i++) {histogramShaderColorArray.put(i, colors[i]);}}}@Overrideprotected void onDraw(Canvas canvas) {if (width == 0 || height == 0) {return;}int scrollX = getScrollX();int axisBottom = height - groupNameTextSize - distanceFormGroupNameToAxis - coordinateAxisWidth / 2;canvas.drawLine(coordinateAxisWidth / 2 + scrollX, 0, coordinateAxisWidth / 2 + scrollX, axisBottom, coordinateAxisPaint);canvas.drawLine(scrollX, axisBottom, width + scrollX, axisBottom, coordinateAxisPaint);if (dataList != null &amp;&amp; dataList.size() > 0) {int xAxisOffset = histogramPaddingStart;   // 每个直方图在x轴的偏移量for (MultiGroupHistogramGroupData groupData : dataList) {List<MultiGroupHistogramChildData> childDataList = groupData.getChildDataList();if (childDataList != null &amp;&amp; childDataList.size() > 0) {int groupWidth = 0;for (int i = 0; i < childDataList.size(); i++) {MultiGroupHistogramChildData childData = childDataList.get(i);histogramPaintRect.left = xAxisOffset;histogramPaintRect.right = histogramPaintRect.left + histogramHistogramWidth;int childHistogramHeight;if (childData.getValue() <= 0 || childMaxValueArray.get(i) <= 0) {childHistogramHeight = 0;} else {childHistogramHeight = (int) (childData.getValue() / childMaxValueArray.get(i) * maxHistogramHeight);}histogramPaintRect.top = height - childHistogramHeight - coordinateAxisWidth - distanceFormGroupNameToAxis - groupNameTextSize;histogramPaintRect.bottom = histogramPaintRect.top + childHistogramHeight;int[] histogramShaderColor = histogramShaderColorArray.get(i);LinearGradient shader = null;if (histogramShaderColor != null &amp;&amp; histogramShaderColor.length > 0) {shader = getHistogramShader(histogramPaintRect.left, chartPaddingTop + distanceFromValueToHistogram + histogramValueTextSize,histogramPaintRect.right, histogramPaintRect.bottom, histogramShaderColor);}histogramPaint.setShader(shader);canvas.drawRect(histogramPaintRect, histogramPaint);String childHistogramHeightValue = StringUtil.NumericScaleByFloor(String.valueOf(childData.getValue()), histogramValueDecimalCount) + childData.getSuffix();float valueTextX = xAxisOffset + (histogramHistogramWidth - histogramValuePaint.measureText(childHistogramHeightValue)) / 2;// 数值绘制Y轴位置特别处理float valueTextY = histogramPaintRect.top - distanceFormGroupNameToAxis + (histogramValueFontMetrics.bottom) / 2;canvas.drawText(childHistogramHeightValue, valueTextX, valueTextY, histogramValuePaint);int deltaX = i < childDataList.size() - 1 ? histogramHistogramWidth + histogramInterval : histogramHistogramWidth;groupWidth += deltaX;// 注意此处偏移量累加xAxisOffset += i == childDataList.size() - 1 ? deltaX + groupInterval : deltaX;}String groupName = groupData.getGroupName();float groupNameTextWidth = groupNamePaint.measureText(groupName);float groupNameTextX = xAxisOffset - groupWidth - groupInterval + (groupWidth - groupNameTextWidth) / 2;// 组名绘制Y轴位置特别处理float groupNameTextY = (height - groupNameFontMetrics.bottom / 2);canvas.drawText(groupName, groupNameTextX, groupNameTextY, groupNamePaint);}}}}private LinearGradient getHistogramShader(float x0, float y0, float x1, float y1, int[] colors) {return new LinearGradient(x0, y0, x1, y1, colors, null, Shader.TileMode.CLAMP);}
}

代码就这一点，阅读起来应该不难，如有疑问欢迎留言
自定义属性如下：

   <declare-styleable name="MultiGroupHistogramView"><attr name="coordinateAxisWidth" format="dimension" /><attr name="coordinateAxisColor" format="color" /><attr name="groupNameTextColor" format="color" /><attr name="groupNameTextSize" format="dimension" /><attr name="groupInterval" format="dimension" /><attr name="histogramInterval" format="dimension" /><attr name="histogramValueTextColor" format="color" /><attr name="histogramValueTextSize" format="dimension" /><attr name="histogramHistogramWidth" format="dimension" /><attr name="histogramPaddingStart" format="dimension" /><attr name="histogramPaddingEnd" format="dimension" /><attr name="chartPaddingTop" format="dimension" /><attr name="distanceFormGroupNameToAxis" format="dimension" /><attr name="distanceFromValueToHistogram" format="dimension" /><!--图表数值小数点位数--><attr name="histogramValueDecimalCount"><enum name="ZERO" value="0" /><enum name="ONE" value="1" /><enum name="TWO" value="2" /></attr></declare-styleable>

下面贴出使用方法：

   private void initMultiGroupHistogramView() {Random random = new Random();int groupSize = random.nextInt(5) + 10;List<MultiGroupHistogramGroupData> groupDataList = new ArrayList<>();// 生成测试数据 for (int i = 0; i < groupSize; i++) {List<MultiGroupHistogramChildData> childDataList = new ArrayList<>();MultiGroupHistogramGroupData groupData = new MultiGroupHistogramGroupData();groupData.setGroupName("第" + (i + 1) + "组");MultiGroupHistogramChildData childData1 = new MultiGroupHistogramChildData();childData1.setSuffix("分");childData1.setValue(random.nextInt(50) + 51);childDataList.add(childData1);MultiGroupHistogramChildData childData2 = new MultiGroupHistogramChildData();childData2.setSuffix("%");childData2.setValue(random.nextInt(50) + 51);childDataList.add(childData2);groupData.setChildDataList(childDataList);groupDataList.add(groupData);}multiGroupHistogramView.setDataList(groupDataList);int[] color1 = new int[]{getResources().getColor(R.color.color_orange), getResources().getColor(R.color.colorPrimary)};int[] color2 = new int[]{getResources().getColor(R.color.color_supper_tip_normal), getResources().getColor(R.color.bg_supper_selected)};// 设置直方图颜色multiGroupHistogramView.setHistogramColor(color1, color2);}

完整示例：https://github.com/670832188/TestApp

原文发布时间为：2019-1-3
本文作者：乱世白衣
本文来自云栖社区合作伙伴“ 安卓巴士Android开发者门户”，了解相关信息可以关注“anzhuobashi”微信公众号