自定義仿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.

發現有誤的地方麻煩指正一下.
歡迎關注,帶地址轉發..謝謝.

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容