笔记20170530--自定义一个显示步骤的View（android）

需求：

进行到某一步时的步骤提示view（这个笔记主要记录用自定义view的方式完成）

要达到的效果

demo.png

就是根据步骤，相应的字和背景条变颜色

相关代码：

attrs.xml属性配置：

NextView代码：

package w.k.w.demonextview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by Hello我的World on 2017/5/29.
 */

public class NextView extends View {

    private String numberTextOne;//第一步圆圈的数字
    private String numberTextTwo;//第二步圆圈的数字
    private String numberTextThree;//第三步圆圈的数字
    private String bottomTextOne;//第一步圆圈下边的数字
    private String bottomTextThree;//第二步圆圈下边的数字
    private String bottomTextTwo;//第三步圆圈下边的数字
    private float bottomTextSize;//圆圈下边数字的大小
    private int bgSelectColor;//完成时的颜色
    private int bgUnSelectColor;//未完成时的颜色

    private Paint paint; //画笔
    private Rect numTextRect;//绘制文字时背景的框
    private float sCircleX;//第二个圆的x坐标
    private float sCircleY;//第二个圆的y坐标
    private float fCircleX;//第一个圆的x坐标
    private float fCircleY;//第一个圆的y坐标
    private float lCircleX;//最后一个圆的x坐标
    private float lCircleY;//最后一个圆的y坐标
    private float circleRadius;//圆的半径
    private RectF fistLine;//第一个用作当线的矩形
    private RectF secondLine;//第二个用作当线的矩形
    private RectF thirdLine;//第三个用做当线的矩形
    private RectF lastLine;//最后一个用做当线的矩形

    private int stepIndex;//步骤的下标

    public NextView(Context context) {
        this(context, null);
    }

    public NextView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public NextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //获取属性
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.NextView, defStyleAttr, 0);

        int n = a.getIndexCount();
        for(int i=0;i

activity_main.xml:

MainActivity.java:

package w.k.w.demonextview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {
    NextView nextView;
    Button firstButton,secondButton,lastButton;
    ButtonOnClickListener listener;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        nextView = (NextView) findViewById(R.id.nextView);
        firstButton = (Button) findViewById(R.id.firstButton);
        secondButton = (Button) findViewById(R.id.secondButton);
        lastButton = (Button) findViewById(R.id.lastButton);
        listener = new ButtonOnClickListener();
        firstButton.setOnClickListener(listener);
        secondButton.setOnClickListener(listener);
        lastButton.setOnClickListener(listener);
    }

    class ButtonOnClickListener implements View.OnClickListener{

        @Override
        public void onClick(View v) {
            switch (v.getId()){
                case R.id.firstButton:
                    nextView.setStepColor(1);
                    break;
                case R.id.secondButton:
                    nextView.setStepColor(2);
                    break;
                case R.id.lastButton:
                    nextView.setStepColor(3);
                    break;
            }
        }
    }
}

实现思路：

• 想清楚必要条件，3个圆圈，圆圈上有字，四根线，每个圆圈下边有字
• 将必要条件都写到attrs.xml里：第一个圆圈里的数字，第二个圆圈里的数字，第三个圆圈里的数字，第一个圆圈下边的字，第二个圆圈下边的字，第三个圆圈下边的字，圆圈下边字的大小，选中这一步时的背景色，未选中时的背景色
• 自定义view，attrs里的属性每个要对应一个变量，然后其他相关变量
• 构造方法中，获取属性并初始化画笔和当作字背景的矩形对象
• onDraw方法中先画中间的圆圈，然后根据中间的圆圈画其他的东西
• setStepColor方法，参数是步骤下标，每次执行此方法时重绘
• 在Activity中调用此View即可

BTW:此笔记里的NextView不支持wrap_content