先上一張效果圖吧。
image.png
如果有要實現(xiàn)類似效果的朋友，可以繼續(xù)往下看。（有問題請評論區(qū)留言，我會盡快回復(fù)的。）
直接貼代碼。
布局文件
<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;//柱狀圖各個條目實際顯示數(shù)據(jù)
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); //設(shè)置文字顏色
paint.setAntiAlias(true);
paint.setTextSize(textsize);//設(shè)置文字大小
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); //設(shè)置文字顏色
// 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); //設(shè)置柱形圖顏色
canvas.drawPath(path, paint);
//result text
paint.setColor(textcolor); //設(shè)置文字顏色
float textwidth = paint.measureText(columnResults.get(i)+""); //文字寬度
canvas.drawText(columnResults.get(i)+"", left + (percolumnwidth - textwidth)/2, top-column_result_gap, paint);
}
}
}
