Android 仿iphone的开关按钮

 今天纪录一下滑动按钮功能。。

首先效果图：

然后是分别建立三个文件，第一个是main.class，第二个是SlipButton.class,第三个是 onchangeListener.class

main.class

 import android.app.Activity;
 import android.os.Bundle;
 import android.widget.Toast;

 public class Main extends Activity implements OnChangedListener {
     /** Called when the activity is first created. */
     @Override
     public void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.main);

         SlipButton myBtn =(SlipButton) findViewById(R.id.slipBtn);//获得指定控件
         myBtn.SetOnChangedListener(this);//为控件设置监听器
     }

     @Override
     public void OnChanged(boolean CheckState) {//当按钮状态被改变时
         // TODO Auto-generated method stub
         if(CheckState)
             Toast.makeText(this,"打开了..." , Toast.LENGTH_SHORT).show();
         else
             Toast.makeText(this,"关闭了..." , Toast.LENGTH_SHORT).show();
     }
 }

SlipButton.class

 import android.content.Context;
 import android.graphics.Bitmap;
 import android.graphics.BitmapFactory;
 import android.graphics.Canvas;
 import android.graphics.Matrix;
 import android.graphics.Paint;
 import android.graphics.Rect;
 import android.util.AttributeSet;
 import android.view.MotionEvent;
 import android.view.View;
 import android.view.View.OnTouchListener;

 public class SlipButton extends View implements OnTouchListener{

     private boolean NowChoose = false;//记录当前按钮是否打开,true为打开,flase为关闭
     private boolean OnSlip = false;//记录用户是否在滑动的变量
     private float DownX,NowX;//按下时的x,当前的x,
     private Rect Btn_On,Btn_Off;//打开和关闭状态下,游标的Rect

     private boolean isChgLsnOn = false;
     private OnChangedListener ChgLsn;

     private Bitmap bg_on,bg_off,slip_btn;

     public SlipButton(Context context) {
         super(context);
         // TODO Auto-generated constructor stub
         init();
     }

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

     private void init(){//初始化
         //载入图片资源
         bg_on = BitmapFactory.decodeResource(getResources(), R.drawable.slip_bg_on);
         bg_off = BitmapFactory.decodeResource(getResources(), R.drawable.slip_bg_off);
         slip_btn = BitmapFactory.decodeResource(getResources(), R.drawable.slip_btn);
         //获得需要的Rect数据
         Btn_On = new Rect(0,0,slip_btn.getWidth(),slip_btn.getHeight());
         Btn_Off = new Rect(
                 bg_off.getWidth()-slip_btn.getWidth(),
                 0,
                 bg_off.getWidth(),
                 slip_btn.getHeight());
         setOnTouchListener(this);//设置监听器,也可以直接复写OnTouchEvent
     }

     @Override
     protected void onDraw(Canvas canvas) {//绘图函数
         // TODO Auto-generated method stub
         super.onDraw(canvas);
         Matrix matrix = new Matrix();
         Paint paint = new Paint();
         float x;

         {
             if(NowX<(bg_on.getWidth()/2))//滑动到前半段与后半段的背景不同,在此做判断
                 canvas.drawBitmap(bg_off,matrix, paint);//画出关闭时的背景
             else
                 canvas.drawBitmap(bg_on,matrix, paint);//画出打开时的背景

             if(OnSlip)//是否是在滑动状态,
             {
                 if(NowX >= bg_on.getWidth())//是否划出指定范围,不能让游标跑到外头,必须做这个判断
                     x = bg_on.getWidth()-slip_btn.getWidth()/2;//减去游标1/2的长度...
                 else
                     x = NowX - slip_btn.getWidth()/2;
             }else{//非滑动状态
                 if(NowChoose)//根据现在的开关状态设置画游标的位置
                     x = Btn_Off.left;
                 else
                     x = Btn_On.left;
             }
         if(x<0)//对游标位置进行异常判断...
             x = 0;
         else if(x>bg_on.getWidth()-slip_btn.getWidth())
             x = bg_on.getWidth()-slip_btn.getWidth();
         canvas.drawBitmap(slip_btn,x, 0, paint);//画出游标.
         }
     }


     @Override
     public boolean onTouch(View v, MotionEvent event) {
         // TODO Auto-generated method stub
         switch(event.getAction())//根据动作来执行代码
         {
         case MotionEvent.ACTION_MOVE://滑动
             NowX = event.getX();
             break;
         case MotionEvent.ACTION_DOWN://按下
         if(event.getX()>bg_on.getWidth()||event.getY()>bg_on.getHeight())
             return false;
             OnSlip = true;
             DownX = event.getX();
             NowX = DownX;
             break;
         case MotionEvent.ACTION_UP://松开
             OnSlip = false;
             boolean LastChoose = NowChoose;
             if(event.getX()>=(bg_on.getWidth()/2))
                 NowChoose = true;
             else
                 NowChoose = false;
             if(isChgLsnOn&&(LastChoose!=NowChoose))//如果设置了监听器,就调用其方法..
                 ChgLsn.OnChanged(NowChoose);
             break;
         default:

         }
         invalidate();//重画控件
         return true;
     }

     public void SetOnChangedListener(OnChangedListener l){//设置监听器,当状态修改的时候
         isChgLsnOn = true;
         ChgLsn = l;
     }

 }

 

 onchangeListener.class

 package CMD100.demo.slipButton;

 public interface OnChangedListener {
     abstract void OnChanged(boolean CheckState);
 }

main.xml代码

 

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="vertical"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     >
 <TextView
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="@string/hello"
     />
 <LinearLayout
     android:orientation = "horizontal"
     android:layout_width = "fill_parent"
     android:layout_height = "wrap_content"
     android:background = "#ff0000"
     >
     <TextView
         android:text = "测试:"
         android:layout_width = "wrap_content"
         android:layout_height = "wrap_content"
         />
     <CMD100.demo.slipButton.SlipButton
         android:id = "@+id/slipBtn"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginLeft = "10sp"
     />

 </LinearLayout>
 </LinearLayout>

 

注意：在xml里头要放置的位置

<[包名].SlipButton
        android:id = "@+id/slipBtn"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        />

然后可以像其他控件一样使用了...

SlipButton myBtn =(SlipButton) findViewById(R.id.slipBtn);
myBtn.SetOnChangedListener(...);

代码到这里就全部完成了。

原创作者是：zcmmwbd