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的代码行数不多，也很容易看懂，直接拿走代码即可在项目中食用啦。

由于不同项目设计稿会有不同，这里也仅仅给有需要的同学一个思路，可以改造具体实现代码~

谢谢阅读到这里的同学~欢迎与我讨论和交流

前言

真机效果图

自定义View完整代码

注意点

总结

更多相关文章

随机推荐