android自定义控件(3)-自定义当前按钮属性

那么还是针对我们之前写的自定义控件：开关按钮为例来说，在之前的基础上，我们来看看有哪些属性是可以自定义的：按钮的背景图片，按钮的滑块图片，和按钮的状态（是开还是关），实际上都应该是可以在xml文件中直接定义的。

不妨先来看看之前我们在代码中不依靠自定义属性的时候，是如何写的，我们可以在initView方法中找到这样几行代码：

backgroundBitmap = BitmapFactory.decodeResource(getResources(),
         R.drawable.switch_background);

slideButton = BitmapFactory.decodeResource(getResources(),
         R.drawable.slide_button);

currentState=false;

会发现，我们是直接引用的资源文件，而不是在布局xml文件中使用的定义属性的方式，下面我们一步步来看看要怎么样做才可以定义使用上自定义属性：

第一步：在res/values文件夹中添加attrs.xml文件

实际上，这个文件名并不一定要写成attrs.xml，但是按照android源码的写法并且也便于别人查看代码的时候明确这个文件的用意，还是写成attrs.xml。

下面要如何写呢，我们还是可以参看一下安卓的源码：打开源码文件夹下\frameworks\base\core\res\res\values\attrs.xml文件,我们会发现这里面定义了很多attr的标签，里面不乏一些我们常见的属性:

<attr name="layout_width" format="dimension">

等等，在layout_width这个标签上面我们还可以发现一个

<declare-styleable name="ViewGroup_Layout">

declare-styleable标签的里包含了很多根ViewGruop相关的属性。

而在这个attrs.xml文件的最外面，是一个<resources>的标签

到这里，我们基本上就明白了一个attrs.xml文件的结构了：

首先要一个<resources>的父标签，然后里面可以包含一个declare-styleable的标签，在这个标签里面我们再定义出三个attr 标签，分别代表我们需要定义的三个属性：按钮的背景图片，按钮的滑块图片，和按钮的状态；那么剩下的一个问题就是attr标签中的format代表什么意思。实际上format代表的是这条属性的值的类型：

1.reference:参考指定Theme中资源ID,这个类型意思就是你传的值可以是引用资源  
     2.string:字符串,如果你想别人既能直接写值也可以用类似"@string/test"引用资源的方式,可以写成format="string|reference"  
     3.Color：颜色  
     4.boolean：布尔值  
     5.dimension：尺寸值  
     6.float：浮点型  
     7.integer：整型  
     8.fraction：百分数  
     9.enum：枚举 ,如果你提供的属性只能让别人选择,不能随便传入,就可以写成这样  
        <attr name="language">  
                <enum name="china" value="1"/>  
                <enum name="English" value="2"/>  
        </attr>

10.flag：位或运算

declare-styleable子元素:  
  
定义一个styleable对象,每个styleable对象就是一组attr属性的集合 注意:这里的name属性并不是一定要和自定义类名相同,只是为了好区分对应类的属性而已  
  
  
注意:上面的属性资源文件定义了该属性之后，至于到底是哪个自定义View组件中来使用该属性,该属性到底能发挥什么作用, 就不归该属性资源文件管了,也就是说这个属性资源文件是个公共的,大家都可以用，但是为了方便管理，一般都是一个自定义View里的属性写成一个declare-styleable集合.属性资源所定义的属性到底可以返回什么作用,取决于自定义组件的代码实现

在这里，我们的attrs.xml文件写成下面这样：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="DJSwitch">

        <attr name="current_state" format="boolean"/>
        <attr name="backgroundImage" format="reference"/>
        <attr name="slideImage" format="reference"/>

    </declare-styleable>

</resources>

第二步：在自定义控件的类中拿到attrs.xml文件中定义的属性的对应的值，然后赋值给我们需要设置的变量，在这里就是 背景图片，滑块图片和开关状态 这三个值。

要如何做呢？我们先将上面给出的

backgroundBitmap = BitmapFactory.decodeResource(getResources(),
         R.drawable.switch_background);

slideButton = BitmapFactory.decodeResource(getResources(),
         R.drawable.slide_button);

currentState=false;

这三句注释掉，然后换成下面的代码

/**
     * 初始化View
     */
    private void initView(Context context, AttributeSet attrs) {
        /*
         * 从资源库中加载一个image对象
         * ios   UIImage *backgroundImage = [UIImage imageNamed:@"app_switch_bg"];
         * 也就是说,android里面的图像实体bitmap,可以当成是ios中的UIImage
         * 区别在于,ios中UIImage可以通过类方法来获取，android里面则是通过工厂方法来实现
         */
        /*switch_bg_img = BitmapFactory.decodeResource(getResources(), R.drawable.app_switch_bg);
        switch_btn_img = BitmapFactory.decodeResource(getResources(), R.drawable.app_switch_btn);
        */

        // 可以把这个TypedArray看成是一个包含了DJSwitch属性集合的HashMap
        TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.DJSwitch);
        // 获取该集合中共有多少个index
        int indexCount = typedArray.getIndexCount();

        for (int i = 0; i < indexCount; i++) {
            int id = typedArray.getIndex(i);
            switch (id) {
            case R.styleable.DJSwitch_backgroundImage:
                switch_bg_img =  ((BitmapDrawable)typedArray.getDrawable(id)).getBitmap();
                break;
            case R.styleable.DJSwitch_slideImage:
                switch_btn_img = ((BitmapDrawable)typedArray.getDrawable(id)).getBitmap();
                break;
            case R.styleable.DJSwitch_current_state:
                currentState = typedArray.getBoolean(id, false);
                break;
            default:
                break;
            }
        }

        switchBtnMaxSlideDistance = switch_bg_img.getWidth() - switch_btn_img.getWidth();
        if (currentState) {
            switchBtnX = switchBtnMaxSlideDistance;
        } else {
            switchBtnX = 0;
        }
        typedArray.recycle();
        // 添加监听
        setOnClickListener(new MyOnSwitchClickListener()); // 可以理解为ios中的addTarget方法，或addGestureRecognizer
    }

注释上面已经写得很清楚了，TypedArray会把XML文件所引用的自定义属性和值保存在一个Map表中，因此我们可以根据该Map的键(即：属性的ID)取出该属性对应的值。

第三步：在布局文件中使用自定义属性，并设置属性值：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:alex="http://schemas.android.com/apk/res/com.example.test"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <!-- 为了清楚的看见该View的大小及位置，给其定义背景 -->
    <com.example.test.view.DJSwitch
           android:id="@+id/sw_switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ff0000"
        android:layout_centerInParent="true"
        alex:current_state="false"
        alex:backgroundImage="@drawable/app_switch_bg"
        alex:slideImage="@drawable/app_switch_btn"
        />

</RelativeLayout>

在上面的代码，我们发现我们写成了alex:这样的标头，这个实际上是命名空间的简写(默认是app)，所以我们必须要添加一个命名空间，参看一下Android的命名空间是如何写的：

xmlns:android="http://schemas.android.com/apk/res/android"

在这里xmlns:android里面的android，是可以变化的，这里我们就改为alex，然后对于http://schemas.android.com/apk/res/android这个部分，最后的android也要改的，这里必须改成整个应用的包名，我们可以去清单文件中查找，这里是com.example.togglebutton，所以整个写下来就是：xmlns:alex="http://schemas.android.com/apk/res/com.example.test"

于是这里一个完整的布局文件写为：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:alex="http://schemas.android.com/apk/res/com.example.test"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <!-- 为了清楚的看见该View的大小及位置，给其定义背景 -->
    <com.example.test.view.DJSwitch
           android:id="@+id/sw_switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ff0000"
        android:layout_centerInParent="true"
        alex:current_state="false"
        alex:backgroundImage="@drawable/app_switch_bg"
        alex:slideImage="@drawable/app_switch_btn"
        />

</RelativeLayout>

至此，在XML自定义按钮属性的基本步骤已经全部完毕了。不过如果我们想同时在代码中设置该按钮的属性该如何做呢？，很简单，在代码中为这三个自定义的按钮属性分别建立一个成员变量。

DJSwitch.java

/**
     * 标识当前按钮状态
     * 类似于iOS中.h文件里声明property 为BOOL类型的属性
     */
    private boolean currentState;
    /** 滑动按钮背景 */
    private Bitmap switch_bg_img;
    /** 滑动按钮滑块 */
    private Bitmap switch_btn_img;

同时提供三个接口方法

/**
     * 设置当前按钮开关状态
     * @param isOpen true: 开,false: 关
     */
    public void setCurrentSwitchState(boolean isOpen) {
        this.currentState = isOpen;
        if (isOpen) {
            switchBtnX = switchBtnMaxSlideDistance;
        } else {
            switchBtnX = 0;
        }
        invalidate();
    }

    /**
     * 设置当前按钮背景图片
     * @param resId 资源ID
     */
    public void setBackgroundImage(int resId) {
        switch_bg_img = BitmapFactory.decodeResource(getResources(), resId);
        // 因背景图片更改,须同时更新滑块最大移动距离
        switchBtnMaxSlideDistance = switch_bg_img.getWidth() - switch_btn_img.getWidth();
        invalidate(); // 相当于iOS中setNeedDisplay方法
    }

    /**
     * 设置滑动按钮图片
     * @param resId 资源ID
     */
    public void setSlideBtnImage(int resId) {
        switch_btn_img = BitmapFactory.decodeResource(getResources(), resId);
        switchBtnMaxSlideDistance = switch_bg_img.getWidth() - switch_btn_img.getWidth();
        invalidate();
    }

MainActivity.java

package com.example.test;

import com.example.test.view.DJSwitch;

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

public class MainActivity extends Activity {

    private DJSwitch sw_switch;

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

    private void initUIView() {
        sw_switch = (DJSwitch) findViewById(R.id.sw_switch);
        sw_switch.setCurrentSwitchState(true);
        sw_switch.setSlideBtnImage(R.drawable.ic_launcher);
    }

}

最终效果：