Android UI开发详解之模板控件的复用

本文转自：http://blog.csdn.net/eclipsexys/article/details/8681353

Android的UI设计一直是Android程序员比较苦恼的一件事，本文主要讲解如何将一些模板类控件进行复用，从而简化UI的开发。

如图：

我们很多程序的界面中，顶部的TopBar是不变的，所以，我们可以做一个公用的控件模板，每次使用时，只要设置相应的参数，就能生成这样一个TopBar。

模板控件实现方法：

[java] view plain copy

1. package com.xys.multiplexedmodule;  
2.   
3. import android.content.Context;  
4. import android.content.res.TypedArray;  
5. import android.graphics.Color;  
6. import android.graphics.drawable.Drawable;  
7. import android.text.TextUtils.TruncateAt;  
8. import android.util.AttributeSet;  
9. import android.view.Gravity;  
10. import android.view.View;  
11. import android.view.ViewGroup;  
12. import android.widget.Button;  
13. import android.widget.RelativeLayout;  
14. import android.widget.TextView;  
15.   
16. public class MultipleTopBar extends RelativeLayout{  
17.       
18.     private Button btn_left;  
19.     private Button btn_right;  
20.     private TextView tv_title;  
21.       
22.     private TopBarClickListener topBarClickListener;  
23.     private String str_title;  
24.       
25.     private RelativeLayout.LayoutParams leftButtonLayoutParams;  
26.     private RelativeLayout.LayoutParams rightButtonLayoutParams;  
27.     private RelativeLayout.LayoutParams tvTitleLayoutParams;  
28.       
29.     private static int leftBtnId=1;  
30.     private static int titleTvId=2;  
31.     private static int rightBtnId=3;  
32.       
33.     private Drawable leftBtnBackground;  
34.     private Drawable rightBtnBackground;  
35.       
36.     private String str_LeftBtn;  
37.     private String str_RightBtn;  
38.     private int leftBtnColor;  
39.     private int rightBtnColor;  
40.     private int titleTvColor;  
41.       
42.     private float titleTextSize;  
43.       
44.     public MultipleTopBar(Context context, AttributeSet attrs) {  
45.         super(context, attrs);  
46.         // TODO Auto-generated constructor stub  
47.         //从参数列表中获取参数  
48.         //TypedArray实例是个属性的容器，context.obtainStyledAttributes()方法返回得到。AttributeSet是节点的属性集合  
49.         //第二个参数为 为获取到值时的默认值  
50.         TypedArray ta=context.obtainStyledAttributes(attrs,R.styleable.TopBar);  
51.         this.str_title=ta.getString(R.styleable.TopBar_title);  
52.         this.leftBtnBackground=ta.getDrawable(R.styleable.TopBar_leftBackground);  
53.         this.rightBtnBackground=ta.getDrawable(R.styleable.TopBar_rightBackground);  
54.         this.str_LeftBtn=ta.getString(R.styleable.TopBar_leftText);  
55.         this.str_RightBtn=ta.getString(R.styleable.TopBar_rightText);  
56.         this.leftBtnColor=ta.getColor(R.styleable.TopBar_leftTextColor, 0);  
57.         this.rightBtnColor=ta.getColor(R.styleable.TopBar_rightTextColor, 0);  
58.         this.titleTextSize=ta.getDimension(R.styleable.TopBar_titleTextSize, 14);  
59.         this.titleTvColor=ta.getColor(R.styleable.TopBar_titleTextColor, 0);  
60.           
61.         ta.recycle();  
62.           
63.         btn_left=new Button(context);  
64.         btn_right=new Button(context);  
65.         tv_title=new TextView(context);  
66.           
67.         btn_left.setId(leftBtnId);  
68.         btn_right.setId(rightBtnId);  
69.         tv_title.setId(titleTvId);  
70.           
71.         //为组件配置布局参数  
72.         leftButtonLayoutParams=new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);  
73.         rightButtonLayoutParams=new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);  
74.         tvTitleLayoutParams=new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);  
75.           
76.         leftButtonLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT,RelativeLayout.TRUE);  
77.         leftButtonLayoutParams.setMargins(12, 0, 0, 0);//左上右下  
78.         leftButtonLayoutParams.addRule(RelativeLayout.CENTER_VERTICAL, RelativeLayout.TRUE);  
79.           
80.         rightButtonLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,RelativeLayout.TRUE);  
81.         rightButtonLayoutParams.setMargins(0, 0, 12, 0);//左上右下  
82.         rightButtonLayoutParams.addRule(RelativeLayout.CENTER_VERTICAL, RelativeLayout.TRUE);  
83.           
84.         tvTitleLayoutParams.setMargins(12, 0, 12, 0);//左上右下  
85.         tvTitleLayoutParams.addRule(RelativeLayout.CENTER_VERTICAL, RelativeLayout.TRUE);  
86.         tvTitleLayoutParams.addRule(RelativeLayout.LEFT_OF, rightBtnId);  
87.         tvTitleLayoutParams.addRule(RelativeLayout.RIGHT_OF, leftBtnId);  
88.         //tvTitleLayoutParams.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);  
89.         tv_title.setGravity(Gravity.CENTER);  
90.         tv_title.setBackgroundColor(leftBtnColor);  
91.           
92.         addView(btn_left, leftButtonLayoutParams);  
93.         addView(btn_right,rightButtonLayoutParams);  
94.         addView(tv_title,tvTitleLayoutParams);  
95.           
96.         //btn_left.setBackgroundDrawable(leftBtnBackground);  
97.         btn_left.setText(str_LeftBtn);  
98.         btn_left.setTextColor(leftBtnColor);  
99.         //btn_right.setBackgroundDrawable(rightBtnBackground);  
100.         btn_right.setText(str_RightBtn);  
101.         btn_right.setTextColor(rightBtnColor);  
102.           
103.         tv_title.setTextSize(22.0f);  
104.         tv_title.setTextColor(Color.BLUE);  
105.         tv_title.setEllipsize(TruncateAt.MIDDLE);  
106.         tv_title.setGravity(Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL);  
107.         tv_title.setSingleLine(true);  
108.         tv_title.setText(str_title);  
109.         tv_title.setTextSize(titleTextSize);  
110.         tv_title.setTextColor(titleTvColor);  
111.           
112.         btn_left.setOnClickListener(new OnClickListener() {  
113.                 @Override  
114.                 public void onClick(View v) {  
115.                     // TODO Auto-generated method stub  
116.                     if(topBarClickListener!=null){  
117.                         topBarClickListener.leftBtnClick();  
118.                 }  
119.                 }  
120.         });  
121.           
122.         btn_right.setOnClickListener(new OnClickListener() {  
123.                 @Override  
124.                 public void onClick(View v) {  
125.                         if(topBarClickListener!=null){  
126.                                 topBarClickListener.rightBtnClick();  
127.                         }  
128.                 }  
129.         });  
130.           
131.     }  
132.       
133.     /* 
134.      * 单击监听事件 
135.      */  
136.     public void setTopBarClickListener(TopBarClickListener topBarClickListener){  
137.         this.topBarClickListener=topBarClickListener;  
138.     }  
139. }  

监听接口：

[java] view plain copy

1. package com.xys.multiplexedmodule;  
2.   
3. public interface TopBarClickListener {  
4.   
5.     void leftBtnClick();  
6.     void rightBtnClick();  
7. }  

对我们自定义的模板控件，我们需要设定他的一些参数，在Values下新建attrs.xml：

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3. <!--declare-styleable：自定义属性的值  -->  
4.     <declare-styleable name="TopBar">  
5.         <attr name="title" format="string" />  
6.         <attr name="titleTextSize" format="dimension" />  
7.         <attr name="titleTextColor" format="color" />  
8.         <attr name="leftTextColor" format="color" />  
9.         <attr name="leftBackground" format="string" />  
10.         <attr name="leftText" format="string" />  
11.         <attr name="rightTextColor" format="color" />  
12.         <attr name="rightBackground" format="string" />  
13.         <attr name="rightText" format="string" />  
14.     </declare-styleable>  
15.   
16. </resources>  

现在我们就已经做好了一个模板，我们要如何使用他呢，很简单：

测试类：

[java] view plain copy

1. package com.xys.multiplexedmodule;  
2.   
3. import android.os.Bundle;  
4. import android.app.Activity;  
5. import android.view.Menu;  
6. import android.widget.Toast;  
7.   
8. public class TestActivity extends Activity {  
9.   
10.     private MultipleTopBar topBar;  
11.       
12.     @Override  
13.     protected void onCreate(Bundle savedInstanceState) {  
14.         super.onCreate(savedInstanceState);  
15.         setContentView(R.layout.activity_main);  
16.         topBar=(MultipleTopBar)findViewById(R.id.topBar);  
17.         topBar.setTopBarClickListener(new TopBarClickListener() {  
18.               
19.             @Override  
20.             public void rightBtnClick() {  
21.                 // TODO Auto-generated method stub  
22.                 Toast.makeText(TestActivity.this, "你点击的是右边的按钮", Toast.LENGTH_LONG).show();  
23.             }  
24.               
25.             @Override  
26.             public void leftBtnClick() {  
27.                 // TODO Auto-generated method stub  
28.                 Toast.makeText(TestActivity.this, "你点击的是左边的按钮", Toast.LENGTH_LONG).show();  
29.             }  
30.         });  
31.     }  
32.   
33.   
34.     @Override  
35.     public boolean onCreateOptionsMenu(Menu menu) {  
36.         // Inflate the menu; this adds items to the action bar if it is present.  
37.         getMenuInflater().inflate(R.menu.main, menu);  
38.         return true;  
39.     }  
40.       
41. }  

引用模板的布局文件：

[html] view plain copy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     xmlns:custom="http://schemas.android.com/apk/res/com.xys.multiplexedmodule"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     android:paddingBottom="@dimen/activity_vertical_margin"  
7.     android:paddingLeft="@dimen/activity_horizontal_margin"  
8.     android:paddingRight="@dimen/activity_horizontal_margin"  
9.     android:paddingTop="@dimen/activity_vertical_margin"  
10.     tools:context=".TestActivity" >  
11.     <!--一定要加入引用 xmlns:custom="http://schemas.android.com/apk/res/com.xys.multiplexedmodule"  -->  
12.     <LinearLayout  
13.         android:layout_width="wrap_content"  
14.         android:layout_height="wrap_content"  
15.         android:layout_alignParentLeft="true"  
16.         android:layout_alignParentRight="true"  
17.         android:layout_alignParentTop="true"  
18.         android:orientation="vertical" >  
19.   
20.         <com.xys.multiplexedmodule.MultipleTopBar  
21.             android:id="@+id/topBar"  
22.             android:layout_width="wrap_content"  
23.             android:layout_height="wrap_content"  
24.             custom:leftBackground="@drawable/ic_launcher"  
25.             custom:leftText="左侧"  
26.             custom:leftTextColor="#ff0000"  
27.             custom:rightBackground="@drawable/ic_launcher"  
28.             custom:rightText="右侧"  
29.             custom:rightTextColor="#ff0000"  
30.             custom:title="自定义标题"  
31.             custom:titleTextColor="#123412"  
32.             custom:titleTextSize="14.0sp" >  
33.         </com.xys.multiplexedmodule.MultipleTopBar>  
34.     </LinearLayout>  
35.   
36. </RelativeLayout>  

这样我们就可以使用我们新建的模板控件了，效果如下：