Android UI進階之自定義組合控件

今天和大家分享下組合控件的使用。很多時候Android自定義控件並不能滿足需求，如何做呢？很多方法，可以自己繪制一個，可以通過繼承基礎控件來重寫某些環節，當然也可以將控件組合成一個新控件，這也是最方便的一個方法。今天就來介紹下如何使用組合控件，將通過兩個實例來介紹。

第一個實現一個帶圖片和文字的按鈕，如圖所示：

整個過程可以分四步走。第一步，定義一個layout，實現按鈕內部的布局。代碼如下：

[html]

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:orientation="horizontal"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent"  
6.     >  
7. <ImageView  
8.     android:layout_width="wrap_content"  
9.     android:layout_height="wrap_content"  
10.     android:id="@+id/iv"  
11.     android:src="@drawable/confirm"  
12.     android:paddingTop="5dip"  
13.     android:paddingBottom="5dip"  
14.     android:paddingLeft="40dip"  
15.     android:layout_gravity="center_vertical"  
16.     />  
17. <TextView  
18.     android:layout_width="wrap_content"  
19.     android:layout_height="wrap_content"  
20.     android:text="確定"  
21.     android:textColor="#000000"  
22.     android:id="@+id/tv"  
23.     android:layout_marginLeft="8dip"  
24.     android:layout_gravity="center_vertical"  
25.     />  
26. </LinearLayout>  

　　這個xml實現一個左圖右字的布局，接下來寫一個類繼承LinearLayout，導入剛剛的布局，並且設置需要的方法，從而使的能在代碼中控制這個自定義控件內容的顯示。代碼如下：

[java]

1. package com.notice.ib;  
2.   
3. import android.content.Context;  
4. import android.util.AttributeSet;  
5. import android.view.LayoutInflater;  
6. import android.widget.ImageView;  
7. import android.widget.LinearLayout;  
8. import android.widget.TextView;  
9.   
10. public class ImageBt extends LinearLayout {  
11.   
12.     private ImageView iv;  
13.     private TextView  tv;  
14.   
15.     public ImageBt(Context context) {  
16.         this(context, null);  
17.     }  
18.   
19.     public ImageBt(Context context, AttributeSet attrs) {  
20.         super(context, attrs);  
21.         // 導入布局   
22.         LayoutInflater.from(context).inflate(R.layout.custombt, this, true);  
23.         iv = (ImageView) findViewById(R.id.iv);  
24.         tv = (TextView) findViewById(R.id.tv);  
25.   
26.     }  
27.   
28.     /** 
29.      * 設置圖片資源 
30.      */  
31.     public void setImageResource(int resId) {  
32.         iv.setImageResource(resId);  
33.     }  
34.   
35.     /** 
36.      * 設置顯示的文字 
37.      */  
38.     public void setTextViewText(String text) {  
39.         tv.setText(text);  
40.     }  
41.   
42. }  

　第三步，在需要使用這個自定義控件的layout中加入這控件，只需要在xml中加入即可。方法如下：

[html]

1. <RelativeLayout   
2.          android:orientation="horizontal"  
3.          android:layout_width="fill_parent"  
4.          android:layout_height="wrap_content"  
5.          android:layout_gravity="bottom"  
6.          >  
7.          <com.notice.ib.ImageBt  
8.              android:id="@+id/bt_confirm"  
9.              android:layout_height="wrap_content"  
10.              android:layout_width="wrap_content"  
11.              android:layout_alignParentBottom="true"  
12.              android:background="@drawable/btbg"  
13.              android:clickable="true"  
14.              android:focusable="true"  
15.              />  
16.          <com.notice.ib.ImageBt  
17.              android:id="@+id/bt_cancel"  
18.              android:layout_toRightOf="@id/bt_confirm"  
19.              android:layout_height="wrap_content"  
20.              android:layout_width="wrap_content"  
21.              android:layout_alignParentBottom="true"  
22.              android:background="@drawable/btbg"  
23.              android:clickable="true"  
24.              android:focusable="true"  
25.             />  
26.          </RelativeLayout>  

注意的是，控件標簽使用完整的類名即可。為了給按鈕一個點擊效果，你需要給他一個selector背景，這裡就不說了。