产品需求中难免有一些不符合常理的设计!!!今天来设计针对一个会员,积分系统,设计一个水平的进度条,首先看图说话
看出图中会员等级分为4级,每一级的长度均分4个实心的点,分为四个区间,每个区间中设置均分的进度,所以用普通的ProgressBar、SeekBar是无法实现的,所以必须自定义View,使用画笔画。
1、画线
我的思路就是先画一条灰色的虚线,让后,画四个点,根据传入的当前的成长值,计算出在哪个区间,进而绘画出红色的线,并且设置实心的红点的点
package com.wj.progressbardemo;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import java.util.ArrayList;
import java.util.List;
/**
* 成长值进度条
*/
public class GrowthValueProgress extends View {
private MyCallback callback;
private Context context;
private int currentValues = 1100;//当前成长值
private int v0Values = 0;//v0会员成长值
private int v1Values = 100;//v1会员成长值
private int v2Values = 10000;//v2会员成长值
private int v3Values = 40000;//v3会员成长值
private int v4Values = 80000;//v4会员成长值
private Paint paint;//会员画笔
private Paint grayPaint;
private Paint pointPaint1;
private Paint pointPaint2;
private Paint pointPaint3;
private Paint pointPaint4;
private int lineHeight = 8;//线的高度
private int pointSize = 8;//圆心的半径
private int offsetX = 0;//x的坐标;
private int width;
private int hight;
private List<Paint> paintList;
public GrowthValueProgress(Context context) {
super(context);
this.context = context;
initPaint();
}
public GrowthValueProgress(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
initPaint();
}
public GrowthValueProgress(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context = context;
initPaint();
}
public int getCurrentValues() {
return currentValues;
}
public void setCurrentValues(int currentValues) {
this.currentValues = currentValues;
}
private void initPaint() {
lineHeight=hight/2;//线的高度设置为布局的一半高度
pointSize=