Android自定义控件——TabButton

来源：互联网发布：买家怎么加入淘宝联盟编辑：程序博客网时间：2024/06/11 02:40

原创作品，转载请注明出处：http://blog.csdn.net/esun6/article/details/6893813

前段时间，看到携程网的Android客户端有个自定义的控件，效果很好，于是就研究了下，最后弄出来了。

这个控件有一组按钮，点击其中一个，会改变选中项的背景和文字颜色，控件下方就可以显示相应的内容，姑且先把这个控件叫做TabButton

先上效果图：

下面开始实现过程：

1. 配置attrs.xml文件

这个自定义的控件需要有些自定义的属性，就像系统Button的id属性，android:id="@+id/btn"，而自定义属性需要在res/values/attrs.xml中配置，没有这个文件就新建一个，如果有，直接在里面添加，attrs.xml代码如下：

[html] view plaincopy
<?xml version="1.0" encoding="utf-8"?>  
<resources>  
    <declare-styleable name="TabButton">  
        <attr name="normal_bg_res" format="reference" />  
        <attr name="selected_bg_res" format="reference" />  
    </declare-styleable>  
</resources>  

其中，declare-styleable标签的name属性值为自定义控件的名字，

子标签attr 的name表示这个控件的自定义属性，这个属性等会会在布局文件中用到；

format表示这个属性的取值类型，可以是integer，float，reference等，比如系统控件的id属性值类型是reference（引用类型，形如"@+id/btn"或者"@drawable/png1"），这些系统控件的属性值定义在...\android-sdk-windows\platforms\android-1.5\data\res\values\attrs.xml文件中，这些定义保证了属性值类型如果错误，就无法通过编译，比如android:id="1",ide就会给出错误信息，但是，andriod:id="@drawable/png1"则不会报错，因为这个值属于reference类型，当然，这样的赋值是无意义的；

在这里，我们定义了两个属性：normal_bg_res（普通背景资源）和selected_bg_res（被选中时的背景资源），类型都是reference

2. 通过继承系统控件Button来实现TabButton

一般来说，自定义的控件都从View或者View的子类继承而来，这里的TabButton跟Button比较相似，于是我选择从Button继承

TabButton.java代码如下：

[java] view plaincopy
package com.sun.test.ui;  
  
import android.content.Context;  
import android.content.res.TypedArray;  
import android.graphics.Color;  
import android.util.AttributeSet;  
import android.widget.Button;  
  
public class TabButton extends Button {  
    private int normal_bg_res;  
    private int selected_bg_res;  
  
    public TabButton(Context context) {  
        super(context);  
    }  
  
    public TabButton(Context context, AttributeSet attrs) {  
        super(context, attrs);  
          
        TypedArray typeArray = context.obtainStyledAttributes(attrs, R.styleable.TabButton);  
        normal_bg_res = typeArray.getResourceId(R.styleable.TabButton_normal_bg_res, 0);  
        selected_bg_res = typeArray.getResourceId(R.styleable.TabButton_selected_bg_res, 0);  
          
        typeArray.recycle();  
    }  
      
    /* 
     * 这里本来是准备自定义一个方法，以便在Activity中调用， 
     * 但是写完发现Button的父类TextView中已经有了同名方法，于是自定义变成了覆盖，不过无所谓，不影响效果 
     */  
    public void setSelected(boolean selected) {  
        if (selected) {  
            setBackgroundResource(selected_bg_res);  
            setTextColor(Color.WHITE);  
        } else {  
            setBackgroundResource(normal_bg_res);  
            setTextColor(Color.GRAY);  
        }  
    }  
      
}  

其中，需要解释的是第二个构造方法中的TypedArray部分。

ypedArray可以看作是一个Array，通过context.obtainStyledAttributes就可以将TabButton的属性信息保存到Array中，参数attrs可以理解为attrs.xml文件，而R.styleable.TabButton是在attrs.xml保存后由ADT自动生成的，代表了attrs.xml文件中declare-styleable的name值，也就是自定义的控件名，

这个方法可以简单的理解为：加载attrs.xml文件中的TabButton部分，以获取TabButton的属性信息；

然后通过typeArray.getResourceId可以得到我们在layout布局文件中赋予的值，此方法的第一个参数代表属性名，这个R.styleable.TabButton_normal_bg_res也是ADT直接生成，是在TabButton后添加了加下划线和属性名，第二个参数代表这个属性的默认值；

得到了normal_bg_res和selected_bg_res的值之后，我们就可以在下面的方法setSelected中使用了，setSelected方法根据选中状态来设置不同的背景图片和文字颜色

3. 在布局文件main.xml中加入TabButton

main.xml代码如下：

[html] view plaincopy
<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout   
    xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:custom="http://schemas.android.com/apk/res/com.sun.test.ui"  
      
    android:orientation="vertical"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"  
    >  
    <RelativeLayout android:gravity="center"   
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content"  
        android:layout_marginTop="20dp"  
        android:layout_marginLeft="5dp"  
        android:layout_marginRight="5dp">  
        <com.sun.test.ui.TabButton   
            android:id="@+id/btn_left"  
            android:layout_width="100dp"   
            android:layout_height="35dp"   
            android:layout_centerVertical="true"  
            android:text="左"  
            custom:normal_bg_res="@drawable/btn_left"  
            custom:selected_bg_res="@drawable/btn_left_selected"/>  
        <com.sun.test.ui.TabButton   
            android:id="@+id/btn_center"  
            android:layout_width="100dp"   
            android:layout_height="35dp"   
            android:layout_centerVertical="true"  
            android:layout_toRightOf="@id/btn_left"  
            android:text="中"  
            custom:normal_bg_res="@drawable/btn_center"  
            custom:selected_bg_res="@drawable/btn_center_selected"/>  
        <com.sun.test.ui.TabButton   
            android:id="@+id/btn_right"  
            android:layout_width="100dp"   
            android:layout_height="35dp"   
            android:layout_centerVertical="true"  
            android:layout_toRightOf="@id/btn_center"  
            android:text="右"  
            custom:normal_bg_res="@drawable/btn_right"  
            custom:selected_bg_res="@drawable/btn_right_selected"/>  
    </RelativeLayout>  
</LinearLayout>  

需要注意的是这行：xmlns:custom="http://schemas.android.com/apk/res/com.sun.test.ui"，表示自定义的命名空间，而android则是系统的命名空间，custom是我自己起的名字，这个名字可以随便起，它的值为"http://schemas.android.com/apk/res/<R类所在的程序包名>"；

在这个布局文件中，我们定义了3个TabButton控件，控件的最后两个属性用的就是我们自定义的命名空间：custom:normal_bg_res="@drawable/btn_left"和custom:selected_bg_res="@drawable/btn_left_selected"，属性名就是在attrs.xml中定义的内容，值的类型就是reference；

4. 在Activity中实现TabButton的点击事件

TestActivity的代码如下：

[java] view plaincopy
package com.sun.test.ui;  
  
import android.app.Activity;  
import android.os.Bundle;  
import android.view.View;  
import android.view.View.OnClickListener;  
  
public class TestActivity extends Activity implements OnClickListener {  
    private TabButton left;  
    private TabButton center;  
    private TabButton right;  
  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.main);  
  
        left = (TabButton) findViewById(R.id.btn_left);  
        left.setOnClickListener(this);  
  
        center = (TabButton) findViewById(R.id.btn_center);  
        center.setOnClickListener(this);  
  
        right = (TabButton) findViewById(R.id.btn_right);  
        right.setOnClickListener(this);  
  
        resetState(R.id.btn_left);  
    }  
  
    public void onClick(View v) {  
        resetState(v.getId());  
    }  
  
    private void resetState(int id) {  
        // 将三个按钮背景设置为未选中  
        left.setSelected(false);  
        center.setSelected(false);  
        right.setSelected(false);  
          
        // 将点击的按钮背景设置为已选中  
        switch (id) {  
        case R.id.btn_left:  
            left.setSelected(true);  
            break;  
        case R.id.btn_center:  
            center.setSelected(true);  
            break;  
        case R.id.btn_right:  
            right.setSelected(true);  
            break;  
        }  
    }  
}  

在这个resetState方法中，处理了TabButton的点击事件，以保证在同一时间内只能有一个按钮处于选中状态；

OK，大功告成！

工程源代码下载：http://download.csdn.net/detail/esun6/3705183

0 0