先上一张效果图吧。
image.png
如果有要实现类似效果的朋友，可以继续往下看。（有问题请评论区留言，我会尽快回复的。）
直接贴代码。
布局文件
<com.zgzb.common.MarketOverView
app:column_minheight="@dimen/dimen_50dp"
android:background="@color/color_333333"
android:paddingTop="@dimen/dimen_10dp"
android:paddingBottom="@dimen/dimen_10dp"
android:paddingLeft="@dimen/dimen_21dp"
android:paddingRight="@dimen/dimen_21dp"
app:textcolor="@color/color_theme"
app:textsize="8sp"
app:columnartoppadding="@dimen/dimen_10dp"
app:columnsolidcolor="@color/color_theme"
app:columntextgap="@dimen/dimen_5dp"
app:column_result_gap="@dimen/dimen_5dp"
app:percolumnwidth="@dimen/dimen_20dp"
app:radius_lefttop="@dimen/dimen_3dp"
app:radius_righttop="@dimen/dimen_3dp"
app:radius_leftbottom="@dimen/dimen_0dp"
app:radius_rightbottom="@dimen/dimen_0dp"
android:id="@+id/view"
android:layout_width="match_parent"
android:layout_height="@dimen/dimen_180dp" />
自定义MarketOverView源码
public class MarketOverView extends View {
private int width;
private int height;
private int paddingLeft;
private int paddingRight;
private int maxColumnHeight;
private int paddingTop;
private int paddingBottom;
private int perColumnWidthGap;
//attr
private float textsize; //文字大小
private int textcolor; //文字颜色
private float percolumnwidth; //每个柱形图宽度
private int columnsolidcolor; //柱形图填充颜色
private float columnartoppadding; // 柱形图距离顶部的距离
private float columntextgap; // 柱形图与底部文字间距
private float radiusLeftTop; // 柱形图-圆角矩形-左上角 半径
private float radiusRightTop; //柱形图-圆角矩形-右上角 半径
private float radiusLeftBottom; //柱形图-圆角矩形-左下角 半径
private float radiusRightBottom; //柱形图-圆角矩形-右下角 半径
private float columnminheight; // 柱形图最低显示高度
private float column_result_gap; // 柱形图距离顶部文字的距离
public MarketOverView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init(context,attrs);
}
public MarketOverView(Context context) {
this(context, null);
}
private void init(Context context,AttributeSet attrs) {
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.MarketOverView);
textsize = ta.getDimensionPixelSize(R.styleable.MarketOverView_textsize, 8);
textcolor = ta.getColor(R.styleable.MarketOverView_textcolor, Color.RED);
percolumnwidth = ta.getDimensionPixelSize(R.styleable.MarketOverView_percolumnwidth, 20);
columnsolidcolor = ta.getColor(R.styleable.MarketOverView_columnsolidcolor, Color.RED);
columnartoppadding = ta.getDimensionPixelSize(R.styleable.MarketOverView_columnartoppadding, 5);
columntextgap = ta.getDimensionPixelSize(R.styleable.MarketOverView_columntextgap, 10);
radiusLeftTop = ta.getDimensionPixelSize(R.styleable.MarketOverView_radius_lefttop, 5);
radiusRightTop = ta.getDimensionPixelSize(R.styleable.MarketOverView_radius_righttop, 5);
radiusLeftBottom = ta.getDimensionPixelSize(R.styleable.MarketOverView_radius_leftbottom, 0);
radiusRightBottom = ta.getDimensionPixelSize(R.styleable.MarketOverView_radius_rightbottom, 0);
columnminheight = ta.getDimensionPixelSize(R.styleable.MarketOverView_column_minheight,0);
column_result_gap = ta.getDimensionPixelSize(R.styleable.MarketOverView_column_result_gap,5);
//
paint = new Paint();
maxColumnHeight = DensityUtils.dip2px(context, 100);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = getDefaultSize(0, widthMeasureSpec);
height = getDefaultSize(0, heightMeasureSpec);
paddingLeft = getPaddingLeft();
paddingRight = getPaddingRight();
paddingTop = getPaddingTop();
paddingBottom = getPaddingBottom();
maxColumn = Math.min(columnResults == null ? 0 : columnResults.size(), columnTextStrss == null ? 0 : columnTextStrss.length);
perColumnWidthGap = (int) ((width - paddingLeft - paddingRight - percolumnwidth * maxColumn) / (maxColumn - 1));
setMeasuredDimension(width, height);
}
// start
private int maxColumn = 0; //取columnStrss，columnResults中较小者
private String[] columnTextStrss; //柱状图底部显示的文字列表
private List<Integer> columnResults;//柱状图各个条目实际显示数据
private float maxResult,minResult;//columnResults中最大值
public void setColumnResults(String[] columnStrss, List<Integer> columnResults) {
this.columnTextStrss = columnStrss;
this.columnResults = columnResults;
maxResult = Collections.max(columnResults);
minResult=Collections.min(columnResults);
invalidate();
}
//end
private Paint paint;
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//text
paint.setColor(textcolor); //设置文字颜色
paint.setAntiAlias(true);
paint.setTextSize(textsize);//设置文字大小
Paint.FontMetrics fm = paint.getFontMetrics();
int textheight = (int) (fm.descent - fm.ascent); //文字高度
for (int i = 0; i < maxColumn; i++) {
float textwidth = paint.measureText(columnTextStrss[i]); //文字宽度
int left = (int) (paddingLeft + percolumnwidth * i + perColumnWidthGap * i);
int bottom = height - paddingBottom;
canvas.drawText(columnTextStrss[i], left + (percolumnwidth - textwidth)/2, bottom, paint);
// paint.setColor(Color.GREEN); //设置文字颜色
// canvas.drawRect(left,bottom-textheight,left+textwidth,bottom,paint);
}
//column columnResults
for (int i = 0; i < maxColumn; i++) {
int left = (int) (paddingLeft + percolumnwidth * i + perColumnWidthGap * i);
int right = (int) (left + percolumnwidth);
int bottom = (int) (height - paddingBottom - textheight - columntextgap);
int columnheight = (int) ((columnResults.get(i) * (bottom - textheight-column_result_gap-paddingTop-columnminheight) / maxResult)+columnminheight);
int top = bottom - columnheight;
Path path = new Path();
RectF rectF = new RectF(left, top, right, bottom);
path.addRoundRect(rectF, new float[]{radiusLeftTop, radiusLeftTop, radiusRightTop, radiusRightTop, radiusLeftBottom, radiusLeftBottom, radiusRightBottom, radiusRightBottom}, Path.Direction.CCW);
paint.setColor(columnsolidcolor); //设置柱形图颜色
canvas.drawPath(path, paint);
//result text
paint.setColor(textcolor); //设置文字颜色
float textwidth = paint.measureText(columnResults.get(i)+""); //文字宽度
canvas.drawText(columnResults.get(i)+"", left + (percolumnwidth - textwidth)/2, top-column_result_gap, paint);
}
}
}
