自定义view————流程位置

发表于 | 分类于 | 阅读次数

自定义view————流程位置

名字真不知道起什么名字，上效果图把，原谅我的词穷（最近在弄weex混合开发，头都大了，有兴趣的可以去研究，有问题一起交流）

效果图

这是这么样效果，在实际项目运用到了，想想要是UI给icon多浪费资源呀，干脆自己上手写个自定义view来解决

思路分析

看效果图就是几个实心圆，几个空心圆花在一条线上，其中要考虑圆的大小，圆间距。根据这些计算第一个画圆的开始位置

开始位置的计算：

float statrx = (mwidth - DisplayUtil.dip2px(mcontext, 20) * size) / 2;

开始x=(宽-(实心圆+空心圆)*每一个圆的宽度)/2;计算出开始的x，画圆从圆心开始，得再把圆半径加上

float x=statrx+DisplayUtil.dip2px(mcontext, 20)*i+DisplayUtil.dip2px(mcontext, 3.5f);

每一个圆的位置x=开始x+圆宽*个数（0开始）+半径

开始画圆

分析的思路大致就能在onDraw开始画了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //先计算总量 每一个20
    int size = solidnum + hollownum;
    if (size > 0) {
        float statrx = (mwidth - DisplayUtil.dip2px(mcontext, 20) * size) / 2;
        float y=mheight/2;
        for(int i=0;i<size;i++){
            float x=statrx+DisplayUtil.dip2px(mcontext, 20)*i+DisplayUtil.dip2px(mcontext, 3.5f);
            //画实心
            if(i<solidnum){
                canvas.drawCircle(x,y,radius,solidPaint);
                //画空心
            }else {
                canvas.drawCircle(x,y,radius,hollowPaint);
            }
        }
    }
}

圆画好了就是一些自定义属性添加：实心圆个数、空心圆个数、圆颜色

自定义属性

xml中添加

attrs.xml

1
2
3
4
5
<!--//select-->
<declare-styleable name="SelectView">
    <attr name="solidnum" format="integer"/>
    <attr name="hollownum" format="integer"/>
</declare-styleable>

代码中获取

1
2
3
4
5
6
private void initType(Context context,AttributeSet attrs){
    TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.SelectView);
    solidnum=typedArray.getInteger(R.styleable.SelectView_solidnum,0);
    hollownum=typedArray.getInteger(R.styleable.SelectView_hollownum,0);
    typedArray.recycle();
}

颜色也是一样添加，可以自行添加

java代码添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/***
 *
 * @param solidnum 实心
 * @param hollownum  空心
 */
public void setSelect(int solidnum, int hollownum) {
    this.solidnum = solidnum;
    this.hollownum = hollownum;
    invalidate();
}
/**
 * 支持设置颜色
 * @param red
 * @param green
 * @param blue
 */
public void setColor(int red, int green, int blue){
    solidPaint.setColor(Color.rgb(red,green,blue));
    hollowPaint.setColor(Color.rgb(red,green,blue));
    invalidate();
}

完整自定义view代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
package com.selectview;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
/**
 * Created by wujun on 2017/9/13.
 * 7个选择点
 *
 * @author madreain
 * @desc
 */
public class SelectView extends View {
    //实心
    Paint solidPaint;
    //空心
    Paint hollowPaint;
    private int solidnum;
    private int hollownum;
    //宽高
    int mwidth, mheight;
    float radius;
    Context mcontext;
    public SelectView(Context context) {
        super(context);
        mcontext = context;
        init(context);
    }
    public SelectView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mcontext = context;
        initType(context,attrs);
        init(context);
    }
    public SelectView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mcontext = context;
        initType(context,attrs);
        init(context);
    }
    private void initType(Context context,AttributeSet attrs){
        TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.SelectView);
        solidnum=typedArray.getInteger(R.styleable.SelectView_solidnum,0);
        hollownum=typedArray.getInteger(R.styleable.SelectView_hollownum,0);
        typedArray.recycle();
    }
    private void init(Context context) {
        solidPaint = new Paint();
        solidPaint.setAntiAlias(true);
        solidPaint.setColor(Color.rgb(50,193,164));
        solidPaint.setStyle(Paint.Style.FILL);
        hollowPaint = new Paint();
        hollowPaint.setAntiAlias(true);
        hollowPaint.setColor(Color.rgb(50,193,164));
        hollowPaint.setStyle(Paint.Style.STROKE);
        radius = DisplayUtil.dip2px(context, 3.5f);
    }
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //宽高
        mwidth = w;
        mheight = h;
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //先计算总量 每一个20
        int size = solidnum + hollownum;
        if (size > 0) {
            float statrx = (mwidth - DisplayUtil.dip2px(mcontext, 20) * size) / 2;
            float y=mheight/2;
            for(int i=0;i<size;i++){
                float x=statrx+DisplayUtil.dip2px(mcontext, 20)*i+DisplayUtil.dip2px(mcontext, 3.5f);
                //画实心
                if(i<solidnum){
                    canvas.drawCircle(x,y,radius,solidPaint);
                    //画空心
                }else {
                    canvas.drawCircle(x,y,radius,hollowPaint);
                }
            }
        }
    }
    /***
     *
     * @param solidnum 实心
     * @param hollownum  空心
     */
    public void setSelect(int solidnum, int hollownum) {
        this.solidnum = solidnum;
        this.hollownum = hollownum;
        invalidate();
    }
    /**
     * 支持设置颜色
     * @param red
     * @param green
     * @param blue
     */
    public void setColor(int red, int green, int blue){
        solidPaint.setColor(Color.rgb(red,green,blue));
        hollowPaint.setColor(Color.rgb(red,green,blue));
        invalidate();
    }
}

项目中使用

xml布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.selectview.MainActivity">
    <com.selectview.SelectView
        android:id="@+id/selectView1"
        android:layout_width="match_parent"
        android:layout_height="29dp"
        app:hollownum="6"
        app:solidnum="1" />
    <com.selectview.SelectView
        android:id="@+id/selectView2"
        android:layout_width="match_parent"
        android:layout_height="29dp"
        app:hollownum="6"
        app:solidnum="1" />
    <com.selectview.SelectView
        android:id="@+id/selectView3"
        android:layout_width="match_parent"
        android:layout_height="29dp"
        app:hollownum="3"
        app:solidnum="1" />
</LinearLayout>

代码中设置

1
2
3
4
selectView2.setColor(0,100,0);
selectView2.setSelect(3,4);
selectView3.setColor(220,20,60);

SelectView github demo地址

坚持原创技术分享，您的支持将鼓励我继续创作！
Fork me on GitHub