android自定义控件(1)-自定义控件属性

 

那么还是针对我们之前写的自定义控件:开关按钮为例来说,在之前的基础上,我们来看看有哪些属性是可以自定义的:按钮的背景图片,按钮的滑块图片,和按钮的状态(是开还是关),实际上都应该是可以在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);
    }

}

最终效果:

 

posted @ 2016-12-06 10:54  夜行过客  阅读(2613)  评论(0编辑  收藏  举报