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;
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;
10. public class ImageBt extends LinearLayout {
12. private ImageView iv;
13. private TextView tv;
15. public ImageBt(Context context) {
16. this(context, null);
17. }
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);
26. }
28. /**
29. * 設置圖片資源
30. */
31. public void setImageResource(int resId) {
32. iv.setImageResource(resId);
33. }
35. /**
36. * 設置顯示的文字
37. */
38. public void setTextViewText(String text) {
39. tv.setText(text);
40. }
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背景，這裡就不說了。