自定义view节点进度条

 

效果先看看

1.话不多就喜欢上代码（直接上自定义view代码）

package cn.kaitong.com.module.acceptcheck.activity; import android.app.Activity; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Rect; import android.util.AttributeSet; import android.util.Log; import android.view.MotionEvent; import android.view.View; import android.widget.Toast; import java.util.ArrayList; import java.util.List; import cn.kaitong.com.module.acceptcheck.utils.SizeUtils; public class Jiedian extends View { /** * 背景画笔 */ private Paint bgPaint; /** * 前景画笔 */ private Paint forePaint; /** * 选中画笔 */ private Paint selectPaint; /** * 未选中画笔 */ private Paint unselectPaint; /** * 背景颜色 */ private int bgColor = Color.parseColor("#CCCCCC"); /** * 前景颜色 */ private int foreColor = Color.parseColor("#009587"); /** * 默认高度 */ private int defaultHeight; /** * 节点文字 */ private List<String> nodeList; private List<Rect> mBounds; /** * 节点圆的半径 */ private int radius; /** * 文字和节点进度条的top */ private int marginTop; /** * 两个节点之间的距离 */ private int dividWidth; /** * 选中位置 */ private int selectIndex; public Jiedian(Context context, AttributeSet attrs) { super(context,attrs); init(context); } private void init(Context context) { radius = SizeUtils.dp2px(context,8); defaultHeight = SizeUtils.dp2px(context,30); marginTop = SizeUtils.dp2px(context,10); bgPaint = new Paint(Paint.ANTI_ALIAS_FLAG); bgPaint.setColor(bgColor); bgPaint.setStyle(Paint.Style.FILL); forePaint = new Paint(Paint.ANTI_ALIAS_FLAG); forePaint.setColor(foreColor); forePaint.setStyle(Paint.Style.FILL); unselectPaint = new Paint(Paint.ANTI_ALIAS_FLAG); unselectPaint.setColor(bgColor); unselectPaint.setTextSize(SizeUtils.sp2px(context,10)); selectPaint = new Paint(Paint.ANTI_ALIAS_FLAG); selectPaint.setColor(foreColor); selectPaint.setTextSize(SizeUtils.sp2px(context,10)); } /** * 设置数据 * @param nodeDatas */ public void setNodeList(List<String> nodeDatas){ if(nodeDatas != null){ nodeList = nodeDatas; } //测量文字所占用的空间 measureText(); } /** * 设置选中位置 * @param selectIndex */ public void setSelectIndex(int selectIndex){ this.selectIndex = selectIndex; invalidate(); } /** * 测量文字的长宽 */ private void measureText(){ mBounds = new ArrayList<>(); for (int i = 0; i < nodeList.size(); i++) { Rect mBound = new Rect(); unselectPaint.getTextBounds(nodeList.get(i),0,nodeList.get(i).length(),mBound); mBounds.add(mBound); } } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if(nodeList == null || nodeList.isEmpty()){ return; } bgPaint.setStrokeWidth(radius/3); //绘制灰色的背景线条 canvas.drawLine(radius,getHeight()/2,getWidth()-radius,getHeight()/2,bgPaint); //画节点圆 //每个圆相隔的距离 dividWidth = (getWidth()-radius*2)/(nodeList.size() - 1); forePaint.setStrokeWidth(radius/2); for (int i=0; i < nodeList.size();i++) { if (i==selectIndex){ canvas.drawCircle(radius+ i * dividWidth, getHeight()/2, radius , forePaint); }else { canvas.drawCircle(radius + i * dividWidth, getHeight()/2, radius, bgPaint); } } for (int i=0; i<nodeList.size();i++){ int currentTextWidth=mBounds.get(i).width(); if (i==0){ if (i==selectIndex){ canvas.drawText(nodeList.get(i), radius-currentTextWidth/2, getHeight()/2-mBounds.get(i).height()/2-radius, selectPaint); }else { canvas.drawText(nodeList.get(i), radius-currentTextWidth/2, getHeight()/2-mBounds.get(i).height()/2-radius, unselectPaint); } }else if (i==nodeList.size()-1){ if (i==selectIndex){ canvas.drawText(nodeList.get(i), getWidth()-radius-currentTextWidth/2, getHeight()/2-mBounds.get(i).height()/2-radius, selectPaint); }else { canvas.drawText(nodeList.get(i), getWidth()-radius-currentTextWidth/2, getHeight()/2-mBounds.get(i).height()/2-radius , unselectPaint); } }else { if (i==selectIndex){ canvas.drawText(nodeList.get(i), radius + i * dividWidth - currentTextWidth / 2, getHeight()/2-mBounds.get(i).height()/2-radius , selectPaint); }else { canvas.drawText(nodeList.get(i), radius + i * dividWidth - currentTextWidth / 2, getHeight()/2-mBounds.get(i).height()/2-radius , unselectPaint); } } } } @Override public boolean onTouchEvent(MotionEvent event) { float eventX; float eventY; int i = event.getAction(); Log.e("onTouchEvent1", String.valueOf(i)); if (i == MotionEvent.ACTION_DOWN) { Log.e("onTouchEvent", "ACTION_DOWN"); } else if (i == MotionEvent.ACTION_MOVE) { Log.e("onTouchEvent", "ACTION_MOVE"); } else if (i == MotionEvent.ACTION_UP) { Log.e("onTouchEvent", "ACTION_UP"); eventX = event.getX(); eventY = event.getY(); float select = eventX / dividWidth; //计算选中的index float xs = select - (int) (select); selectIndex = (int) select + (xs > 0.5 ? 1 : 0); onClickListener.onCircleClick(selectIndex); } invalidate(); return true; } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec); int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec); int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec); int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec); if(widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST){//宽高都设置为wrap_content setMeasuredDimension(widthSpecSize,defaultHeight); }else if(widthSpecMode == MeasureSpec.AT_MOST){//宽设置为wrap_content setMeasuredDimension(widthSpecSize,heightSpecSize); }else if(heightSpecMode == MeasureSpec.AT_MOST){//高设置为wrap_content setMeasuredDimension(widthSpecSize, defaultHeight); }else{//宽高都设置为match_parenth或具体的dp值 setMeasuredDimension(widthSpecSize, heightSpecSize); } } private OnClickListener onClickListener; public void setOnClickListener(OnClickListener onClickListener){ this.onClickListener=onClickListener; } public interface OnClickListener{ void onCircleClick(int postion); } }

2.调用的时候非常简单

ls_shape.setNodeList(itmes);//设置文字集合 ls_shape.setSelectIndex(0);//设置默认小蓝点在哪里 //条目点击事件监听 ls_shape.setOnClickListener(new Jiedian.OnClickListener() { @Override public void onCircleClick(int postion) { preid = prejictcontent.get(postion).getId(); //toast(itmes.get(postion) + "我是ID：" + preid); Log.e("我是id", preid +""); } });