在開發的時候是不是經常會羨慕人家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中使用也很簡單,設置點擊監聽也和普通的點擊一樣..
注意畫重點:
設置的監聽要使用自定義View中的點擊監聽,看圖中的紅色監聽就知道了,千萬不要寫錯哦..
如果你真的不小心寫錯了,導致的結果就是點擊的時候圖片狀態會改變,需要自己調用toggle()方法,當然也不會返回當前的狀態..這個也可以自己通過isChecked()方法獲得
好了,這樣就完成了一個仿IOS開關,(ImageView帶選中功能的View)的自定義View.
發現有誤的地方麻煩指正一下.
歡迎關注,帶地址轉發..謝謝.