Android自定义控件系列二：自定义开关按钮（一）

来源：互联网发布：新网数码域名管理编辑：程序博客网时间：2024/05/04 06:02

这一次我们将会实现一个完整纯粹的自定义控件，而不是像之前的组合控件一样，拿系统的控件来实现；计划分为三部分：自定义控件的基本部分，自定义控件的触摸事件的处理和自定义控件的自定义属性；

下面就开始第一部分的编写，本次以一个定义的开关按钮为例，下面就开始吧：

先看看效果，一个点击开关按钮，实现点击切换开关状态：

为了能够讲解清晰，还是来一些基本的介绍。

首先需要明确的就是自定义控件还是继承自View这个类，Google在View这个类里面提供了相当多的方法供我们使用，使用这些方法我们可以实现相当多的效果和功能，在这里需要用到几个主要的方法；

自定义控件的步骤、用到的主要方法：

1、首先需要定义一个类，继承自View；对于继承View的类，会需要实现至少一个构造方法；实际上这里一共有三个构造方法：

public View (Context context)是在java代码创建视图的时候被调用(使用new的方式)，如果是从xml填充的视图，就不会调用这个

public View (Context context, AttributeSet attrs)这个是在xml创建但是没有指定style的时候被调用

public View (Context context, AttributeSet attrs, int defStyle)这个是在第二个基础上添加style的时候被调用的

所以对于这里来说，如果不使用style，我们重点关注第二个构造方法即可

2、对于任何一个控件来说，它需要显示在我们的界面上，那么肯定需要定义它的大小；

在这里Google提供了一个方法：protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)；我们去看这个方法的内部，实际上是调用了protected final void setMeasuredDimension(int measuredWidth, int measuredHeight);这个方法，其中第一个参数是view的宽，第二个参数是view的高，这样我们就可以设置view的宽高了，但是要注意，这样设置的单位都是像素

3、对于一个需要显示的控件来说，我们往往还需要确定它的位置：

这就要求重写onLayout方法；但是实际上这个方法在自定义view的时候使用的不多，原因是因为对于位置来说，控件只有建议权而没有决定权，决定权一般在父控件那里。

4、对于一个控件，需要显示，我们当然需要将它绘制出来，这里就需要重写onDraw方法，来将这个控件绘制出来

5、当控件状态改变的时候，我们很可能需要刷新view的显示状态，这时候就需要调用invalidate()方法，这个方法实际上会重新调用onDraw方法来重绘控件

6、在定义控件的过程中，如果需要对view设置点击事件，可以直接使用setOnClickListener方法，而不需要写view.setOnClickListener；

7、在布局文件中将这个自定义控件定义出来，注意名字要使用全类名；而且，由于是继承自view控件，所以在xml文件中如果是view本身的属性都可以直接使用，比如：android:layout_width等等

这里比较关键的地方就在于这个onDraw方法，我们一起来看一下：

[java] view plaincopy
/** 
     * 画view的方法,绘制当前view的内容 
     */  
    @Override  
    protected void onDraw(Canvas canvas) {  
        // super.onDraw(canvas);  
  
  
        Paint paint = new Paint();  
        // 打开抗锯齿  
        paint.setAntiAlias(true);  
  
  
        // 画背景  
        canvas.drawBitmap(backgroundBitmap, 0, 0, paint);  
        // 画滑块  
        canvas.drawBitmap(slideButton, slideBtn_left, 0, paint);  
    }  

onDraw方法传入的参数是一个Canvas画布对象，这个实际上跟Java中的差不太多，我们要在画布上画画也需要一个画笔，我们这里也将其初始化出来Paint paint = new Paint()，同时设置了一个抗锯齿效果paint.setAntiAlias(true)，然后调用drawBitmap的方法，先后绘制了开关的背景和开关的滑块，分别入下图：

这里要注意的一点就是，drawBitmap(Bitmap bitmap, float left, float top, Paint paint)方法中间的两个float类型的参数，分别代表绘制图形的左上角的x和y的坐标（原点设置在左上角），所以这里如果我们个绘制坐标都传入0,0，那么开关会处在一个关的状态，这里，我们对于滑块使用了一个变量slideBtn_left来设置其位置，那么对于关闭状态，slideBtn_left的值就应该为0，对于开启状态，slideBtn_left的值就应该是backgroundBitmap(背景)的宽度减去slideButton(滑块)的宽度；

那么这样一来，机制就比较清楚了，我们只需要在控件上设置一个点击事件，同时设置一个boolean变量代表开关的状态，当点击的时候，切换这个boolean类型的变量为true或者false，同时变化slideButton的值为0或者backgroundBitmap.getWidth()-slideButton.getWidth()，然后再调用invalidate()方法刷新控件，就可以实现基本的开关功能了

下面来看具体的代码，注解比较详细：

自定义控件的类MyToggleButton.java，继承自View：

[java] view plaincopy
package com.example.togglebutton.ui;  
  
import com.example.togglebutton.R;  
  
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;  
  
/* 
 * 自定义view的几个步骤： 
 * 1、首先需要写一个类来继承自View 
 * 2、需要得到view的对象，那么需要重写构造方法，其中一参的构造方法用于new，二参的构造方法用于xml布局文件使用，三参的构造方法可以传入一个样式 
 * 3、需要设置view的大小，那么需要重写onMeasure方法 
 * 4、需要设置view的位置，那么需要重写onLayout方法，但是这个方法在自定义view的时候用的不多，原因主要在于view的位置主要是由父控件来决定 
 * 5、需要绘制出所需要显示的view，那么需要重写onDraw方法 
 * 6、当控件状态改变的时候，需要重绘view，那么调用invalidate();方法，这个方法实际上会重新调用onDraw方法 
 * 7、在这其中，如果需要对view设置点击事件，可以直接调用setOnClickListener方法 
 */  
  
public class MyToggleButton extends View {  
  
    /** 
     * 开关按钮的背景 
     */  
    private Bitmap backgroundBitmap;  
    /** 
     * 开关按钮的滑动部分 
     */  
    private Bitmap slideButton;  
    /** 
     * 滑动按钮的左边界 
     */  
    private float slideBtn_left;  
    /** 
     * 当前开关的状态 
     */  
    private boolean currentState = false;  
  
    /** 
     * 在代码里面创建对象的时候，使用此构造方法 
     *  
     * @param context 
     */  
    public MyToggleButton(Context context) {  
        super(context);  
    }  
  
    /** 
     * 在布局文件中声明的view，创建时由系统自动调用 
     *  
     * @param context 
     * @param attrs 
     */  
    public MyToggleButton(Context context, AttributeSet attrs) {  
        super(context, attrs);  
        initView();  
    }  
  
    /** 
     * 测量尺寸时的回调方法 
     */  
    @Override  
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
        // super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
        // 设置当前view的大小 width:view的宽，单位都是像素值 heigth:view的高，单位都是像素值  
        setMeasuredDimension(backgroundBitmap.getWidth(),  
                backgroundBitmap.getHeight());  
    }  
  
    // 这个方法对于自定义view的时候帮助不大，因为view的位置一般由父组件来决定的  
    @Override  
    protected void onLayout(boolean changed, int left, int top, int right,  
            int bottom) {  
        super.onLayout(changed, left, top, right, bottom);  
    }  
  
    /** 
     * 画view的方法,绘制当前view的内容 
     */  
    @Override  
    protected void onDraw(Canvas canvas) {  
        // super.onDraw(canvas);  
  
        Paint paint = new Paint();  
        // 打开抗锯齿  
        paint.setAntiAlias(true);  
  
        // 画背景  
        canvas.drawBitmap(backgroundBitmap, 0, 0, paint);  
        // 画滑块  
        canvas.drawBitmap(slideButton, slideBtn_left, 0, paint);  
    }  
  
    /** 
     * 初始化view 
     */  
    private void initView() {  
        backgroundBitmap = BitmapFactory.decodeResource(getResources(),  
                R.drawable.switch_background);  
        slideButton = BitmapFactory.decodeResource(getResources(),  
                R.drawable.slide_button);  
  
        /* 
         * 点击事件 
         */  
        setOnClickListener(new OnClickListener() {  
  
            @Override  
            public void onClick(View v) {  
  
                currentState = !currentState;  
                flushState();  
                flushView();  
            }  
        });  
    }  
  
    /** 
     * 刷新视图 
     */  
    protected void flushView() {  
        // 刷新当前view会导致ondraw方法的执行  
        invalidate();  
    }  
  
    /** 
     * 刷新当前的状态 
     */  
    protected void flushState() {  
        if (currentState) {  
            slideBtn_left = backgroundBitmap.getWidth()  
                    - slideButton.getWidth();  
        } else {  
            slideBtn_left = 0;  
        }  
    }  
  
}  

在布局文件中将其定义出来：

[html] view plaincopy
<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="${relativePackage}.${activityClass}" >  
  
  
    <com.example.togglebutton.ui.MyToggleButton  
        android:id="@+id/my_toggle_btn"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_centerInParent="true" />  
  
  
</RelativeLayout>  

在这里由于没有写任何点击触发业务的逻辑，只是一个单纯的控件，所以在MainActivity里面没有加入多的代码：

[java] view plaincopy
package com.example.togglebutton;  
  
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);  
  
    }  
}  

至此一个自定义的开关按钮就完成了，后面两篇将会介绍如何在上面实现 点击拖动开关的效果 和如何实现自定义属性，谢谢支持！

0 0