在开发的时候是不是经常会羡慕人家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.
发现有误的地方麻烦指正一下.
欢迎关注,带地址转发..谢谢.
