[Android]自定义CheckableImageButton

首先，和大部分自定义控件一样，我们需要先在attrs.xml文件中定义相应的style。

<declare-styleable name="CheckableImageButton">
<attr name="isChecked" format="boolean"/>
</declare-styleable>

接着，我们可以为我们的可选中ImageButton创建Selector文件，指定其在选中和未被选中时呈现的图片

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:myApp="http://schemas.android.com/apk/res/com.yourPackage.xxx">
<item dxx:isChecked="true" android:drawable="@mipmap/users"></item>
<item dxx:isChecked="false" android:drawable="@mipmap/users_g"></item>
</selector>

现在我们可以开始写自定义CheckableImageView了

public class CheckableImageButton extends ImageButton implements Checkable{
//判断是否被点击
private boolean isChecked;
private OnCheckedChangeListener mOnCheckedChangeListener;
private static final int[] CHECKED_STATE_SET = { R.attr.isChecked };
public CheckableImageButton(Context context) {
super(context);
}

public CheckableImageButton(Context context, AttributeSet attrs) {
super(context, attrs);
//获取自定义属性
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CheckableImageButton);
isChecked = a.getBoolean(R.styleable.CheckableImageButton_isChecked, false);
setChecked(isChecked);
a.recycle();
}

public CheckableImageButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//获取自定义属性
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CheckableImageButton);
isChecked = a.getBoolean(R.styleable.CheckableImageButton_isChecked, false);
setChecked(isChecked);
a.recycle();
}

@Override
public boolean performClick() {
//拦截点击事件
setChecked(true);
return super.performClick();
}

@Override
public void setChecked(boolean checked) {
if (isChecked != checked) {
isChecked = checked;
refreshDrawableState();
if (null != mOnCheckedChangeListener) {
mOnCheckedChangeListener.onCheckedChanged(this, isChecked);
refreshDrawableState();
}
}
}

@Override
public boolean isChecked() {
return isChecked;
}

@Override
public void toggle() {
setChecked(!isChecked);
}

@Override
public int[] onCreateDrawableState(int extraSpace) {
int[] states = super.onCreateDrawableState(extraSpace + 1);
if (isChecked()) {
mergeDrawableStates(states, CHECKED_STATE_SET);
}
return states;
}

@Override
protected void drawableStateChanged() {
super.drawableStateChanged();
// invalidate();
}

@Override
protected Parcelable onSaveInstanceState() {
Parcelable superParcelable = super.onSaveInstanceState();
SaveState ss = new SaveState(superParcelable);
ss.checked = isChecked();
return ss;
}

@Override
protected void onRestoreInstanceState(Parcelable state) {
SaveState ss = (SaveState) state;
super.onRestoreInstanceState(ss.getSuperState());
setChecked(ss.checked);
}

public OnCheckedChangeListener getmOnCheckedChangeListener() {
return mOnCheckedChangeListener;
}

public void setmOnCheckedChangeListener(
OnCheckedChangeListener mOnCheckedChangeListener) {
this.mOnCheckedChangeListener = mOnCheckedChangeListener;
}

//自定义接口，用来监听check的改变
public static interface OnCheckedChangeListener {
public void onCheckedChanged(CheckableImageButton button, boolean isChecked);
}
//用于恢复Check状态信息
static class SaveState extends BaseSavedState {
boolean checked;

public SaveState(Parcel in) {
super(in);
checked = (Boolean) in.readValue(null);
}

public SaveState(Parcelable superState) {
super(superState);
}

@Override
public void writeToParcel(Parcel dest, int flags) {
super.writeToParcel(dest, flags);
dest.writeValue(checked);
}

public static final Parcelable.Creator<SaveState> CREATOR = new Creator<CheckableImageButton.SaveState>() {

@Override
public SaveState[] newArray(int size) {
return new SaveState[size];
}

@Override
public SaveState createFromParcel(Parcel source) {
return createFromParcel(source);
}
};
}
}

<LinearLayout
xmlns:dxx="http://schemas.android.com/apk/res/philips.com.myapplication"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<philips.com.myapplication.customview.CheckableImageButton
android:id="@+id/firstIb"
android:layout_width="0dp"
android:layout_height="20dp"
android:layout_weight="1"
android:background="@null"
android:src="@drawable/image_button_first"
android:scaleType="fitCenter"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
dxx:isChecked="true"
/>
<philips.com.myapplication.customview.CheckableImageButton
android:id="@+id/secondIb"
android:layout_width="0dp"
android:layout_height="20dp"
android:layout_weight="1"
android:background="@null"
android:src="@drawable/image_button_second"
android:scaleType="fitCenter"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
/>
<philips.com.myapplication.customview.CheckableImageButton
android:id="@+id/thirdIb"
android:layout_width="0dp"
android:layout_height="20dp"
android:layout_weight="1"
android:background="@null"
android:src="@drawable/image_button_third"
android:scaleType="fitCenter"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
/>

</LinearLayout>

@Override
public void onCheckedChanged(CheckableImageButton button, boolean isChecked) {
if (isChecked) {
switch (button.getId()) {
case R.id.firstIb:
checkableImageButton2.setChecked(false);
checkableImageButton3.setChecked(false);
break;
case R.id.secondIb:
checkableImageButton1.setChecked(false);
checkableImageButton3.setChecked(false);
break;
case R.id.thirdIb:
checkableImageButton1.setChecked(false);
checkableImageButton2.setChecked(false);
}
}
}