Android mpAndroid 设置柱状图描述的时候 怎么选择位置 安卓柱状图控件

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

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

publicclassMultiGroupHistogramViewextendsView{
privateintwidth;
privateintheight;
// 坐标轴线宽度
privateintcoordinateAxisWidth;
// 组名称字体大小
privateintgroupNameTextSize;
// 小组之间间距
privateintgroupInterval;
// 组内子直方图间距
privateinthistogramInterval;
privateinthistogramValueTextSize;
// 图表数值小数点位数
privateinthistogramValueDecimalCount;
privateinthistogramHistogramWidth;
privateintchartPaddingTop;
privateinthistogramPaddingStart;
privateinthistogramPaddingEnd;
// 各组名称到X轴的距离
privateintdistanceFormGroupNameToAxis;
// 直方图上方数值到直方图的距离
privateintdistanceFromValueToHistogram;
// 直方图最大高度
privateintmaxHistogramHeight;
// 轴线画笔
privatePaint coordinateAxisPaint;
// 组名画笔
privatePaint groupNamePaint;
privatePaint.FontMetrics groupNameFontMetrics;
privatePaint.FontMetrics histogramValueFontMetrics;
// 直方图数值画笔
privatePaint histogramValuePaint;
// 直方图画笔
privatePaint histogramPaint;
// 直方图绘制区域
privateRect histogramPaintRect;
// 直方图表视图总宽度
privateinthistogramContentWidth;
// 存储组内直方图shader color，例如，每组有3个直方图，该SparseArray就存储3个相对应的shader color
privateSparseArray< int[]> histogramShaderColorArray;
privateList dataList;
privateSparseArray childMaxValueArray;
privateScroller scroller;
privateintminimumVelocity;
privateintmaximumVelocity;
privateVelocityTracker velocityTracker;
publicMultiGroupHistogramView(Context context){
this(context, null);
}
publicMultiGroupHistogramView(Context context, @Nullable AttributeSet attrs){
this(context, attrs, 0);
}
publicMultiGroupHistogramView(Context context, @Nullable AttributeSet attrs, intdefStyleAttr){
super(context, attrs, defStyleAttr);
init(attrs);
}
privatevoidinit(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));
// 坐标轴线颜色
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());
ViewConfiguration configuration = ViewConfiguration. get(getContext());
minimumVelocity = configuration.getScaledMinimumFlingVelocity();
maximumVelocity = configuration.getScaledMaximumFlingVelocity();
}
@ Override
protectedvoidonMeasure(intwidthMeasureSpec, intheightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = getMeasuredWidth();
height = getMeasuredHeight();
maxHistogramHeight = height - groupNameTextSize - coordinateAxisWidth - distanceFormGroupNameToAxis - distanceFromValueToHistogram - histogramValueTextSize - chartPaddingTop;
}
/**
* 判断是否可以水平滑动
* @param direction 标识滑动方向 正数：右滑(手指从右至左移动)；负数：左滑(手指由左向右移动)
* 您可参考ScaollView或HorizontalScrollView理解滑动方向
*/
@ Override
publicboolean canScrollHorizontally(intdirection) {
if(direction > 0) {
returnhistogramContentWidth - getScrollX() - width + histogramPaddingStart + histogramPaddingEnd > 0;
} else{
returngetScrollX() > 0;
}
}
/**
* 根据滑动方向获取最大可滑动距离
* @param direction 标识滑动方向 正数：右滑(手指从右至左移动)；负数：左滑(手指由左向右移动)
* 您可参考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;
@ Override
publicboolean onTouchEvent(MotionEvent event) {
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);
}
}
@ Override
publicvoidcomputeScroll() {
if(scroller.computeScrollOffset()) {
scrollTo(scroller.getCurrX(), 0);
}
}
publicvoidsetDataList(@NonNull List dataList){
this.dataList = dataList;
if(childMaxValueArray == null) {
childMaxValueArray = newSparseArray<>();
} else{
childMaxValueArray.clear();
}
histogramContentWidth = 0;
for(MultiGroupHistogramGroupData groupData : dataList) {
List childDataList = groupData.getChildDataList();
if(childDataList != null&& childDataList.size() > 0) {
for( inti = 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();
}
/**
* 设置组内直方图颜色(并不是设置所有直方图颜色，而是根据每组数据内直方图数量设置)
*/
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]);
}
}
}
@ Override
protectedvoidonDraw(Canvas canvas) {
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(MultiGroupHistogramGroupData groupData : dataList) {
List childDataList = groupData.getChildDataList();
if(childDataList != null&& childDataList.size() > 0) {
intgroupWidth = 0;
for( inti = 0; i < childDataList.size(); i++) {
MultiGroupHistogramChildData childData = 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);
LinearGradient shader = 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);
String childHistogramHeightValue = 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;
}
String groupName = 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);
}
}
}
}
privateLinearGradient getHistogramShader(floatx0, floaty0, floatx1, floaty1, int[] colors){
returnnewLinearGradient(x0, y0, x1, y1, colors, null, Shader.TileMode.CLAMP);
}
}

代码就这一点，阅读起来应该不难，如有疑问欢迎留言

自定义属性如下：

下面贴出使用方法：

privatevoidinitMultiGroupHistogramView(){
Random random = newRandom();
intgroupSize = random.nextInt( 5) + 10;
List groupDataList = newArrayList<>();
// 生成测试数据
for( inti = 0; i < groupSize; i++) {
List childDataList = newArrayList<>();
MultiGroupHistogramGroupData groupData = newMultiGroupHistogramGroupData();
groupData.setGroupName( "第"+ (i + 1) + "组");
MultiGroupHistogramChildData childData1 = newMultiGroupHistogramChildData();
childData1.setSuffix( "分");
childData1.setValue(random.nextInt( 50) + 51);
childDataList. add(childData1);
MultiGroupHistogramChildData childData2 = 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);
}

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

大家都在看