Android自定义控件——TabButton-程序员宅基地

原创作品，转载请注明出处：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 plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.     <declare-styleable name="TabButton">  
  4.         <attr name="normal_bg_res" format="reference" />  
  5.         <attr name="selected_bg_res" format="reference" />  
  6.     </declare-styleable>  
  7. </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 plain copy
  1. package com.sun.test.ui;  
  2.   
  3. import android.content.Context;  
  4. import android.content.res.TypedArray;  
  5. import android.graphics.Color;  
  6. import android.util.AttributeSet;  
  7. import android.widget.Button;  
  8.   
  9. public class TabButton extends Button {  
  10.     private int normal_bg_res;  
  11.     private int selected_bg_res;  
  12.   
  13.     public TabButton(Context context) {  
  14.         super(context);  
  15.     }  
  16.   
  17.     public TabButton(Context context, AttributeSet attrs) {  
  18.         super(context, attrs);  
  19.           
  20.         TypedArray typeArray = context.obtainStyledAttributes(attrs, R.styleable.TabButton);  
  21.         normal_bg_res = typeArray.getResourceId(R.styleable.TabButton_normal_bg_res, 0);  
  22.         selected_bg_res = typeArray.getResourceId(R.styleable.TabButton_selected_bg_res, 0);  
  23.           
  24.         typeArray.recycle();  
  25.     }  
  26.       
  27.     /* 
  28.      * 这里本来是准备自定义一个方法，以便在Activity中调用， 
  29.      * 但是写完发现Button的父类TextView中已经有了同名方法，于是自定义变成了覆盖，不过无所谓，不影响效果 
  30.      */  
  31.     public void setSelected(boolean selected) {  
  32.         if (selected) {  
  33.             setBackgroundResource(selected_bg_res);  
  34.             setTextColor(Color.WHITE);  
  35.         } else {  
  36.             setBackgroundResource(normal_bg_res);  
  37.             setTextColor(Color.GRAY);  
  38.         }  
  39.     }  
  40.       
  41. }  

其中，需要解释的是第二个构造方法中的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 plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout   
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     xmlns:custom="http://schemas.android.com/apk/res/com.sun.test.ui"  
  5.       
  6.     android:orientation="vertical"  
  7.     android:layout_width="fill_parent"  
  8.     android:layout_height="fill_parent"  
  9.     >  
  10.     <RelativeLayout android:gravity="center"   
  11.         android:layout_width="fill_parent"  
  12.         android:layout_height="wrap_content"  
  13.         android:layout_marginTop="20dp"  
  14.         android:layout_marginLeft="5dp"  
  15.         android:layout_marginRight="5dp">  
  16.         <com.sun.test.ui.TabButton   
  17.             android:id="@+id/btn_left"  
  18.             android:layout_width="100dp"   
  19.             android:layout_height="35dp"   
  20.             android:layout_centerVertical="true"  
  21.             android:text="左"  
  22.             custom:normal_bg_res="@drawable/btn_left"  
  23.             custom:selected_bg_res="@drawable/btn_left_selected"/>  
  24.         <com.sun.test.ui.TabButton   
  25.             android:id="@+id/btn_center"  
  26.             android:layout_width="100dp"   
  27.             android:layout_height="35dp"   
  28.             android:layout_centerVertical="true"  
  29.             android:layout_toRightOf="@id/btn_left"  
  30.             android:text="中"  
  31.             custom:normal_bg_res="@drawable/btn_center"  
  32.             custom:selected_bg_res="@drawable/btn_center_selected"/>  
  33.         <com.sun.test.ui.TabButton   
  34.             android:id="@+id/btn_right"  
  35.             android:layout_width="100dp"   
  36.             android:layout_height="35dp"   
  37.             android:layout_centerVertical="true"  
  38.             android:layout_toRightOf="@id/btn_center"  
  39.             android:text="右"  
  40.             custom:normal_bg_res="@drawable/btn_right"  
  41.             custom:selected_bg_res="@drawable/btn_right_selected"/>  
  42.     </RelativeLayout>  
  43. </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 plain copy
  1. package com.sun.test.ui;  
  2.   
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.view.View;  
  6. import android.view.View.OnClickListener;  
  7.   
  8. public class TestActivity extends Activity implements OnClickListener {  
  9.     private TabButton left;  
  10.     private TabButton center;  
  11.     private TabButton right;  
  12.   
  13.     public void onCreate(Bundle savedInstanceState) {  
  14.         super.onCreate(savedInstanceState);  
  15.         setContentView(R.layout.main);  
  16.   
  17.         left = (TabButton) findViewById(R.id.btn_left);  
  18.         left.setOnClickListener(this);  
  19.   
  20.         center = (TabButton) findViewById(R.id.btn_center);  
  21.         center.setOnClickListener(this);  
  22.   
  23.         right = (TabButton) findViewById(R.id.btn_right);  
  24.         right.setOnClickListener(this);  
  25.   
  26.         resetState(R.id.btn_left);  
  27.     }  
  28.   
  29.     public void onClick(View v) {  
  30.         resetState(v.getId());  
  31.     }  
  32.   
  33.     private void resetState(int id) {  
  34.         // 将三个按钮背景设置为未选中  
  35.         left.setSelected(false);  
  36.         center.setSelected(false);  
  37.         right.setSelected(false);  
  38.           
  39.         // 将点击的按钮背景设置为已选中  
  40.         switch (id) {  
  41.         case R.id.btn_left:  
  42.             left.setSelected(true);  
  43.             break;  
  44.         case R.id.btn_center:  
  45.             center.setSelected(true);  
  46.             break;  
  47.         case R.id.btn_right:  
  48.             right.setSelected(true);  
  49.             break;  
  50.         }  
  51.     }  
  52. }  

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


OK，大功告成！

工程源代码下载： http://download.csdn.net/detail/esun6/3705183
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/youngkingyj/article/details/42922261

智能推荐

c# 调用c++ lib静态库_c#调用lib-程序员宅基地

文章浏览阅读2w次，点赞7次，收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加 外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案，在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建：添加Visual C++ , Win32 项目这......_c#调用lib

deepin/ubuntu安装苹方字体-程序员宅基地

文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体，挺好看的。注重颜值的网站都会使用，例如知乎：font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang

html表单常见操作汇总_html表单的处理程序有那些-程序员宅基地

文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--action,当提交表单时，向何处发送表单中的数据，地址可以是相对地址也可以是绝对地址--><!--method将表单中的数据传送给服务器处理，get方式直接显示在url地址中，数据可以被缓存，且长度有限制；而post方式数据隐藏传输，_html表单的处理程序有那些

PHP设置谷歌验证器（Google Authenticator）实现操作二步验证_php otp 验证器-程序员宅基地

文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证（即Google Authenticator服务）后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器

【Python】matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距-程序员宅基地

文章浏览阅读4.3k次，点赞5次，收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距

docker — 容器存储_docker 保存容器-程序员宅基地

文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节，实现了多层数据的堆叠，为用户 提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制（CoW）策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的，不建议用于生成环境。_docker 保存容器

随便推点

网络拓扑结构_网络拓扑csdn-程序员宅基地

文章浏览阅读834次，点赞27次，收藏13次。网络拓扑结构是指计算机网络中各组件（如计算机、服务器、打印机、路由器、交换机等设备）及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式，也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn

JS重写Date函数，兼容IOS系统_date.prototype 将所有 ios-程序员宅基地

文章浏览阅读1.8k次，点赞5次，收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时，通常的做法是：new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的，而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠，也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑，需要做一些额外的特殊处理，笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数，一劳永逸，避免每次ne_date.prototype 将所有 ios

如何将EXCEL表导入plsql数据库中-程序员宅基地

文章浏览阅读5.3k次。方法一：用PLSQL Developer工具。 1 在PLSQL Developer的sql window里输入select * from test for update; 2 按F8执行 3 打开锁, 再按一下加号. 鼠标点到第一列的列头，使全列成选中状态，然后粘贴，最后commit提交即可。（前提..._excel导入pl/sql

Git常用命令速查手册-程序员宅基地

文章浏览阅读83次。Git常用命令速查手册1、初始化仓库git init2、将文件添加到仓库git add 文件名 # 将工作区的某个文件添加到暂存区 git add -u # 添加所有被tracked文件中被修改或删除的文件信息到暂存区，不处理untracked的文件git add -A # 添加所有被tracked文件中被修改或删除的文件信息到暂存区，包括untracked的文件...

分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120-程序员宅基地

文章浏览阅读202次。分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120

【C++缺省函数】 空类默认产生的6个类成员函数_空类默认产生哪些类成员函数-程序员宅基地

文章浏览阅读1.8k次。版权声明：转载请注明出处 http://blog.csdn.net/irean_lau。目录(?)[+]1、缺省构造函数。2、缺省拷贝构造函数。3、 缺省析构函数。4、缺省赋值运算符。5、缺省取址运算符。6、 缺省取址运算符 const。[cpp] view plain copy_空类默认产生哪些类成员函数

推荐文章

热门文章

相关标签