Android自定义控件实现简单滑动开关效果

本文实例为大家分享了android自定义控件实现简单滑动开关的具体代码，供大家参考，具体内容如下

togglebutton 滑动开关

项目概述

滑动开关是一个纯粹的自定义控件，上面的按钮会随着我们的左右滑动而滑动，并且在状态改变时通知用户，效果如下图1-9 所示，这也是应用中设置某些状态信息时最常见的控件，因此，我们有必要学习关于如何

自定义一个这样的滑动开关。

滑动开关ui

布局文件为activity_main.xml，代码如下：res/layout/activity_main.xml

<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:itheima="http://schemas.android.com/apk/res/com.itheima.togglebuttondemo"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    <com.itheima.togglebuttondemo.view.togglebutton
        android:id="@+id/togglebutton"
        android:layout_width="wrap_content"
        android:layout_centerinparent="true"
        itheima:switchbtnbackgroud="@drawable/switch_background"
        itheima:slidbtnbackgroud="@drawable/slide_button_background"
        itheima:currentstate="false"
        android:layout_height="wrap_content"/>
</relativelayout>

在activity_main.xml 布局中引入如下命名空间：

xmlns:itheima=”http://schemas.android.com/apk/res/com.itheima.togglebuttondemo”,com.itheima.togglebuttondemo 是包名，itheima 是自定义的命名控件名，可以任取名字，也可以使用类名。

上面的布局主要是引入com.itheima.togglebuttondemo.view.togglebutton 类和自定义属性的使用。添加自定义属性，在values 目录下创建attrs.xml 文件，具体代码如文件所示：

res/values/attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="togglebutton">
        <!-- 滑动开关背景图片属性-->
        <attr
            name="switchbtnbackgroud"
            format="reference"/>
        <!-- 滑动块背景图片属性-->
        <attr
            name="slidbtnbackgroud"
            format="reference"/>
        <!-- 滑动开关的状态-->
        <attr
            name="currentstate"
            format="boolean"/>
    </declare-styleable>
</resources>

attrs.xml 文件目录结构如下图所示：

滑动开关业务逻辑实现

下拉选择框activity 界面，mainactivity.java 代码如下：com/itheima/myswitch/mainactivity

public class mainactivity extends activity {
    @override
    protected void oncreate(bundle savedinstancestate) {
        super.oncreate(savedinstancestate);
        setcontentview(r.layout.activity_main);
        togglebutton togglebutton = (togglebutton) findviewbyid(r.id.togglebutton);
        //设置滑动开关的背景图片
        // togglebutton.setswitchbtnbackgroudresource(r.drawable.switch_background);
        //设置滑动块的背景图片
        // togglebutton.setslidbtnbackgroudresource(r.drawable.slide_button_background);
        //设置滑动开关的默认状态
        // togglebutton.setcurrentstate(true);
        //设置滑动开关状态改变监听
        togglebutton.settogglebtnstatechangelistener(new togglebtnstatechangelistener() {
            @override
            public void ontogglebtnstatechange(boolean currentstate) {
                if (currentstate) {
                    toast.maketext(getapplicationcontext(), "开关打开", 0).show();
                }else{
                    toast.maketext(getapplicationcontext(), "开关关闭", 0).show();
                }
            }
        });
    }
}

自定义的滑动开关togglebutton 类的实现，具体代码如文件所示：com/itheima/myswitch/mainactivity

public class togglebutton extends view {
    private bitmap  switchbitmap;//滑动开关的背景图片
    private bitmap  slidbitmap;//滑动块的背景图片
    private boolean currentstate;
    private int     currentx;//手指触摸点的x 值
    private boolean istouching = false;
    private togglebtnstatechangelistener mtogglebtnstatechangelistener;//状态改变监听器
    //在xml 中引用该控件时，调用该方法
    public togglebutton(context context, attributeset attrs) {
        super(context, attrs);
        string namespace = "http://schemas.android.com/apk/res/com.itheima.togglebuttondemo";
        currentstate = attrs.getattributebooleanvalue(namespace, "currentstate", false);
        int switchbtnbackgroudid =
                attrs.getattributeresourcevalue(namespace, "switchbtnbackgroud", -1);
        int slidbtnbackgroudid =
                attrs.getattributeresourcevalue(namespace, "slidbtnbackgroud", -1);
        setswitchbtnbackgroudresource(switchbtnbackgroudid);
        setslidbtnbackgroudresource(slidbtnbackgroudid);
    }
    //在代码中创建该控件时，调用该构造方法
    public togglebutton(context context) {
        super(context);
    }
    //设置滑动开关的背景图片
    public void setswitchbtnbackgroudresource(int switchbackground) {
        switchbitmap = bitmapfactory.decoderesource(getresources(), switchbackground);
    }
    // 为了可以高度自定义和增强可扩展性，我们可以给其创建一个自定义控件底部背景了一个方法
    // 设置滑动块的背景图片
    public void setslidbtnbackgroudresource(int slidebuttonbackground) {
        slidbitmap = bitmapfactory.decoderesource(getresources(), slidebuttonbackground);
    }
    //设置滑动开关的默认状态
    public void setcurrentstate(boolean b) {
        currentstate = b;
    }
    // 1、测量滑动开关的宽高
    // 测量控件的宽高
    @override
    protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
        super.onmeasure(widthmeasurespec, heightmeasurespec);
        setmeasureddimension(switchbitmap.getwidth(), switchbitmap.getheight());
    }
    // 2、绘制，画出我们的滑动开关
    //canvas:画布，将图形绘制在canvas，才能显示到屏幕上
    @override
    protected void ondraw(canvas canvas) {
        //绘制滑动开关的背景图片
        canvas.drawbitmap(switchbitmap, 0, 0, null);
        //绘制滑动块的背景图片
        if(istouching){//手指触摸的时候，根据currentx 的值来绘制滑动块
            //根据手指的x 值，来绘制滑动块图片
            int left = currentx - slidbitmap.getwidth()/2;
            if(left < 0){//设置左边界
                left = 0;
            }else if(left > (switchbitmap.getwidth() - slidbitmap.getwidth())){//设置右边界
                left = switchbitmap.getwidth() - slidbitmap.getwidth();
            }
            canvas.drawbitmap(slidbitmap, left, 0, null);
        }else{ // 手指离开控件的时候，根据状态来绘制滑动块
            // 根据状态值，来绘制滑动块
            if(currentstate){ //当前为true，开关打开，滑动块显示在最右边
                canvas.drawbitmap(slidbitmap,switchbitmap.getwidth() - slidbitmap.getwidth(),
                        0, null);
            }else{//当前为false，开关关闭，滑动块显示在最左边
                canvas.drawbitmap(slidbitmap, 0, 0, null);
            }
        }
    }
    //当控件被触摸后，会调用该方法
    @override
    public boolean ontouchevent(motionevent event) {
        switch (event.getaction()) {
            case motionevent.action_down://手指按下
                istouching = true;
                currentx = (int) event.getx();
                break;
            case motionevent.action_move://手指滑动
                istouching= true;
                currentx = (int) event.getx();
                break;
            case motionevent.action_up://手指抬起
                istouching = false;
                currentx = (int) event.getx();
                int center = switchbitmap.getwidth()/2;
                //当滑动块中心点大于滑动开关背景图片的中心线时，显示到右边，当前状态为true
                boolean state = currentstate;
                currentstate = currentx > center;
                if(mtogglebtnstatechangelistener !=null&&state != currentstate ){
                    mtogglebtnstatechangelistener.ontogglebtnstatechange(currentstate);
                }
                break;
            default:
                break;
        }
        invalidate(); //强制让控件重新绘制，ondraw；
        return true; //自己处理触摸事件
    }
    public void settogglebtnstatechangelistener(togglebtnstatechangelistenerlistener){
        this.mtogglebtnstatechangelistener = listener;
    }
    // 定义滑动开关状态改变的回调接口
    public interface togglebtnstatechangelistener{
        void ontogglebtnstatechange(boolean currentstate);
    }
}

运行程序，效果图如图1-11 所示。

知识点总结

1．通过setmeasureddimension 方法，来设置自定义控件的宽高，见togglebutton 类第42 行
2．view 可以通过invalidate()方法强制让自己重新绘制，见togglebutton 类第96 行
3．view 通过实现ontouchevent 方法来处理手指触摸事件，见togglebutton 类第72 行

自定义控件之自定义属性

当我们使用自定义属性来自定义控件时，一般分为以下几个步骤进行设置：

1、在res 文件的values 里面创建attrs.xml，见文件【1-10】attrs.xml
2、在attrs.xml，里面定义我们需要的属性，见文件【1-10】attrs.xml 代码
3、在布局文件中使用自定义的属性，注意要添加命名空间，见文件【1-9】activity_main.xml 第2 行
4、在构造方法中来获取设置的属性数据，见文件【1-9】见togglebutton 类第8~19 行

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。