自定义View01-自定义开关-继承View

自定义View的流程

完全继承View

1,创建一个类继承View，重写三个构造方法

三个构造方法分别表示：

用于代码创建控件
用于在xml中使用控件，可指定属性
也是用于在xml中使用控件，可以指定属性，如果指定过了样式则走此构造方法

public class ToggleView extends View {

    /**
     * 用于代码创建控件
     * @param context
     */
    public ToggleView(Context context) {
        super(context);
    }

    /**
     * 用于在xml中使用控件，可指定属性
     * @param context
     * @param attrs
     */
    public ToggleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * 也是用于在xml中使用控件，可以指定属性，如果指定过了样式则走此构造方法
     * @param context
     * @param attrs
     * @param defStyleAttr
     */
    public ToggleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

2,在xml中使用ToggleView，并按照需求给ToggleView添加相应的方法

public class ToggleView extends View {

    /**
     * 用于代码创建控件
     * @param context
     */
    public ToggleView(Context context) {
        super(context);
    }

    /**
     * 用于在xml中使用控件，可指定属性
     * @param context
     * @param attrs
     */
    public ToggleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * 也是用于在xml中使用控件，可以指定属性，如果指定过了样式则走此构造方法
     * @param context
     * @param attrs
     * @param defStyleAttr
     */
    public ToggleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setSwitchBackgroundResource(int switchBackground) {
        
    }

    public void setSlideButtonResource(int slideButton) {
        
    }

    public void setSwitchState(boolean state) {
        
    }
}

Android中View的绘制流程

View的绘制流程

/**
 * 自定义ToggleView 完全继承View
 *
 * Android中View的绘制流程
 *
 * 测量                   摆放                绘制
 * measure     ->        layout       ->     draw
 *    \                     \                  \
 *
 * onMeasure               onLayout           onDraw  重写这些方法实现自定义控件
 *这些方法都是在onResume()之后执行的
 * View
 * onMeasure(在这个方法指定自己的宽高)   ->  onDraw(在这个方法绘制自己的内容)
 *
 * ViewGroup
 * onMeasure(在这个方法指定自己的宽高和所有子View的快高)   ->  onLayout(摆放所有子View)  ->  onDraw(在这个方法绘制自己的内容)
 *
 *
 */

2.1,在ToggleView中实现设置背景的方法

    /**
     * 设置背景图片
     * @param switchBackground
     */
    public void setSwitchBackgroundResource(int switchBackground) {
        switchBackgroupBitmap = BitmapFactory.decodeResource(getResources(), switchBackground);
    }

    /**
     * 设置滑块背景图片
     * @param slideButton
     */
    public void setSlideButtonResource(int slideButton) {
        slideButtonBitmap = BitmapFactory.decodeResource(getResources(), slideButton);
    }

3,在ToggleView中重写onMeasure方法

注意，如果不重写该方法，父容器建议的宽高，会使view占满屏幕

在onMeasure中设置View的宽高就是背景图片的宽高

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(switchBackgroupBitmap.getWidth(),switchBackgroupBitmap.getHeight());
    }

设置宽高之后的效果：

4,在ToggleView中重写onDraw方法，绘制背景等

    /**
     * 绘制方法
     * @param canvas ：画布，在上面绘制的内容都会显示在界面上
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 1,绘制背景
        canvas.drawBitmap(switchBackgroupBitmap,0,0,paint);
    }

绘制背景效果：

解读canvas.drawBitmap(switchBackgroupBitmap,left,top,paint);
left ,top是当前控件左上角的坐标，如图：

image.png

4.1,绘制滑块

1，写死的状态：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 1,绘制背景
        //left top是当前控件的左上角的坐标
        canvas.drawBitmap(switchBackgroupBitmap,0,0,paint);

        //2,绘制滑块
        canvas.drawBitmap(slideButtonBitmap,0,0,paint);
    }

不能写死，根据开关的状态来绘制滑块

计算滑块开启状态的left坐标位置原理
top = 0;
left = 背景宽度 - 滑块宽度

计算滑块开启状态的left坐标位置原理图

绘制滑块开关的状态位置：

    /**
     * 绘制方法
     * @param canvas ：画布，在上面绘制的内容都会显示在界面上
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 1,绘制背景
        //left top是当前控件的左上角的坐标
        canvas.drawBitmap(switchBackgroupBitmap,0,0,paint);

        //2,绘制滑块
        if (mSwitchState) {  //开启状态 left = 背景宽度 - 滑块宽度,  top = 0
            int newLeft = switchBackgroupBitmap.getWidth() - slideButtonBitmap.getWidth();
            canvas.drawBitmap(slideButtonBitmap,newLeft,0,paint);
        } else {            //关闭状态 left = 0, top = 0
            canvas.drawBitmap(slideButtonBitmap,0,0,paint);
        }
    }

开启时效果：

5,相应用户触摸事件，重写onTouchEvent方法

在触摸事件后调用invalidate()方法，它会导致onDraw()方法被调用，界面会更新

    boolean isTouchMode = false;//默认不是滑动状态

    /**
     * 重写触摸事件相应用户触摸
     *
     * @param event
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                isTouchMode = true;//按下的时候设置为TRUE
                printLog("event:ACTION_DOWN " + event.getX());
                currentX = event.getX();
                break;
            case MotionEvent.ACTION_MOVE:
                printLog("event:ACTION_MOVE " + event.getX());
                currentX = event.getX();

                // TODO: 2019/5/17 目的 在 ACTION_MOVE中根据currentX值绘制滑块的位置

                break;
            case MotionEvent.ACTION_UP:
                isTouchMode = false;//松开的时候设置为FALSE
                printLog("event:ACTION_UP " + event.getX());
                currentX = event.getX();
                break;
            default:
                break;
        }

        //重绘界面
        invalidate();//会导致onDraw()被调用，界面会更新
//        return super.onTouchEvent(event); //默认不消费触摸事件
        return true;//消费了触摸事件
    }

绘制滑块两个点：1，触摸的时候根据currentX绘制滑块
2，非触摸的时候根据开关状态的Boolean值绘制滑块

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 1,绘制背景
        //left top是当前控件的左上角的坐标
        canvas.drawBitmap(switchBackgroupBitmap, 0, 0, paint);

        //2,绘制滑块
        /**2019/5/17 绘制滑块两个点：1，触摸的时候根据currentX绘制滑块
         *                           2，非触摸的时候根据开关状态的Boolean值绘制滑块
         */

        if (isTouchMode) {//根据用户滑动的位置currentX绘制滑块
            float newLeft = (int) currentX;
            canvas.drawBitmap(slideButtonBitmap, newLeft, 0, paint);
        } else {          //根据开关状态的Boolean值绘制滑块

            if (mSwitchState) {  //开启状态 left = 背景宽度 - 滑块宽度,  top = 0
                int newLeft = switchBackgroupBitmap.getWidth() - slideButtonBitmap.getWidth();
                canvas.drawBitmap(slideButtonBitmap, newLeft, 0, paint);
            } else {            //关闭状态 left = 0, top = 0
                canvas.drawBitmap(slideButtonBitmap, 0, 0, paint);
            }
        }

基本流程走完：Demo地址：demo-bug

解决bug:

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 1,绘制背景
        //left top是当前控件的左上角的坐标
        canvas.drawBitmap(switchBackgroupBitmap, 0, 0, paint);

        //2,绘制滑块
        /**2019/5/17 绘制滑块两个点：1，触摸的时候根据currentX绘制滑块
         *                           2，非触摸的时候根据开关状态的Boolean值绘制滑块
         */

        if (isTouchMode) {//根据用户滑动的位置currentX绘制滑块
//            float newLeft = (int) currentX;
            // 让滑块向左移动自身一半大小的位置
            float newLeft = currentX - slideButtonBitmap.getWidth() / 2.0f;
            int maxLeft = switchBackgroupBitmap.getWidth() - slideButtonBitmap.getWidth();
            // 限定滑块范围
            if(newLeft < 0){
                newLeft = 0; // 左边范围
            }else if (newLeft > maxLeft) {
                newLeft = maxLeft; // 右边范围
            }
            canvas.drawBitmap(slideButtonBitmap, newLeft, 0, paint);

        } else {          //根据开关状态的Boolean值绘制滑块

            if (mSwitchState) {  //开启状态 left = 背景宽度 - 滑块宽度,  top = 0
                int newLeft = switchBackgroupBitmap.getWidth() - slideButtonBitmap.getWidth();
                canvas.drawBitmap(slideButtonBitmap, newLeft, 0, paint);
            } else {            //关闭状态 left = 0, top = 0
                canvas.drawBitmap(slideButtonBitmap, 0, 0, paint);
            }
        }
    }

    boolean isTouchMode = false;//默认不是滑动状态

    /**
     * 重写触摸事件相应用户触摸
     *
     * @param event
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                isTouchMode = true;//按下的时候设置为TRUE
                printLog("event:ACTION_DOWN " + event.getX());
                currentX = event.getX();
                break;
            case MotionEvent.ACTION_MOVE:
                printLog("event:ACTION_MOVE " + event.getX());
                currentX = event.getX();

                // TODO: 2019/5/17 目的 在 ACTION_MOVE中根据currentX值绘制滑块的位置

                break;
            case MotionEvent.ACTION_UP:
                isTouchMode = false;//松开的时候设置为FALSE
                printLog("event:ACTION_UP " + event.getX());
                currentX = event.getX();

                float center = switchBackgroupBitmap.getWidth() / 2.0f;
                // 根据当前按下的位置, 和控件中心的位置进行比较.
                boolean state = currentX > center;
                mSwitchState = state;
                break;
            default:
                break;
        }

        //重绘界面
        invalidate();//会导致onDraw()被调用，界面会更新

//        return super.onTouchEvent(event); //默认不消费触摸事件
        return true;//消费了触摸事件
    }

6,提供接口监听

接口回调三部曲：

    //回调接口
    public interface OnSwitchStateUpdateListener {
        // 状态回调, 把当前状态传出去
        void onStateUpdate(boolean state);
    }

    private OnSwitchStateUpdateListener mOnSwitchStateUpdateListener;

    public void setOnSwitchStateUpdateListener(OnSwitchStateUpdateListener onSwitchStateUpdateListener) {
        this.mOnSwitchStateUpdateListener = onSwitchStateUpdateListener;
    }

当手指抬起，状态变化时，把当前状态传出去

            case MotionEvent.ACTION_UP:
                isTouchMode = false;//松开的时候设置为FALSE
                printLog("event:ACTION_UP " + event.getX());
                currentX = event.getX();

                float center = switchBackgroupBitmap.getWidth() / 2.0f;
                // 根据当前按下的位置, 和控件中心的位置进行比较.
                boolean state = currentX > center;

                //如果开关状态变化了，状态回调, 把当前状态传出去
                if (state != mSwitchState && mOnSwitchStateUpdateListener != null) {
                    mOnSwitchStateUpdateListener.onStateUpdate(state);
                }

                mSwitchState = state;
                break;

自定义的View调用：

        mToggleView.setOnSwitchStateUpdateListener(new ToggleView.OnSwitchStateUpdateListener() {
            @Override
            public void onStateUpdate(boolean state) {
                Toast.makeText(MainActivity.this, "state = " + state, Toast.LENGTH_SHORT).show();
            }
        });

demo:接口回调

7,自定义属性

找到Android源码下sdk\platforms\android-18\data\res\values下的attrs.xml，

源码下的自定义属性

1,在res/values下建立attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ToggleView">
        <attr name="switch_background" format="reference" />
        <attr name="slide_button" format="reference" />
        <attr name="state" format="boolean" />
    </declare-styleable>
</resources>

2,R.java文件会自动创建其引用

3,在xml中使用属性

4,在ToggleView代码构造函数中获取属性

public ToggleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
        //获取背景
        String namespace = "http://schemas.android.com/apk/res-auto";
        int switchBackground = attrs.getAttributeResourceValue(namespace, "switch_background", -1);
        setSwitchBackgroundResource(switchBackground);

        int slideButton = attrs.getAttributeResourceValue(namespace, "slide_button", -1);
        setSlideButtonResource(slideButton);

        boolean state = attrs.getAttributeBooleanValue(namespace, "state", false);
        setSwitchState(state);
    }

Demo源码：自定义开关-继承View

最后编辑于：2019.05.22 08:25:37

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,142评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,298评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,068评论 0赞 351
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,081评论 1赞 291
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,099评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,071评论 1赞 295
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,990评论 3赞 417
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,832评论 0赞 273
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,274评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,488评论 2赞 331
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,649评论 1赞 347
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,378评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,979评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,625评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,796评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,643评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,545评论 2赞 352