Android自定义控件

创建复合控件可以很好的创建出具有重用功能的控件集合，这种方式通常是需要继承一个合适的ViewGroup，再添加指定的控件，形成新的控件。

下面的例子基于《Android群英传》实现TopBar：

定义属性：

[html] view plain copy

print?

1. <resources>  
2.     <declare-styleable name="TopBar">  
3.         <!-- 标题内容 -->  
4.         <attr name="title_text" format="string"/>  
5.         <!-- 标题字体大小 -->  
6.         <attr name="title_text_size" format="dimension"/>  
7.         <!-- 标题颜色 -->  
8.         <attr name="title_text_color" format="color"/>  
9.         <!-- 左边按钮的文字 -->  
10.         <attr name="left_text" format="string"/>  
11.         <!-- 左边按钮文字颜色 -->  
12.         <attr name="left_text_color" format="color"/>  
13.         <!-- 左边按钮的背景 -->  
14.         <attr name="left_bg" format="reference|color"/>  
15.         <!-- 右边按钮文字 -->  
16.         <attr name="right_text" format="string"/>  
17.         <!-- 右边按钮文字颜色 -->  
18.         <attr name="right_text_color" format="color"/>  
19.         <!-- 右边按钮背景 -->  
20.         <attr name="right_bg" format="reference|color"/>  
21.   
22.     </declare-styleable>  
23. </resources>  

自定义VIew：

[java] view plain copy

print?

1. public class TopBar extends RelativeLayout {  
2.     /** 
3.      * 左边按钮的文字颜色 
4.      */  
5.     private int mLeftTextColor;  
6.   
7.     /** 
8.      * 左边按钮的背景 
9.      */  
10.     private Drawable mLeftBackground;  
11.   
12.     /** 
13.      * 左边按钮的文字 
14.      */  
15.     private String mLeftText;  
16.   
17.     /** 
18.      * 右边按钮的文字颜色 
19.      */  
20.     private int mRightTextColor;  
21.   
22.     /** 
23.      * 右边按钮的背景 
24.      */  
25.     private Drawable mRightBackground;  
26.   
27.     /** 
28.      * 右边按钮的文字 
29.      */  
30.     private String mRightText;  
31.   
32.     /** 
33.      * 标题文字的颜色 
34.      */  
35.     private int mTitleTextColor;  
36.   
37.     /** 
38.      * 标题文字的大小 
39.      */  
40.     private float mTitleTextSize;  
41.   
42.     /** 
43.      * 标题文字 
44.      */  
45.     private String mTitleText;  
46.   
47.     /** 
48.      * 左边按钮 
49.      */  
50.     private Button mLeftButton;  
51.   
52.     /** 
53.      * 右边按钮 
54.      */  
55.     private Button mRightButton;  
56.   
57.     /** 
58.      * 标题 
59.      */  
60.     private TextView mTitleView;  
61.   
62.     private LayoutParams mLeftParams;  
63.     private LayoutParams mRightParams;  
64.     private LayoutParams mTitleParams;  
65.   
66.     private OnTopBarClickListener mListener;  
67.   
68.     //添加点击接口  
69.     public void setOnTopBarClickListener(OnTopBarClickListener listener) {  
70.         mListener = listener;  
71.     }  
72.   
73.     //定义接口  
74.     public interface OnTopBarClickListener {  
75.         // 左按钮点击事件  
76.         void leftClick();  
77.   
78.         // 右按钮点击事件  
79.         void rightClick();  
80.     }  
81.   
82.     public TopBar(Context context) {  
83.         super(context);  
84.     }  
85.   
86.     public TopBar(Context context, AttributeSet attrs) {  
87.         super(context, attrs);  
88.         TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TopBar);  
89.   
90.         // 从 TypedArray 中取出各属性对应的值  
91.         // 取出的值是我们在 layout_topbar.xml 中给各属性赋的值  
92.         mLeftTextColor = typedArray.getColor(R.styleable.TopBar_left_text_color, 0);  
93.         mLeftBackground = typedArray.getDrawable(R.styleable.TopBar_left_bg);  
94.         mLeftText = typedArray.getString(R.styleable.TopBar_left_text);  
95.   
96.         mRightTextColor = typedArray.getColor(R.styleable.TopBar_right_text_color, 0);  
97.         mRightBackground = typedArray.getDrawable(R.styleable.TopBar_right_bg);  
98.         mRightText = typedArray.getString(R.styleable.TopBar_right_text);  
99.   
100.         mTitleTextColor = typedArray.getColor(R.styleable.TopBar_title_text_color, 0);  
101.         mTitleTextSize = typedArray.getDimension(R.styleable.TopBar_title_text_size, 10);  
102.         mTitleText = typedArray.getString(R.styleable.TopBar_title_text);  
103.   
104.         // 获取完 TypedArray 的值后，  
105.         // 一般要调用 recycle 方法来避免重新创建的时候出错  
106.         typedArray.recycle();  
107.   
108.         //创建控件  
109.         mLeftButton = new Button(context);  
110.         mRightButton = new Button(context);  
111.         mTitleView = new TextView(context);  
112.   
113.         // 为创建的组件元素赋值  
114.         mLeftButton.setBackgroundDrawable(mLeftBackground);  
115.         mLeftButton.setText(mLeftText);  
116.         mLeftButton.setTextColor(mLeftTextColor);  
117.   
118.         mRightButton.setBackgroundDrawable(mRightBackground);  
119.         mRightButton.setText(mRightText);  
120.         mRightButton.setTextColor(mRightTextColor);  
121.   
122.         mTitleView.setTextColor(mTitleTextColor);  
123.         mTitleView.setTextSize(mTitleTextSize);  
124.         mTitleView.setText(mTitleText);  
125.   
126.         // 标题文字在 TextView 中心  
127.         mTitleView.setGravity(Gravity.CENTER);  
128.   
129.         // 左边按钮的布局参数  
130.         mLeftParams = new LayoutParams(LayoutParams.WRAP_CONTENT,  
131.                 LayoutParams.MATCH_PARENT);  
132.         // 左边按钮在父布局的左边  
133.         mLeftParams.addRule(ALIGN_PARENT_LEFT, TRUE);  
134.         // 添加到父布局  
135.         addView(mLeftButton, mLeftParams);  
136.   
137.         // 右边按钮的布局参数  
138.         mRightParams = new LayoutParams(LayoutParams.WRAP_CONTENT,  
139.                 LayoutParams.MATCH_PARENT);  
140.         // 右边按钮在父布局的右边  
141.         mRightParams.addRule(ALIGN_PARENT_RIGHT, TRUE);  
142.         // 添加到父布局  
143.         addView(mRightButton, mRightParams);  
144.   
145.         // 标题的布局参数  
146.         mTitleParams = new LayoutParams(LayoutParams.WRAP_CONTENT,  
147.                 LayoutParams.MATCH_PARENT);  
148.         // 标题在父布局的中心  
149.         mTitleParams.addRule(CENTER_IN_PARENT, TRUE);  
150.         // 添加到父布局  
151.         addView(mTitleView, mTitleParams);  
152.   
153.         mLeftButton.setOnClickListener(new OnClickListener() {  
154.             @Override  
155.             public void onClick(View v) {  
156.                 if (mListener != null) {  
157.                     mListener.leftClick();  
158.                 }  
159.             }  
160.         });  
161.   
162.         mRightButton.setOnClickListener(new OnClickListener() {  
163.             @Override  
164.             public void onClick(View v) {  
165.                 if (mListener != null) {  
166.                     mListener.rightClick();  
167.                 }  
168.             }  
169.         });  
170.   
171.     }  
172.   
173.     public TopBar(Context context, AttributeSet attrs, int defStyleAttr) {  
174.         super(context, attrs, defStyleAttr);  
175.     }  
176.   
177.   
178. }  

[java] view plain copy

print?

1. public class Main2Activity extends AppCompatActivity {  
2.     private TopBar mTopBar;  
3.   
4.     @Override  
5.     protected void onCreate(Bundle savedInstanceState) {  
6.         super.onCreate(savedInstanceState);  
7.         setContentView(R.layout.activity_main2);  
8.   
9.         mTopBar = (TopBar) findViewById(R.id.topBar);  
10.         mTopBar.setOnTopBarClickListener(new TopBar.OnTopBarClickListener() {  
11.             @Override  
12.             public void leftClick() {  
13.                 Toast.makeText(Main2Activity.this, "返回", Toast.LENGTH_SHORT).show();  
14.             }  
15.   
16.             @Override  
17.             public void rightClick() {  
18.                 Toast.makeText(Main2Activity.this, "更多", Toast.LENGTH_SHORT).show();  
19.             }  
20.         });  
21.     }  
22. }  

[html] view plain copy

print?

1. <RelativeLayout xmlns:android="http://schemas./apk/res/android"  
2.     xmlns:app="http://schemas./apk/res-auto"  
3.     xmlns:tools="http://schemas./tools"  
4.     android:id="@+id/activity_main2"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="match_parent"  
7.     tools:context="com.hongbo.customview_demo.Main2Activity">  
8.   
9.     <com.hongbo.customview_demo.TopBar  
10.         android:id="@+id/topBar"  
11.         android:layout_width="match_parent"  
12.         android:layout_height="40dp"  
13.         app:left_bg="@mipmap/blue_button"  
14.         app:left_text="返回"  
15.         app:left_text_color="#FFFFFF"  
16.         app:right_bg="@mipmap/blue_button"  
17.         app:right_text="更多"  
18.         app:right_text_color="#FFFFFF"  
19.         app:title_text="自定义标题"  
20.         app:title_text_color="#123412"  
21.         app:title_text_size="10sp">  
22.   
23.     </com.hongbo.customview_demo.TopBar>  
24. </RelativeLayout>  

如图：