原创作品,转载请注明出处: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代码如下:
- <?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代码如下:
- 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代码如下:
- <?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的代码如下:
- 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