自定义仿IOS开关

在开发的时候是不是经常会羡慕人家IOS的控件那么好看...下面我们就去自定义一个仿IOS的开关
说白了就是带选中功能的图片控件...所以我们的自定义View 就通过继承ImageView来实现,添加选中的功能
先上效果图,避免有同学走错片场:

效果图

效果图已上,下面就开始撸代码
MyNewSwitch.java

/**
 * 自定义开关按钮(仿苹果IOS开关风格)
 * 实现的Checkable接口非必须的.
 */
public class MyNewSwitch extends android.support.v7.widget.AppCompatImageView implements Checkable,View.OnClickListener {

    private boolean isChecked = false;
    private int imageOn = 0;//开状态的图片ID
    private int imageOff = 0;//关状态的图片ID
    private OnClickListener mOnClickListener;

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

    public MyNewSwitch(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyNewSwitch(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        if (attrs == null)
            return;
        TypedArray arr = context.obtainStyledAttributes(attrs, R.styleable.imageSwitch);
        imageOn = arr.getResourceId(R.styleable.imageSwitch_on, 0);
        imageOff = arr.getResourceId(R.styleable.imageSwitch_off, 0);
        arr.recycle();//释放
        setChecked(isChecked);//初始化状态
        this.setOnClickListener(this);
    }



    /**
     * 改变状态
     */
    @Override
    public void toggle() {
        isChecked = !isChecked;
        setChecked(isChecked);
    }

    /**
     * 设置状态
     *
     * @param checked 设置是否选中
     * @param imageId 重新设置图片
     */
    public void setCheckedNew(boolean checked, int imageId) {
        if (checked) {
            imageOn = imageId;
        } else {
            imageOff = imageId;
        }
        this.setChecked(checked);
    }

    /**
     * 设置状态
     *
     * @param checked 设置是否选中
     */
    @Override
    public void setChecked(boolean checked) {
        isChecked = checked;
        if (checked) {
            if (imageOn != 0)
                this.setImageResource(imageOn);

        } else {
            if (imageOff != 0)
                this.setImageResource(imageOff);
        }
    }

    /**
     * @return 当前的状态
     */
    @Override
    public boolean isChecked() {
        return isChecked;
    }

    /**
     * 点击事件set方法
     * @param onClickListener
     */
    public void setOnClickListener(OnClickListener onClickListener) {
        mOnClickListener = onClickListener;
    }

    public interface OnClickListener {

        /**
         * 点击事件
         * @param v
         * @param mChecked 当前的状态
         */
        void onClick(View v,boolean mChecked);
    }

    /**
     * 点击事件重写
     * @param v
     */
    @Override
    public void onClick(View v) {
        toggle();//改变状态
        if (mOnClickListener!=null){
            mOnClickListener.onClick(v,isChecked);
        }
    }


}

再上一份自定义View用到的属性文件
image.xml

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

    <declare-styleable name="imageSwitch">
        <attr name="off" format="reference"/>
        <attr name="on" format="reference"/>
    </declare-styleable>
</resources>

细心的同学可能已经发现了,在java文件中有引用xml的地方

           public MyNewSwitch(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        if (attrs == null)
            return;
        TypedArray arr = context.obtainStyledAttributes(attrs, R.styleable.imageSwitch);
        imageOn = arr.getResourceId(R.styleable.imageSwitch_on, 0);
        imageOff = arr.getResourceId(R.styleable.imageSwitch_off, 0);
        arr.recycle();//释放
        setChecked(isChecked);//初始化状态
        this.setOnClickListener(this);
    }

其中R.styleable.imageSwitch就是对应<declare-styleable name="imageSwitch">
R.styleable.imageSwitch_on对应<attr name="off" format="reference"/>
这个很好理解的,其中 _ 就像分隔符一样.
format="reference"的意思就是属性的ID, 在这里就是引用的图片ID,类似R.mipmap.*** 的ID

下面我们再看看xml文件存放位置

存放位置

xml的名字是可以修改的

最后去看看实际的使用.

实际引用

可以看到开和关的图片可以直接在xml中设置.这样就会方便很多..
同样也可以在Activity中设置

Activity中使用

在Activity中使用也很简单,设置点击监听也和普通的点击一样..
注意画重点:
设置的监听要使用自定义View中的点击监听,看图中的红色监听就知道了,千万不要写错哦..

如果你真的不小心写错了,导致的结果就是点击的时候图片状态会改变,需要自己调用toggle()方法,当然也不会返回当前的状态..这个也可以自己通过isChecked()方法获得

好了,这样就完成了一个仿IOS开关,(ImageView带选中功能的View)的自定义View.

发现有误的地方麻烦指正一下.
欢迎关注,带地址转发..谢谢.