自定义控件：滑动开关按钮（自定义属性）

     

【主要步骤】

1、自定义类MyToggleButton继承自view。

2、重写onMeasure方法，指定控件大小。

3、重写onDraw方法，绘制控件内容。

4、重写onTouchEvent方法，对touch事件进行解析。

【为新控件添加自定义的属性】

1、在attrs.xml文件中声明属性，有属性名:name和格式:format=如：

<declare-styleable name="MyToggleBtn">

        <attr name="curr_state" format="boolean" />

</declare-styleable>

2、在布局文件中使用新属性，使用之前必须先声明命名空间，如：

xmlns:heihei=http://schemas.android.com/apk/res/com.example.testdemo

说明：xmlns是XML name space的缩写；

         heihei 可以任意写；

         http://schemas.android.com/apk/res/   此为android固定格式；

         com.example.testdemo   此应用的包名，如manifest配置文件中一致。

3、在自定义view的构造方法当中，通过解析AttributeSet对象，获得所需要的属性值。

  

<?xml version="1.0" encoding="utf-8"?>
<!-- res/values/attrs.xml -->
<resources>
    
    <!-- 声名属性集的名称 -->
    <declare-styleable name="MyToggleBtn">

        <!-- 声名一个属性  name是my_background   类型为 引用类型      引用资源ID -->
        <attr name="my_background" format="reference" />

        <!-- 声名一个属性  name是my_slide_btn   类型为 引用类型      引用资源ID -->
        <attr name="my_slide_btn" format="reference" />

        <!-- 声名一个属性  name是curr_state   类型为 boolean 类型-->
        <attr name="curr_state" format="boolean" />
        
    </declare-styleable>
    
</resources>

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:heihei="http://schemas.android.com/apk/res/com.example.testdemo"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <com.example.testdemo.MyToggleButton
        android:id="@+id/my_toggle_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        heihei:my_background="@drawable/switch_background"   开关图片
        heihei:my_slide_btn="@drawable/slide_button"  灰色图片
        heihei:curr_state="false"
        testAttrs="@drawable/ic_launcher" />
</RelativeLayout>

package com.example.testdemo;

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

public class MyToggleButton extends View implements OnClickListener {
    public static final String TAG = "MyToggleButton";

    // 做为背景的图片
    private Bitmap backgroundBitmap;
    // 可以滑动的图片
    private Bitmap slideBtn;
    private Paint paint;
    // 滑动按钮的左边届
    private float slideBtn_left;
    // 背景图的资源ID
    private int backgroundId;
    // 滑动图片的资源ID
    private int slideBtnId; 
    // 当前开关的状态 true 为开
    private boolean currState = false;
    // 判断是否发生拖动， 如果拖动了，就不再响应 onclick 事件
    private boolean isDrag = false;
    // down 事件时的x值
    private int firstX;
    // touch 事件的上一个x值
    private int lastX;

    // 在代码里面创建对象的时候，使用此构造方法
    public MyToggleButton(Context context) {
        super(context);
    }

    /**
     * 在布局文件中声名的view，创建时由系统自动调用。
     * 
     * @param context
     *            上下文对象
     * @param attrs
     *            属性集
     */
    public MyToggleButton(Context context, AttributeSet attrs) {
        super(context, attrs);
       //-------------------
        int count = attrs.getAttributeCount();
        for (int i = 0; i < count; i++) {
            String name = attrs.getAttributeName(i);
            String value = attrs.getAttributeValue(i);
            Log.i(TAG, "name:" + name+ "value:" + value);
        }
       //-------------------

        // 无命名空间测试
        String testAttrs = attrs.getAttributeValue(null, "testAttrs");

        System.out.println("testAttrs===:" + testAttrs);

        // 获得自定义的属性
        // (比如)第一个参数：原材料，第二个参数：图纸。
        // TypedArray相当于是一个加工厂，把原材料加工成图纸上面说的。
        TypedArray ta = context.obtainStyledAttributes(attrs,
                R.styleable.MyToggleBtn);

        int N = ta.getIndexCount();
        for (int i = 0; i < N; i++) {
            // 获得某个属性的ID值
            int itemId = ta.getIndex(i);
            switch (itemId) {
            case R.styleable.MyToggleBtn_curr_state:
                currState = ta.getBoolean(itemId, false);

                break;
            case R.styleable.MyToggleBtn_my_background:
                backgroundId = ta.getResourceId(itemId, -1);
                if (backgroundId == -1) {
                    throw new RuntimeException("请设置背景图片");
                }
                backgroundBitmap = BitmapFactory.decodeResource(getResources(),
                        backgroundId);

                break;
            case R.styleable.MyToggleBtn_my_slide_btn:
                slideBtnId = ta.getResourceId(itemId, -1);
                slideBtn = BitmapFactory.decodeResource(getResources(),
                        slideBtnId);

                break;

            default:
                break;
            }

        }
        initView();
    }

    /**
     * 初始化
     */
    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);

        flushState();
    }

    /*
     * view 对象显示的屏幕上，有几个重要步骤： 
     * 1、构造方法 创建 对象。 
     * 2、测量view的大小。 onMeasure(int,int);
     * 3、确定view的位置 ，view自身有一些建议权，决定权在 父view手中。 onLayout(); 
     * 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) {
    // super.onLayout(changed, left, top, right, bottom);
    // }

    @Override
    /**
     * 绘制当前view的内容
     */
    protected void onDraw(Canvas canvas) {
        // super.onDraw(canvas);

        // 绘制 背景
        /*
         * backgroundBitmap 要绘制的图片 left 图片的左边届 top 
         * 图片的上边届 paint 绘制图片要使用的画笔
         */
        canvas.drawBitmap(backgroundBitmap, 0, 0, paint);

        // 绘制 可滑动的按钮
        canvas.drawBitmap(slideBtn, slideBtn_left, 0, paint);
    }

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

    @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() - firstX) > 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) {
                // slideBtn左边届最大值
                int maxLeft = backgroundBitmap.getWidth() - slideBtn.getWidth();
                // 根据 slideBtn_left 判断，当前应是什么状态
                // 此时应为 打开的状态
                if (slideBtn_left > maxLeft / 2) {
                    currState = true;
                } else {
                    currState = false;
                }

                flushState();
            }
            break;
        }

        flushView();

        return true;
    }

    /**
     * 刷新当前状态
     */
    private void flushState() {
        if (currState) {
            slideBtn_left = backgroundBitmap.getWidth() - slideBtn.getWidth();
        } else {
            slideBtn_left = 0;
        }

        flushView();
    }

    /**
     * 刷新当前视力
     */
    private void flushView() {
        /*
         * 对 slideBtn_left 的值进行判断 ，确保其在合理的位置 即 0<=slideBtn_left <= maxLeft
         * slideBtn左边届最大值
         */
        int maxLeft = backgroundBitmap.getWidth() - slideBtn.getWidth();

        // 确保 slideBtn_left >= 0
        slideBtn_left = (slideBtn_left > 0) ? slideBtn_left : 0;

        // 确保 slideBtn_left <=maxLeft
        slideBtn_left = (slideBtn_left < maxLeft) ? slideBtn_left : maxLeft;

        // 刷新当前视图 导致 执行onDraw执行
        invalidate();
    }

}

DEMO下载地址：http://pan.baidu.com/s/1jGsrvM2