Android自定义柱状图表的方法实例

  

  

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

  

 Android自定义柱状图表的方法实例“> <br/>
  </p>
  <p>对于该示例的代码实现,其实重点在于坐标轴,文字,直方图的位置控制,需要随滑动距离而动态更新。注意事项会在示例代码中标注。下面贴出示例代码</p>
  
  <pre类=   公开课MultiGroupHistogramView扩展视图{   私人int宽度;   私人int高度;//坐标轴线宽度   私人int coordinateAxisWidth;//组名称字体大小   私人int groupNameTextSize;//小组之间间距   私人int groupInterval;//组内子直方图间距   私人int histogramInterval;   私人int histogramValueTextSize;//图表数值小数点位数   私人int histogramValueDecimalCount;   私人int histogramHistogramWidth;   私人int chartPaddingTop;   私人int histogramPaddingStart;   私人int histogramPaddingEnd;//各组名称到X轴的距离   私人int distanceFormGroupNameToAxis;//直方图上方数值到直方图的距离   私人int distanceFromValueToHistogram;//直方图最大高度   私人int maxHistogramHeight;//轴线画笔   私人油漆coordinateAxisPaint;//组名画笔   私人油漆groupNamePaint;   私人油漆。FontMetrics groupNameFontMetrics;   私人油漆。FontMetrics histogramValueFontMetrics;//直方图数值画笔   私人油漆histogramValuePaint;//直方图画笔   私人油漆histogramPaint;//直方图绘制区域   私人矩形histogramPaintRect;//直方图表视图总宽度   私人int histogramContentWidth;//存储组内直方图材质颜色,例如,每组有3个直方图,该SparseArray就存储3个相对应的材质颜色   私人SparseArraydataList;   私人SparseArraychildMaxValueArray;      私人照片卷轴照片卷轴;   私人int minimumVelocity;   私人int maximumVelocity;   私人VelocityTracker VelocityTracker;      公共MultiGroupHistogramView(上下文语境){   这(上下文,null);   }      公共MultiGroupHistogramView(上下文语境,@Nullable AttributeSet attrs) {   这(上下文、attrs 0);   }      公共MultiGroupHistogramView(上下文语境,@Nullable AttributeSet attrs, int defStyleAttr) {   超级(上下文、attrs defStyleAttr);   init (attrs);   }      私人空间init (AttributeSet attrs) {   setLayerType(视图。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.ANTI_ALIAS_FLAG);   coordinateAxisPaint.setStyle (Paint.Style.FILL);   coordinateAxisPaint.setStrokeWidth (coordinateAxisWidth);   coordinateAxisPaint.setColor (coordinateAxisColor);      groupNamePaint=new油漆(Paint.ANTI_ALIAS_FLAG);   groupNamePaint.setTextSize (groupNameTextSize);   groupNamePaint.setColor (groupNameTextColor);   groupNameFontMetrics=groupNamePaint.getFontMetrics ();      histogramValuePaint=new油漆(Paint.ANTI_ALIAS_FLAG);   histogramValuePaint.setTextSize (histogramValueTextSize);   histogramValuePaint.setColor (histogramValueTextColor);   histogramValueFontMetrics=histogramValuePaint.getFontMetrics ();      histogramPaintRect=new矩形();   histogramPaint=new油漆(Paint.ANTI_ALIAS_FLAG);   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null

Android自定义柱状图表的方法实例