Android 自定义View—清爽小巧灵活的多节点进度条
一款小巧清爽、灵活、开箱即用的多节点进度条，不进来看看吗？
前言
最近项目有一个节点进度条的小需求，完成后，想分享出来希望可以帮到有需要的同学。
真机效果图
自定义View完整代码
开箱即用~，注释已经炒鸡详细了
/** * @description: 节点进度条 * @author: DMingO * @date: 2020/4/15 */public class PointProcessBar extends View { /** * 未选中时的连线画笔 */ private Paint mLinePaint; /** * 选中时的连线画笔 */ private Paint mLineSelectedPaint; /** * 未选中时的文字画笔 */ private Paint mTextPaint; /** * 选中时的文字画笔 */ private Paint mTextSelPaint; /** * 未选中时的实心圆画笔 */ private Paint mCirclePaint; /** * 选中时的内部实心圆画笔 */ private Paint mCircleSelPaint; /** * 选中时的边框圆画笔 */ private Paint mCircleStrokeSelPaint; /** * 未选中时的线，节点圆的颜色 */ private int mColorUnselected = Color.parseColor("#1ca8b0d9"); /** * 选中时的颜色 */ private int mColorSelected = Color.parseColor("#61A4E4"); /** * 未选中的文字颜色 */ private int mColorTextUnselected = Color.parseColor("#5c030f09"); /** * 绘制的节点个数，由底部节点标题数量控制 */ int circleCount ; /** * 连线的高度 */ float mLineHeight = 7f; //圆的直径 float mCircleHeight = 50f; float mCircleSelStroke = 8f; float mCircleFillRadius = 15f; //文字大小 float mTextSize = 35f; //文字离顶部的距离 float mMarginTop = 40f; /** * 首个圆向中心偏移的距离 */ float marginLeft = 30f; /** * 最后一个圆向中心偏移的距离 */ float marginRight = marginLeft; /** * 每个节点相隔的距离 */ float divideWidth; int defaultHeight; /** * 节点底部的文字列表 */ List<String> textList = new ArrayList<>(); /** * 文字同宽高的矩形，用来测量文字 */ List<Rect> mBounds; /** * 存储每个圆心在同一直线上的节点圆的 x 坐标值 */ List<Float> circleLineJunctions = new ArrayList<>(); /** * 选中项集合 */ Set<Integer> selectedIndexSet = new HashSet<>(); public PointProcessBar(Context context) { super(context); } public PointProcessBar(Context context, @Nullable AttributeSet attrs) { super(context, attrs); initPaint(); } public PointProcessBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } public PointProcessBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); } /** * 初始化画笔属性 */ private void initPaint(){ mLinePaint = new Paint(); mLineSelectedPaint = new Paint(); mCirclePaint = new Paint(); mTextPaint = new Paint(); mCircleStrokeSelPaint = new Paint(); mTextSelPaint=new Paint(); mCircleSelPaint = new Paint(); mLinePaint.setColor(mColorDef); //设置填充 mLinePaint.setStyle(Paint.Style.FILL); //笔宽像素 mLinePaint.setStrokeWidth(mLineHeight); //锯齿不显示 mLinePaint.setAntiAlias(true); mLineSelectedPaint.setColor(mColorSelected); mLineSelectedPaint.setStyle(Paint.Style.FILL); mLineSelectedPaint.setStrokeWidth(mLineHeight); mLineSelectedPaint.setAntiAlias(true); mCirclePaint.setColor(mColorDef); //设置填充 mCirclePaint.setStyle(Paint.Style.FILL); //笔宽像素 mCirclePaint.setStrokeWidth(1); //锯齿不显示 mCirclePaint.setAntiAlias(true); //选中时外框空心圆圈画笔 mCircleStrokeSelPaint.setColor(mColorSelected); mCircleStrokeSelPaint.setStyle(Paint.Style.STROKE); mCircleStrokeSelPaint.setStrokeWidth(mCircleSelStroke); mCircleStrokeSelPaint.setAntiAlias(true); //选中时的内部填充圆画笔 mCircleSelPaint.setStyle(Paint.Style.FILL); mCircleSelPaint.setStrokeWidth(1); mCircleSelPaint.setAntiAlias(true); mCircleSelPaint.setColor(mColorSelected); //普通状态的文本 画笔 mTextPaint.setTextSize(mTextSize); mTextPaint.setColor(mColorTextDef); mTextPaint.setAntiAlias(true); mTextPaint.setTextAlign(Paint.Align.CENTER); //选中后的文本画笔 mTextSelPaint.setTextSize(mTextSize); mTextSelPaint.setColor(mColorSelected); mTextSelPaint.setAntiAlias(true); mTextSelPaint.setTextAlign(Paint.Align.CENTER); } /** * 测量文字的长宽，将文字视为rect矩形 */ private void measureText(){ mBounds = new ArrayList<>(); for(String name : textList){ Rect mBound = new Rect(); mTextPaint.getTextBounds(name, 0, name.length(), mBound); mBounds.add(mBound); } } /** * 测量view的高度 */ private void measureHeight(){ if (mBounds!=null && mBounds.size()!=0) { defaultHeight = (int) (mCircleHeight + mMarginTop + mCircleSelStroke + mBounds.get(0).height()/2); } else { defaultHeight = (int) (mCircleHeight + mMarginTop+mCircleSelStroke); } } @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); //宽高都设置为wrap_content if(widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST){ //宽设置为wrap_content setMeasuredDimension(widthSpecSize,defaultHeight); }else if(widthSpecMode == MeasureSpec.AT_MOST){ setMeasuredDimension(widthSpecSize,heightSpecSize); }else if(heightSpecMode == MeasureSpec.AT_MOST){ //高设置为wrap_content setMeasuredDimension(widthSpecSize, defaultHeight); }else{ //宽高都设置为match_parent或具体的dp值 setMeasuredDimension(widthSpecSize, heightSpecSize); } } @Override protected void onDraw(Canvas canvas) { //若未设置节点标题或者选中项的列表，则取消绘制 if (textList == null || textList.isEmpty() || selectedIndexSet == null || selectedIndexSet.isEmpty() || mBounds == null || mBounds.isEmpty()) { return; } //画灰色圆圈的个数 circleCount=textList.size(); //每个圆相隔的距离（重要），可以通过这个调节节点间距 divideWidth = (getWidth() - mCircleHeight ) / (circleCount - 1); //绘制文字和圆形 for (int i=0; i < circleCount ;i++){ float cx; float cy; float textX; if (i==0){ //第一个节点，圆心需要向右偏移 cx = mCircleHeight / 2 + i * divideWidth + marginLeft; cy = mCircleHeight / 2 + mCircleSelStroke; textX = cx; circleLineJunctions.add(cx + mCircleHeight / 2); }else if (i==textList.size()-1){ //最后一个节点，圆心需要向左偏移 cx = mCircleHeight / 2 + i * divideWidth - marginRight; cy = mCircleHeight / 2 + mCircleSelStroke; textX = cx; circleLineJunctions.add(cx - mCircleHeight / 2); }else { //中间部分的节点 cx = mCircleHeight / 2 + i * divideWidth; cy = mCircleHeight / 2+mCircleSelStroke; textX = cx; circleLineJunctions.add(cx - mCircleHeight / 2); circleLineJunctions.add(cx + mCircleHeight / 2); } if (getSelectedIndexSet().contains(i)){ //若当前位置节点被包含在选中项Set中，判定此节点被选中 canvas.drawCircle(cx , cy, mCircleHeight / 2, mCircleStrokeSelPaint); canvas.drawCircle(cx, cy, mCircleFillRadius, mCircleSelPaint); canvas.drawText(textList.get(i), textX, (float) (mCircleHeight + mMarginTop +mCircleSelStroke+mBounds.get(i).height()/2.0), mTextSelPaint); }else { //若当前位置节点没有被包含在选中项Set中，判定此节点没有被选中 canvas.drawCircle(cx , cy, mCircleHeight / 2, mCirclePaint); canvas.drawText(textList.get(i), textX, (float) (mCircleHeight + mMarginTop +mCircleSelStroke+mBounds.get(i).height()/2.0), mTextPaint); } } for(int i = 1 , j = 1 ; j <= circleLineJunctions.size() && ! circleLineJunctions.isEmpty() ; ++i , j=j+2){ if(getSelectedIndexSet().contains(i)){ canvas.drawLine(circleLineJunctions.get(j-1),mCircleHeight/2+mCircleSelStroke, circleLineJunctions.get(j) ,mCircleHeight/2+mCircleSelStroke,mLineSelectedPaint); }else { canvas.drawLine(circleLineJunctions.get(j-1),mCircleHeight/2+mCircleSelStroke, circleLineJunctions.get(j) ,mCircleHeight/2+mCircleSelStroke,mLinePaint); } } } /** * 供外部调用，显示控件 * @param titles 底部标题内容列表 * @param indexSet 选中项Set */ public void show(List<String> titles , Set<Integer> indexSet){ if(titles != null && ! titles.isEmpty()){ this.textList = titles; } if(indexSet != null && ! indexSet.isEmpty()){ this.selectedIndexSet = indexSet; } measureText(); measureHeight(); //绘制 invalidate(); } /** * 更新底部节点标题内容 * @param textList 节点标题内容列表 */ public void refreshTextList(List<String> textList) { this.textList = textList; measureText(); measureHeight(); invalidate(); } /** * 获取节点选中状态 * @return 节点选中状态列表 */ public Set<Integer> getSelectedIndexSet() { return selectedIndexSet; } /** * 更新选中项 * @param set 选中项Set */ public void refreshSelectedIndexSet(Set<Integer> set) { this.selectedIndexSet = set; invalidate(); }}注意点
- 控件的节点总个数是与传入的节点底部标题列表中元素个数控制（相同）的，简而言之就是传入的标题列表中有多少个标题，节点就会绘制多少个
- 控件通过show方法进行View的初始化和显示内容，传入节点标题列表和节点选中项集合，控制View的选中状态和显示的内容
- 控件初始化显示后，可以通过refreshTextList(),refreshSelectedIndexSet() 更新标题和选中项
- 具体不同的颜色，大小可以具体在View中调整
总结
可以看到效果不复杂，因此自定义View的代码行数不多，也很容易看懂，直接拿走代码即可在项目中食用啦。
由于不同项目设计稿会有不同，这里也仅仅给有需要的同学一个思路，可以改造具体实现代码~
谢谢阅读到这里的同学~欢迎与我讨论和交流
没有评论:
发表评论