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

需求:

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

要达到的效果

笔记20170530--自定义一个显示步骤的View(android)_第1张图片
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

你可能感兴趣的:(笔记20170530--自定义一个显示步骤的View(android))