自定义控件（视图）2期笔记05：自定义控件之继承自View（滑动开关）

1.  开关按钮点击效果，如下：

2. 继承已有View实现自定义View

3. 下面通过一个案例实现滑动开关的案例：

（1）新建一个新的Android工程，命名为" 开关按钮"，接下来我们按照上面的步骤来：自定义类MyToggleButton继承自View。

（2）编写设计activity_main.xml布局文件，如下：

 <RelativeLayout 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"
     tools:context="com.himi.togglebtn.MainActivity" >

     <com.himi.togglebtn.MyToggleButton
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:id="@+id/my_toggle_btn"
         android:layout_centerHorizontal="true"
         android:layout_centerVertical="true"/>

 </RelativeLayout>

注意这里使用的自定的MyToggleButton（View），要使用全路径。

（3）编写自定义的MyToggleButton。

• 重写onMeasure（）方法，指定控件大小；

• 重写onDraw（）方法，绘制控件内容。

 package com.himi.togglebtn;

 import android.content.Context;
 import android.graphics.Bitmap;
 import android.graphics.BitmapFactory;
 import android.graphics.Canvas;
 import android.graphics.Paint;
 import android.util.AttributeSet;
 import android.view.View;
 import android.view.View.OnClickListener;

 public class MyToggleButton extends View implements OnClickListener {

     //作为背景的图片
     private Bitmap backgroundBitmap;
     //滑动的开关图片
     private Bitmap slidebtn;
     private Paint paint;

     //滑动按钮的左边界
     private float slidebtn_left;

     /**
      * 当前开关的状态
      * true :为开
      * false:为关
      */
     private boolean currState = false;

     /**
      * 我们在代码里面创建对象的时候，使用此构造方法
      * @param context
      */
     public MyToggleButton(Context context) {
         super(context);
         // TODO 自动生成的构造函数存根
     }

     /**
      * 在布局文件xml中声明的View,创建时候由系统自动调用此构造方法。
      * 倘若我们(使用全路径)在xml布局文件中,声明使用这个自定义的View,但是我们没有这个构造方法，就会报错(系统不能找到这个构造)
      * @param context
      * @param attrs
      */
     public MyToggleButton(Context context, AttributeSet attrs) {
         super(context, attrs);
         initView();
     }

     /**
      * 这个构造方法比上面的构造方法都了一个参数 defStyle，这个参数View默认的样式，这里可以重新这个构造，设置defStyle
      * 改变生成自定义的View的样式style
      * @param context
      * @param attrs
      * @param defStyle
      */
     public MyToggleButton(Context context, AttributeSet attrs, int defStyle) {
         super(context, attrs, defStyle);
         // TODO 自动生成的构造函数存根
     }

     //初始化
     private void initView() {
         //初始化图片
         backgroundBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.switch_background);
         slidebtn = BitmapFactory.decodeResource(getResources(), R.drawable.slide_button);
         //初始化画笔
         paint = new Paint();
         paint.setAntiAlias(true);//打开抗锯齿
         //添加Onclick事件监听
         setOnClickListener(this);
     }

     /*
      * View对象显示在屏幕上，有几个重要步骤：
      * 1. 构造方法 创建  对象.
      * 2. 测量View的大小.  onMeasure(int, int):系统调用的方法，获知View的大小
      * 3. 确定View的位置,View自身有一些建议权,View位置决定权在父View手中. onLayout(): ViewGroup调用
      * 4. 绘制View的内容           onDraw(canvas)
      *
      */

     /**
      *
      * 测量尺寸时候的回调方法
      */
     @Override
     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

         //super.onMeasure(widthMeasureSpec, heightMeasureSpec);
         /**
          * 设置当前View的大小
          * width ：当前View的宽度
          * height:当前view的高度(单位：像素)
          */
         setMeasuredDimension(backgroundBitmap.getWidth(), backgroundBitmap.getHeight());
     }

     /**
      * 自定义的View，作用不大
      * 确定位置的时候，系统调用的方法(我们不用关心),这里我们就不改写这个方法
      */
     @Override
     protected void onLayout(boolean changed, int left, int top, int right,
             int bottom) {
         // TODO 自动生成的方法存根
         super.onLayout(changed, left, top, right, bottom);
     }

     /**
      * 绘制当前View的内容
      */
     @Override
     protected void onDraw(Canvas canvas) {
         // TODO 自动生成的方法存根
         //super.onDraw(canvas);
         //绘制背景图
         /*
          * backgroundBitmap:要绘制的图片
          * left 图片的左边界
          * top 图片的上边界
          * paint 绘制图片要使用的画笔
          */
         canvas.drawBitmap(backgroundBitmap, 0, 0, paint);
         //绘制可滑动的按钮
         canvas.drawBitmap(slidebtn, slidebtn_left, 0, paint);
     }

     public void onClick(View v) {
         currState = ! currState;
         flushState();//刷新当前开关状态

     }

     /**
      * 刷新当前开关视图
      */
     private void flushState() {
         if(currState) {
             slidebtn_left = backgroundBitmap.getWidth()-slidebtn.getWidth();
         }else {
             slidebtn_left =0;
         }

         /*
          * invalidate()：刷新当前View,会导致onDraw方法的执行
          * 上面只是设置参数设置，下面必须将上面的参数传递到onDraw方法中，利用onDraw方法重新绘制，才能实现刷新的效果
          *
          */
         invalidate();

     }

 }

代码逻辑如下：

备注：

　　初始状态slideBtn 左边为0

　　　　　　　　　　

　　开的时候slideBtn left值为background.width-slidebtn.width

　　　　　　　　　　

与此同时，MainActivity.java，如下：

 package com.himi.togglebtn;

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

 public class MainActivity extends Activity {

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
     }

 }

（4）布署程序到模拟器上如下：

（5）实现开关的弹性滑动，上面的只能让开关左右切换，不能手机拖动滑动开关，用户体验不好，我们要优化。

MainActivity.java，修改为：

 package com.himi.togglebtn;

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

 public class MyToggleButton extends View implements OnClickListener {

     //作为背景的图片
     private Bitmap backgroundBitmap;
     //滑动的开关图片
     private Bitmap slidebtn;
     private Paint paint;

     //滑动按钮的左边界
     private float slidebtn_left;

     /**
      * 当前开关的状态
      * true :为开
      * false:为关
      */
     private boolean currState = false;

     /**
      * 我们在代码里面创建对象的时候，使用此构造方法
      * @param context
      */
     public MyToggleButton(Context context) {
         super(context);
         // TODO 自动生成的构造函数存根
     }

     /**
      * 在布局文件xml中声明的View,创建时候由系统自动调用此构造方法。
      * 倘若我们(使用全路径)在xml布局文件中,声明使用这个自定义的View,但是我们没有这个构造方法，就会报错(系统不能找到这个构造)
      * @param context
      * @param attrs
      */
     public MyToggleButton(Context context, AttributeSet attrs) {
         super(context, attrs);
         initView();
     }

     /**
      * 这个构造方法比上面的构造方法都了一个参数 defStyle，这个参数View默认的样式，这里可以重新这个构造，设置defStyle
      * 改变生成自定义的View的样式style
      * @param context
      * @param attrs
      * @param defStyle
      */
     public MyToggleButton(Context context, AttributeSet attrs, int defStyle) {
         super(context, attrs, defStyle);
         // TODO 自动生成的构造函数存根
     }

     //初始化
     private void initView() {
         //初始化图片
         backgroundBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.switch_background);
         slidebtn = BitmapFactory.decodeResource(getResources(), R.drawable.slide_button);
         //初始化画笔
         paint = new Paint();
         paint.setAntiAlias(true);//打开抗锯齿
         //添加Onclick事件监听
         setOnClickListener(this);
     }

     /*
      * View对象显示在屏幕上，有几个重要步骤：
      * 1. 构造方法 创建  对象.
      * 2. 测量View的大小.  onMeasure(int, int):系统调用的方法，获知View的大小
      * 3. 确定View的位置,View自身有一些建议权,View位置决定权在父View手中. onLayout(): ViewGroup调用
      * 4. 绘制View的内容           onDraw(canvas)
      *
      */

     /**
      *
      * 测量尺寸时候的回调方法
      */
     @Override
     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

         //super.onMeasure(widthMeasureSpec, heightMeasureSpec);
         /**
          * 设置当前View的大小
          * width ：当前View的宽度
          * height:当前view的高度(单位：像素)
          */
         setMeasuredDimension(backgroundBitmap.getWidth(), backgroundBitmap.getHeight());
     }

     /**
      * 自定义的View，作用不大
      * 确定位置的时候，系统调用的方法(我们不用关心),这里我们就不改写这个方法
      */
     @Override
     protected void onLayout(boolean changed, int left, int top, int right,
             int bottom) {
         // TODO 自动生成的方法存根
         super.onLayout(changed, left, top, right, bottom);
     }

     /**
      * 绘制当前View的内容
      */
     @Override
     protected void onDraw(Canvas canvas) {
         // TODO 自动生成的方法存根
         //super.onDraw(canvas);
         //绘制背景图
         /*
          * backgroundBitmap:要绘制的图片
          * left 图片的左边界
          * top 图片的上边界
          * paint 绘制图片要使用的画笔
          */
         canvas.drawBitmap(backgroundBitmap, 0, 0, paint);
         //绘制可滑动的按钮
         canvas.drawBitmap(slidebtn, slidebtn_left, 0, paint);
     }

     /**
      * 判断是否发生拖到
      * 如果拖动了，就不再响应Onclick事件
      * true：发生拖动
      * false：没有发生拖动
      */
     private boolean isDrag = false;

     /**
      * onClick事件在view.onTouchEvent中被解析
      * 系统对Onclick事件的解析，过于简陋，只要有down事件和up事件,系统即认为发生了click事件
      */
     public void onClick(View v) {
         /*
          * 如果没有拖动,才执行改变状态的动作
          */
         if(!isDrag) {
             currState = ! currState;
             flushState();//刷新当前开关状态
         }
     }

     /**
      * 刷新当前开关视图
      */
     private void flushState() {
         if(currState) {
             slidebtn_left = backgroundBitmap.getWidth()-slidebtn.getWidth();
         }else {
             slidebtn_left =0;
         }

         flushView();
     }

     public void flushView() {
         /**
          * 对slidebtn_left的值进行判断
          * 0 <= slidebtn_left <= backgroundwidth-slidebtnwidth(这样才能保证滑动的开关不会滑动越界)
          *
          */
         int maxLeft = backgroundBitmap.getWidth()-slidebtn.getWidth();//slidebtn左边界最大值
         //确保slidebtn_left >= 0
         slidebtn_left =(slidebtn_left>0)?slidebtn_left:0;
         //确保slidebtn_left <=maxLeft
         slidebtn_left = (slidebtn_left<maxLeft)?slidebtn_left:maxLeft;

         //告诉系统我需要刷新当前视图，只要当前视图可见状态，就会调用onDraw方法重新绘制,达到刷新视图的效果
         invalidate();
     }

     /**
      * down事件时的x值
      */
     private int firstX;
     /**
      * touch事件的上一个x值
      */
     private int lastX;

     @Override
     public boolean onTouchEvent(MotionEvent event) {
         super.onTouchEvent(event);
         switch(event.getAction()) {
         case MotionEvent.ACTION_DOWN:
             firstX = lastX = (int) event.getX();
             isDrag = false;
             break;
         case MotionEvent.ACTION_MOVE:
             //判断是否发生拖动
             if(Math.abs(event.getX()-lastX)>5) {
                 isDrag = true;
             }

             //计算手指在屏幕上移动的距离
             int dis = (int) (event.getX()-lastX);
             //将本次的位置设置给lastX
             lastX = (int) event.getX();
             //根据手指移动的距离，改变slidebtn_left的值
             slidebtn_left = slidebtn_left+dis;
             break;
         case MotionEvent.ACTION_UP:

             //在发生拖动的情况下，根据最后的位置，判断当前的开关的状态
             if(isDrag){
                 int maxLeft = backgroundBitmap.getWidth()-slidebtn.getWidth();//slidebtn左边界最大值
                 /**
                  * 根据slidebtn_left判断，当前应该是什么状态
                  *
                  */
                 if(slidebtn_left>maxLeft/2) {//应为打开状态
                     currState = true;
                 }else {
                     currState = false;
                 }
                 flushState();
             }

             break;

         }
         flushView();
         return  true;
     }

 }

代码逻辑如下：

布署程序到模拟器上，如下：