Android自定义View(五)仿微信开关按钮SwitchBu

ezgif-5-b6edd22516.gif

1.写一个类名为SwitchButton继承View
2.在attrs文件里设置参数

    <declare-styleable name="SwitchButton">
        <attr name="unselectedBg"/>
        <attr name="selectedBg"/>
        <attr name="circle2Bgmargin"/>
        <attr name="switchState"/>
    </declare-styleable>
    
    <attr name="unselectedBg" format="color"></attr>
    <attr name="selectedBg" format="color"></attr>
    <attr name="circle2Bgmargin" format="dimension"></attr>
    <attr name="switchState" format="enum">
        <enum name="open" value="2"/>
        <enum name="close" value="1"/>
    </attr>

    <com.chinamall21.mobile.animstudy.view.SwitchButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:switchState="close"
        app:circle2Bgmargin="3dp"
        app:selectedBg="#11bf40"
        app:unselectedBg="#46636262">

    </com.chinamall21.mobile.animstudy.view.SwitchButton>

3.圆的位置为高度的一半,而高为宽度的一半,完整代码:

public class SwitchButton extends View {
    //选中的背景颜色
    private int mSelectBg;
    //未选中的背景颜色
    private int mUnSelectBg;
    //当前的状态
    private int mState;
    //圆圈与背景的间距
    private int mCircleMargin;
    //画笔
    private Paint mPaint;
    //默认的宽度
    private int mDefaultWidth = 240;
    //圆弧半径
    private int mDefaultRx = 100;
    //打开
    public static final int OPEN = 2;
    //关闭
    public static final int CLOSE = 1;
    private int mCurrstate;

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

    public SwitchButton(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.SwitchButton);
        mSelectBg = ta.getColor(R.styleable.SwitchButton_selectedBg, Color.GREEN);
        mUnSelectBg = ta.getColor(R.styleable.SwitchButton_unselectedBg, Color.GRAY);
        mState = ta.getInt(R.styleable.SwitchButton_switchState, 2);
        mCircleMargin = (int) ta.getDimension(R.styleable.SwitchButton_circle2Bgmargin, 10);
        ta.recycle();
        mCurrstate = mState;
        init();
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if(mCurrstate == CLOSE){
                    mCurrstate = OPEN;
                }else {
                    mCurrstate = CLOSE;
                }
                invalidate();
            }
        });
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int width = 0;
        if (widthMode == MeasureSpec.EXACTLY) {
            width = widthSize;
        } else {
            width = mDefaultWidth;
        }

        setMeasuredDimension(width, width / 2);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if(mCurrstate == CLOSE){
            drawClose(canvas);
        }else {
            drawOpen(canvas);
        }
    }

    private void drawOpen(Canvas canvas) {
        mPaint.setColor(mSelectBg);
        //画背景
        RectF rectF = new RectF(0, 0, getWidth(), getWidth() / 2);
        canvas.drawRoundRect(rectF, mDefaultRx, mDefaultRx, mPaint);
        //画圆
        mPaint.setColor(Color.WHITE);
        canvas.drawCircle(mDefaultWidth *3 / 4, mDefaultWidth / 4, mDefaultWidth / 4 - mCircleMargin, mPaint);
    }

    private void drawClose(Canvas canvas) {
        mPaint.setColor(mUnSelectBg);
        //画背景
        RectF rectF = new RectF(0, 0, getWidth(), getWidth() / 2);
        canvas.drawRoundRect(rectF, mDefaultRx, mDefaultRx, mPaint);
        //画圆
        mPaint.setColor(Color.WHITE);
        canvas.drawCircle(mDefaultWidth / 4, mDefaultWidth / 4, mDefaultWidth / 4 - mCircleMargin, mPaint);

    }

}

4.重点在于根据开关的状态来确认背景的颜色和圆所在的位置,抓住这点实现起来就很容易了