自定义控件(模仿微信ToggleButton控件)

弄过android开发的都知道，系统有一个默认的ToggleButton，但很多人都觉得他很难看，当然也包括我。如果你感觉他不难看，那你就继续使用系统的吧，这篇文章对你来说是多余的了。

今天来写一个模仿微信的ToggleButton控件，是啊，模仿都是模仿"大家之作"，腾讯、360等等，也确实，他们设计出来的东西确实好看。

下面看效果图打开状态，关闭状态

先奉献上三张图片的素材，打开背景图，关闭背景图，滑块背景图。这里背景图高度是小于前两个背景图2个像素的。这样才能出现最终的打开和关闭后的滑块上下出现1个像素背景的效果。

开始我们的控件代码，这里我们自定义一个ToggleButton控件，当然要继承自View，下面贴出我的代码

 public class ToggleButton extends View {

     private Bitmap onBackgroundImage;
     private Bitmap offBackgroundImage;
     private Bitmap blockImage;
     private ToggleState state = ToggleState.Open;
     private int currentX;
     private int mouseDownX = -1;
     private boolean isMove = false;
     private ToggleState preState;
     private boolean isInvalidate = true;
      public ToggleButton(Context context) {
      super(context);
      // TODO Auto-generated constructor stub
      }

     private OnClickListener clickListener = null;

     /*
      * 其实应该是stateChange事件，懒得改了
      */
     public void SetOnClickListener(OnClickListener listener) {
         if (listener != null)
             clickListener = listener;
     }

     @Override
     protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
         // TODO Auto-generated method stub
         super.onLayout(changed, left, top, right, bottom);
         //layout方法是在ondraw方法之前执行，
         //在这个做判断是防止用户在设置Image之前setState，
         //这样Image为null，系统无法获取block宽度，也就无法设置currentX坐标,
         //系统将采用默认Open状态,会出现即使用户设置状态为close，而界面显示仍未open状态,
         //在这里判断，是因为当前image和state肯定已经设置完毕了
         if (state == ToggleState.Open) {
             currentX = 2;
         } else {
             if (blockImage == null || offBackgroundImage == null || onBackgroundImage == null)
                 return;
             currentX=offBackgroundImage.getWidth()-blockImage.getWidth()-2;
         }
     }
     public enum ToggleState {
         Open, Close
     }

     public ToggleButton(Context context, AttributeSet attrs) {
         super(context, attrs);
         // TODO Auto-generated constructor stub
     }

     public void setOnBackgroundResource(int id) {

         onBackgroundImage = BitmapFactory.decodeResource(getResources(), id);
     }

     public void setOffBackgroundResource(int id) {
         offBackgroundImage = BitmapFactory.decodeResource(getResources(), id);

     }

     public void setState(ToggleState state) {
         preState = this.state = state;
         if (state == ToggleState.Open) {
             currentX = 2;
         } else {
             if (blockImage != null && offBackgroundImage != null)
                 currentX = offBackgroundImage.getWidth() - blockImage.getWidth() - 2;
         }
         invalidate();
     }

     public ToggleState getState() {
         return state;
     }

     public void setBlockResource(int id) {
         blockImage = BitmapFactory.decodeResource(getResources(), id);
     }

     @Override
     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
         // TODO Auto-generated method stub
         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
         setMeasuredDimension(onBackgroundImage.getWidth(), onBackgroundImage.getHeight());

     }

     @Override
     protected void onDraw(Canvas canvas) {
         // TODO Auto-generated method stub
         super.onDraw(canvas);
         // 有效性判断，如果其中有一个为空，拒绝绘制，继续绘制也没有意义
         if (blockImage == null || offBackgroundImage == null || onBackgroundImage == null)
             return;
         if ((currentX + blockImage.getWidth() / 2) > onBackgroundImage.getWidth() / 2) {
             canvas.drawBitmap(offBackgroundImage, 0, 0, null);
         } else {
             canvas.drawBitmap(onBackgroundImage, 0, 0, null);
         }
         canvas.drawBitmap(blockImage, currentX, 1, null);
     }

     @Override
     public boolean onTouchEvent(MotionEvent event) {
         currentX = (int) event.getX();
         switch (event.getAction()) {
         case MotionEvent.ACTION_DOWN:
             // 记录鼠标按下时的x
             mouseDownX = (int) event.getX();
             // 按下的时候不进行重绘
             isInvalidate = false;
             break;
         case MotionEvent.ACTION_MOVE:
             // 记录鼠标发生了移动
             isMove = true;
             break;
         case MotionEvent.ACTION_UP:
             // 判断鼠标按下和抬起过程中是否发生了移动
             // 鼠标抬起时，判断当前x坐标位置
             if (isMove) {
                 // 发生了移动，判断当前位置
                 if ((currentX + blockImage.getWidth() / 2) > onBackgroundImage.getWidth() / 2) {
                     // 背景图的后半段
                     currentX = onBackgroundImage.getWidth() - blockImage.getWidth();
                     state = ToggleState.Close;
                 } else {
                     // 背景图的前半段
                     currentX = 2;
                     state = ToggleState.Open;
                 }
             } else {
                 // 没有发生移动,即为点击事件，更改状态，同时改变滑块位置
                 if (state == ToggleState.Open) {
                     state = ToggleState.Close;
                     currentX = onBackgroundImage.getWidth() - blockImage.getWidth() - 2;
                 } else {
                     state = ToggleState.Open;
                     currentX = 2;
                 }
             }
             // 复位，以免影响下一次的触摸事件
             isMove = false;
             if (preState != state && clickListener != null) {
                 clickListener.onClick(this);
                 preState = state;
             }
             break;
         }
         if (currentX < 2)
             currentX = 2;
         if (currentX + blockImage.getWidth() >= onBackgroundImage.getWidth())
             currentX = onBackgroundImage.getWidth() - blockImage.getWidth() - 2;
         // 通知控件绘制
         if (isInvalidate)
             invalidate();
         else
             isInvalidate = true;
         return true;
     }

 }

代码里的注释够多吧，哈哈，所以就不进行讲解了。

接下来我们在activity布局文件里面使用这个ToggleButton 控件

 <包名.ToggleButton
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:id="@+id/testToggleButton"
         />

我们在activity里面使用吧

 final ToggleButton toggle=(ToggleButton) findViewById(R.id.testToggleButton);
         toggle.setState(ToggleState.Close);
         toggle.setOnBackgroundResource(R.drawable.on);
         toggle.setOffBackgroundResource(R.drawable.off);
         toggle.setBlockResource(R.drawable.block);

         toggle.SetOnClickListener(new OnClickListener() {
             @Override
             public void onClick(View v) {
                 // TODO Auto-generated method stub
                 String state=(toggle.getState()==ToggleState.Open?"打开":"关闭");
                 Toast.makeText(MainActivity.this, "当前状态:"+state, Toast.LENGTH_SHORT).show();
             }
         });

注意啊，我上面的一行代码的位置

toggle.setState(ToggleState.Close);

设置状态这行代码放在了设置图片之前，但效果仍然是关闭状态。

但ToggleButton里面如果不重写OnLayout方法，显示出来的状态就只能是打开状态。