Android自定義柱狀圖表效果

加入 LINE@ 趣聞不漏接

Linux編程

點擊右側關注，免費入門到精通！

作者丨亂世白衣

https://www.jianshu.com/p/1595ce6aa3a7

本文通過示例代碼介紹如何自定義簡單的直方圖表，此圖表並非常見的直方圖表，而是可以分組的。此文不會過多涉及原理，比較簡單，示例圖片如下(gif圖片沒有製作好，有閃爍，請見諒)：

對於該示例的代碼做到，其實重點在於坐標軸、文字、直方圖的位置控制，需要隨滑動距離而動態更新。注意事項會在示例代碼中標註。下面貼出示例代碼

publicclassMultiGroupHistogramViewextendsView{privateintwidth;privateintheight;//坐標軸線寬度privateintcoordinateAxisWidth;//組名稱字體大小privateintgroupNameTextSize;//小組之間間距privateintgroupInterval;//組內子直方圖間距privateinthistogramInterval;privateinthistogramValueTextSize;//圖表數值小數點位數privateinthistogramValueDecimalCount;privateinthistogramHistogramWidth;privateintchartPaddingTop;privateinthistogramPaddingStart;privateinthistogramPaddingEnd;//各組名稱到X軸的距離privateintdistanceFormGroupNameToAxis;//直方圖上方數值到直方圖的距離privateintdistanceFromValueToHistogram;//直方圖最大高度privateintmaxHistogramHeight;//軸線畫筆privatePaintcoordinateAxisPaint;//組名畫筆privatePaintgroupNamePaint;privatePaint.FontMetricsgroupNameFontMetrics;privatePaint.FontMetricshistogramValueFontMetrics;//直方圖數值畫筆privatePainthistogramValuePaint;//直方圖畫筆privatePainthistogramPaint;//直方圖繪制區域privateRecthistogramPaintRect;//直方圖表視圖總寬度privateinthistogramContentWidth;//存儲組內直方圖shadercolor，例如，每組有3個直方圖，該SparseArray就存儲3個相對應的shadercolorprivateSparseArray<int[]>histogramShaderColorArray;privateList<MultiGroupHistogramGroupData>dataList;privateSparseArray<Float>childMaxValueArray;privateScrollerscroller;privateintminimumVelocity;privateintmaximumVelocity;privateVelocityTrackervelocityTracker;publicMultiGroupHistogramView(Contextcontext){this(context,null);}publicMultiGroupHistogramView(Contextcontext,@NullableAttributeSetattrs){this(context,attrs,0);}publicMultiGroupHistogramView(Contextcontext,@NullableAttributeSetattrs,intdefStyleAttr){super(context,attrs,defStyleAttr);init(attrs);}privatevoidinit(AttributeSetattrs){setLayerType(View.LAYER_TYPE_HARDWARE,null);TypedArraytypedArray=getContext().obtainStyledAttributes(attrs,R.styleable.MultiGroupHistogramView);coordinateAxisWidth=typedArray.getDimensionPixelSize(R.styleable.MultiGroupHistogramView_coordinateAxisWidth,DisplayUtil.dp2px(2));//坐標軸線顏色intcoordinateAxisColor=typedArray.getColor(R.styleable.MultiGroupHistogramView_coordinateAxisColor,Color.parseColor("#434343"));//底部小組名稱字體顏色intgroupNameTextColor=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));//直方圖數值文本顏色inthistogramValueTextColor=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=newPaint(Paint.ANTI_ALIAS_FLAG);coordinateAxisPaint.setStyle(Paint.Style.FILL);coordinateAxisPaint.setStrokeWidth(coordinateAxisWidth);coordinateAxisPaint.setColor(coordinateAxisColor);groupNamePaint=newPaint(Paint.ANTI_ALIAS_FLAG);groupNamePaint.setTextSize(groupNameTextSize);groupNamePaint.setColor(groupNameTextColor);groupNameFontMetrics=groupNamePaint.getFontMetrics();histogramValuePaint=newPaint(Paint.ANTI_ALIAS_FLAG);histogramValuePaint.setTextSize(histogramValueTextSize);histogramValuePaint.setColor(histogramValueTextColor);histogramValueFontMetrics=histogramValuePaint.getFontMetrics();histogramPaintRect=newRect();histogramPaint=newPaint(Paint.ANTI_ALIAS_FLAG);scroller=newScroller(getContext(),newLinearInterpolator());ViewConfigurationconfiguration=ViewConfiguration.get(getContext());minimumVelocity=configuration.getScaledMinimumFlingVelocity();maximumVelocity=configuration.getScaledMaximumFlingVelocity();}@OverrideprotectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec){super.onMeasure(widthMeasureSpec,heightMeasureSpec);width=getMeasuredWidth();height=getMeasuredHeight();maxHistogramHeight=height-groupNameTextSize-coordinateAxisWidth-distanceFormGroupNameToAxis-distanceFromValueToHistogram-histogramValueTextSize-chartPaddingTop;}/***判斷是否可以水平滑動*@paramdirection標識滑動方向正數：右滑(手指從右至左移動)；負數：左滑(手指由左向右移動)*您可參考ScaollView或HorizontalScrollView理解滑動方向*/@OverridepublicbooleancanScrollHorizontally(intdirection){if(direction>0){returnhistogramContentWidth-getScrollX()-width+histogramPaddingStart+histogramPaddingEnd>0;}else{returngetScrollX()>0;}}/***根據滑動方向獲取最大可滑動距離*@paramdirection標識滑動方向正數：右滑(手指從右至左移動)；負數：左滑(手指由左向右移動)*您可參考ScaollView或HorizontalScrollView理解滑動方向*/privateintgetMaxCanScrollX(intdirection){if(direction>0){returnhistogramContentWidth-getScrollX()-width+histogramPaddingStart+histogramPaddingEnd>0?histogramContentWidth-getScrollX()-width+histogramPaddingStart+histogramPaddingEnd:0;}elseif(direction<0){returngetScrollX();}return0;}privatefloatlastX;@OverridepublicbooleanonTouchEvent(MotionEventevent){initVelocityTrackerIfNotExists();velocityTracker.addMovement(event);switch(event.getAction()){caseMotionEvent.ACTION_DOWN:{if(!scroller.isFinished()){scroller.abortAnimation();}lastX=event.getX();returntrue;}caseMotionEvent.ACTION_MOVE:{intdeltaX=(int)(event.getX()-lastX);lastX=event.getX();//滑動處理if(deltaX>0&&canScrollHorizontally(-1)){scrollBy(-Math.min(getMaxCanScrollX(-1),deltaX),0);}elseif(deltaX<0&&canScrollHorizontally(1)){scrollBy(Math.min(getMaxCanScrollX(1),-deltaX),0);}break;}caseMotionEvent.ACTION_UP:{velocityTracker.computeCurrentVelocity(1000,maximumVelocity);intvelocityX=(int)velocityTracker.getXVelocity();fling(velocityX);recycleVelocityTracker();break;}caseMotionEvent.ACTION_CANCEL:{recycleVelocityTracker();break;}}returnsuper.onTouchEvent(event);}privatevoidinitVelocityTrackerIfNotExists(){if(velocityTracker==null){velocityTracker=VelocityTracker.obtain();}}privatevoidrecycleVelocityTracker(){if(velocityTracker!=null){velocityTracker.recycle();velocityTracker=null;}}//ACTION_UP事件觸發privatevoidfling(intvelocityX){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);}}@OverridepublicvoidcomputeScroll(){if(scroller.computeScrollOffset()){scrollTo(scroller.getCurrX(),0);}}publicvoidsetDataList(@NonNullList<MultiGroupHistogramGroupData>dataList){this.dataList=dataList;if(childMaxValueArray==null){childMaxValueArray=newSparseArray<>();}else{childMaxValueArray.clear();}histogramContentWidth=0;for(MultiGroupHistogramGroupDatagroupData:dataList){List<MultiGroupHistogramChildData>childDataList=groupData.getChildDataList();if(childDataList!=null&&childDataList.size()>0){for(inti=0;i<childDataList.size();i++){histogramContentWidth+=histogramHistogramWidth+histogramInterval;MultiGroupHistogramChildDatachildData=childDataList.get(i);FloatchildMaxValue=childMaxValueArray.get(i);if(childMaxValue==null||childMaxValue<childData.getValue()){childMaxValueArray.put(i,childData.getValue());}}histogramContentWidth+=groupInterval-histogramInterval;}}histogramContentWidth+=-groupInterval;postInvalidate();}/***設置組內直方圖顏色(並不是設置所有直方圖顏色，而是根據每組數據內直方圖數量設置)*/publicvoidsetHistogramColor(int[]...colors){if(colors!=null&&colors.length>0){if(histogramShaderColorArray==null){histogramShaderColorArray=newSparseArray<>();}else{histogramShaderColorArray.clear();}for(inti=0;i<colors.length;i++){histogramShaderColorArray.put(i,colors[i]);}}}@OverrideprotectedvoidonDraw(Canvascanvas){if(width==0||height==0){return;}intscrollX=getScrollX();intaxisBottom=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&&dataList.size()>0){intxAxisOffset=histogramPaddingStart;//每個直方圖在x軸的偏移量for(MultiGroupHistogramGroupDatagroupData:dataList){List<MultiGroupHistogramChildData>childDataList=groupData.getChildDataList();if(childDataList!=null&&childDataList.size()>0){intgroupWidth=0;for(inti=0;i<childDataList.size();i++){MultiGroupHistogramChildDatachildData=childDataList.get(i);histogramPaintRect.left=xAxisOffset;histogramPaintRect.right=histogramPaintRect.left+histogramHistogramWidth;intchildHistogramHeight;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);LinearGradientshader=null;if(histogramShaderColor!=null&&histogramShaderColor.length>0){shader=getHistogramShader(histogramPaintRect.left,chartPaddingTop+distanceFromValueToHistogram+histogramValueTextSize,histogramPaintRect.right,histogramPaintRect.bottom,histogramShaderColor);}histogramPaint.setShader(shader);canvas.drawRect(histogramPaintRect,histogramPaint);StringchildHistogramHeightValue=StringUtil.NumericScaleByFloor(String.valueOf(childData.getValue()),histogramValueDecimalCount)+childData.getSuffix();floatvalueTextX=xAxisOffset+(histogramHistogramWidth-histogramValuePaint.measureText(childHistogramHeightValue))/2;//數值繪制Y軸位置特別處理floatvalueTextY=histogramPaintRect.top-distanceFormGroupNameToAxis+(histogramValueFontMetrics.bottom)/2;canvas.drawText(childHistogramHeightValue,valueTextX,valueTextY,histogramValuePaint);intdeltaX=i<childDataList.size()-1?histogramHistogramWidth+histogramInterval:histogramHistogramWidth;groupWidth+=deltaX;//注意此處偏移量累加xAxisOffset+=i==childDataList.size()-1?deltaX+groupInterval:deltaX;}StringgroupName=groupData.getGroupName();floatgroupNameTextWidth=groupNamePaint.measureText(groupName);floatgroupNameTextX=xAxisOffset-groupWidth-groupInterval+(groupWidth-groupNameTextWidth)/2;//組名繪制Y軸位置特別處理floatgroupNameTextY=(height-groupNameFontMetrics.bottom/2);canvas.drawText(groupName,groupNameTextX,groupNameTextY,groupNamePaint);}}}}privateLinearGradientgetHistogramShader(floatx0,floaty0,floatx1,floaty1,int[]colors){returnnewLinearGradient(x0,y0,x1,y1,colors,null,Shader.TileMode.CLAMP);}}

代碼就這一點，閱讀起來應該不難，如有疑問歡迎留言

自定義屬性如下：

<declare-styleablename="MultiGroupHistogramView"><attrname="coordinateAxisWidth"format="dimension"/><attrname="coordinateAxisColor"format="color"/><attrname="groupNameTextColor"format="color"/><attrname="groupNameTextSize"format="dimension"/><attrname="groupInterval"format="dimension"/><attrname="histogramInterval"format="dimension"/><attrname="histogramValueTextColor"format="color"/><attrname="histogramValueTextSize"format="dimension"/><attrname="histogramHistogramWidth"format="dimension"/><attrname="histogramPaddingStart"format="dimension"/><attrname="histogramPaddingEnd"format="dimension"/><attrname="chartPaddingTop"format="dimension"/><attrname="distanceFormGroupNameToAxis"format="dimension"/><attrname="distanceFromValueToHistogram"format="dimension"/><!--圖表數值小數點位數--><attrname="histogramValueDecimalCount"><enumname="ZERO"value="0"/><enumname="ONE"value="1"/><enumname="TWO"value="2"/></attr></declare-styleable>

下面貼出使用方法：

privatevoidinitMultiGroupHistogramView(){Randomrandom=newRandom();intgroupSize=random.nextInt(5)+10;List<MultiGroupHistogramGroupData>groupDataList=newArrayList<>();//生成測試數據for(inti=0;i<groupSize;i++){List<MultiGroupHistogramChildData>childDataList=newArrayList<>();MultiGroupHistogramGroupDatagroupData=newMultiGroupHistogramGroupData();groupData.setGroupName("第"+(i+1)+"組");MultiGroupHistogramChildDatachildData1=newMultiGroupHistogramChildData();childData1.setSuffix("分");childData1.setValue(random.nextInt(50)+51);childDataList.add(childData1);MultiGroupHistogramChildDatachildData2=newMultiGroupHistogramChildData();childData2.setSuffix("%");childData2.setValue(random.nextInt(50)+51);childDataList.add(childData2);groupData.setChildDataList(childDataList);groupDataList.add(groupData);}multiGroupHistogramView.setDataList(groupDataList);int[]color1=newint[]{getResources().getColor(R.color.color_orange),getResources().getColor(R.color.colorPrimary)};int[]color2=newint[]{getResources().getColor(R.color.color_supper_tip_normal),getResources().getColor(R.color.bg_supper_selected)};//設置直方圖顏色multiGroupHistogramView.setHistogramColor(color1,color2);}

完整示例：