android之自定义开关控件
先看效果图咯~
我们可以看到一个很常见的开关按钮，那就来分析一下。
这是由两张图片构成的：
①一张为有开和关的背景图片
②一张为控制开和关的滑动按钮图片
代码编写的步骤：1.写个类继承View，并重写几个方法：
第一个为构造函数，重写一个参数的函数和两个参数的函数就够了，因为两个参数的函数能够使用自定义属性
第二个为控制控件的大小–>protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {}
第三个为绘制控件的方法–>protected void onDraw(Canvas canvas) {}
2.将用户指定的两张图片加载进来，写俩个方法--setToggleBackground和setToggleSolid方法：
//设置背景图片
public void setToggleBackground(int resId){
toggleBackground=BitmapFactory.decodeResource(getResources(), resId);
}
//设置滑块图片
public void setToggleSolid(int resId){
toggleSolid=BitmapFactory.decodeResource(getResources(), resId);
}3.
onMeasure方法来控制控件的大小，我们可以看到这个开关按钮的大小就跟背景的大小一样大，只需要设置为背景的大小：
//控制控件的大小
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// TODO Auto-generated method stub
if(toggleBackground!=null){
//指定控件宽高
setMeasuredDimension(toggleBackground.getWidth(), toggleBackground.getHeight());
}else{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}4.既然这个开关按钮需要通过点击或移动来控制控件的开和关，所以就需要实现
onTouchEvent方法，当然应该有三个事件会触发：按下、移动和抬起的时候，每次点击、移动或抬起都需要重绘，我们先来分析下滑块的状态有哪些（应该有四种状态）一开始默认状态为空：
1.点击的时候
2.移动的时候
3.抬起的时候
4.空的时候（即什么都没干的时候）
先分析下点击的时候的情况：
①当按下或移动的坐标大于滑块宽度一半时将滑块右移
②当按下或移动的坐标小于滑块宽度一半时滑块不动
注：防止滑块移至背景外面，最大是滑块右边和背景右边对齐（即最大剩余宽度等于滑块离左边-为背景宽度-滑块宽度）再来分析移动的时候的情况，可以发现应该是和点击的时候是一样的。
再来分析抬起的时候的情况：
①如果开关状态是打开的就将滑块移动至右边
②如果开关状态是关闭的就将滑块移动至左边
那怎么判断什么时候是打开状态和关闭状态呢？？
①抬起的坐标大于背景宽度一半的时候设为打开状态
②抬起的坐标小于背景宽度坐标一 半的时候设为关闭状态
再来分析下空的时候，可以发现它和抬起的时候的情况是一样的。5.在onDraw方法中将背景和滑块绘制出来。刚才分析了onTouchEvent方法，这次是一样的，滑块的四个状态分别处理，前面onTouchEvent方法中滑块的状态改变，然后通过invalidate()方法来通知系统重绘。
//控制控件的样式
@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
if(toggleBackground!=null){
canvas.drawBitmap(toggleBackground, 0, 0, paint);
}
switch (state) {
case DOWN:
case MOVE:
if(currentX>toggleSolid.getWidth()/2f){
//让滑块向右移动(重新绘制滑块的位置)
leftX=currentX-toggleSolid.getWidth()/2f;
maxLeft=toggleBackground.getWidth()-toggleSolid.getWidth();
if(leftX>maxLeft){
leftX=maxLeft;
}
canvas.drawBitmap(toggleSolid, leftX, 0, paint);
}else{
//滑块不动
canvas.drawBitmap(toggleSolid, 0, 0, paint);
}
break;
case NONE:
case UP:
if(isOpen){
canvas.drawBitmap(toggleSolid, maxLeft, 0, paint);
}else {
canvas.drawBitmap(toggleSolid, 0, 0, paint);
}
break;
}
}
6.我们做这个自定义控件是为了让用户使用的，现在这个是没有什么用的，用户用不了的，所以可以通过设置监听器来对外提供接口。
onToggleListener listener;
public void setOnToggleListener(onToggleListener listener){
this.listener=listener;
}
//接口
public interface onToggleListener{
void onToggleChanged(boolean isOpen);
}这个监听器中的boolean值需要赋值，那在什么时候赋值呢，应该是在抬起或空的状态的时候给它赋值，因为那个时候才真正确定开关按钮是打开的还是关闭的。
7.在布局文件中把自定义的这个控件定义出来~
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.example.zidingyi.ToggleVie
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/toggle">
</com.example.zidingyi.ToggleVie>
</LinearLayout>8.自定义的View-ToggleVie：
public class ToggleVie extends View{
public ToggleVie(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}
public static final int DOWN=1;
public static final int MOVE=2;
public static final int UP=3;
public static final int NONE=0;
//标记状态
private int state=NONE;
boolean isOpen;
private Bitmap toggleBackground,toggleSolid;
float currentX,leftX,maxLeft;
private Paint paint=new Paint();
//控制控件的大小
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// TODO Auto-generated method stub
if(toggleBackground!=null){
//指定控件宽高
setMeasuredDimension(toggleBackground.getWidth(), toggleBackground.getHeight());
}else{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
//控制控件的样式
@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
if(toggleBackground!=null){
canvas.drawBitmap(toggleBackground, 0, 0, paint);
}
switch (state) {
case DOWN:
case MOVE:
if(currentX>toggleSolid.getWidth()/2f){
//让滑块向右移动(重新绘制滑块的位置)
leftX=currentX-toggleSolid.getWidth()/2f;
maxLeft=toggleBackground.getWidth()-toggleSolid.getWidth();
if(leftX>maxLeft){
leftX=maxLeft;
}
canvas.drawBitmap(toggleSolid, leftX, 0, paint);
}else{
//滑块不动
canvas.drawBitmap(toggleSolid, 0, 0, paint);
}
break;
case NONE:
case UP:
if(isOpen){
canvas.drawBitmap(toggleSolid, maxLeft, 0, paint);
}else {
canvas.drawBitmap(toggleSolid, 0, 0, paint);
}
break;
}
}
public ToggleVie(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
//设置背景图片
public void setToggleBackground(int resId){
toggleBackground=BitmapFactory.decodeResource(getResources(), resId);
}
//设置滑块图片
public void setToggleSolid(int resId){
toggleSolid=BitmapFactory.decodeResource(getResources(), resId);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
// TODO Auto-generated method stub
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
state=DOWN;//修改标记位
//通知界面重新绘制
invalidate();
// postInvalidate(); //在子线程的
break;
case MotionEvent.ACTION_UP:
currentX=event.getX();
state=UP;
if(currentX>toggleBackground.getWidth()/2f){
//滑块在右边
isOpen=true;
if(listener!=null){
listener.onToggleChanged(true);
}
}else{
//滑块在左边
isOpen=false;
if(listener!=null){
listener.onToggleChanged(false);
}
}
invalidate();
break;
case MotionEvent.ACTION_MOVE:
currentX=event.getX();
state=MOVE;
invalidate();
break;
default:
break;
}
return true;
}
onToggleListener listener;
public void setOnToggleListener(onToggleListener listener){
this.listener=listener;
}
//接口
public interface onToggleListener{
void onToggleChanged(boolean isOpen);
}
}
9.MainActivity:
public class MainActivity extends Activity {
private ToggleVie toggle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toggle=(ToggleVie) findViewById(R.id.toggle);
toggle.setToggleBackground(R.drawable.switch_background);
toggle.setToggleSolid(R.drawable.slide_button_background);
toggle.setOnToggleListener(new onToggleListener() {
@Override
public void onToggleChanged(boolean isOpen) {
// TODO Auto-generated method stub
if(isOpen){
Toast.makeText(MainActivity.this, "开启", 0).show();
}else {
Toast.makeText(MainActivity.this, "关闭", 0).show();
}
}
});
}
}
源码