自定義組合控件

在Android開發中經常遇到需要自定義一些組件來實現自己想要的效果，比如下面的這個效果

這個在設置中最常見，當然也可以用一個RelativeLayout來實現，不過當內容過多的時候使用自定義組合控件是最好的選擇。

代碼如下：

ui_setting_view.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="68dp"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tv_setting_view__title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="設置標題"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/tv_setting_view__content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/tv_setting_view__title"
        android:layout_below="@id/tv_setting_view__title"
        android:text="設置內容"
        android:textAppearance="?android:attr/textAppearanceSmall" />

    <CheckBox
        android:id="@+id/cb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:clickable="false"
        android:focusable="false"
        android:gravity="center_vertical" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_alignParentBottom="true"
        android:background="@drawable/listview_devider" />

</RelativeLayout>

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="setting_view_style">
        <attr name="title" format="string"></attr>
        <attr name="content" format="string"></attr>
        <attr name="check_text" format="string"></attr>
        <attr name="uncheck_text" format="string"></attr>
    </declare-styleable>

</resources>

SettingView.java

public class SettingView extends RelativeLayout {
	private View view;
	private TextView tvTitle, tvContent;
	private CheckBox cbStaus;
	private String check_text, uncheck_text;

	public SettingView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		view = View.inflate(context, R.layout.ui_setting_view, this);
	}

	public SettingView(Context context, AttributeSet attrs) {
		super(context, attrs);
		initView(context);
		// 把屬性集和我們自己定義的屬性集合建立映射關係
		TypedArray typedArray = context.obtainStyledAttributes(attrs,
				R.styleable.setting_view_style);
		String content = typedArray
				.getString(R.styleable.setting_view_style_content);
		String title = typedArray
				.getString(R.styleable.setting_view_style_title);
		check_text = typedArray
				.getString(R.styleable.setting_view_style_check_text);
		uncheck_text = typedArray
				.getString(R.styleable.setting_view_style_uncheck_text);
		tvTitle.setText(title);
		tvContent.setText(uncheck_text);
		typedArray.recycle();
	}

	private void initView(Context context) {
		view = View.inflate(context, R.layout.ui_setting_view, this);
		tvTitle = (TextView) findViewById(R.id.tv_setting_view__title);
		tvContent = (TextView) findViewById(R.id.tv_setting_view__content);
		cbStaus = (CheckBox) findViewById(R.id.cb);
	}

	public SettingView(Context context) {
		super(context);
		// 創建兩個TextView 一個checkbox
		view = View.inflate(context, R.layout.ui_setting_view, this);
	}

	/**
	 * 
	 * @return 自定義控件checkBox的選中狀態
	 */
	public boolean isChecked() {
		return cbStaus.isChecked();
	}

	/**
	 * 
	 * @param checked
	 *            cb狀態
	 */
	public void setChecked(boolean checked) {
		cbStaus.setChecked(checked);
		if (checked) {
			setContext(check_text);
		}else {
			setContext(uncheck_text);
		}
	}

	/**
	 * 設置內容
	 * 
	 * @param text
	 */
	public void setContext(String text) {
		tvContent.setText(text);
	}

}

activity_setting.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:zhong="http://schemas.android.com/apk/res/com.zhong.mobilesafe"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".SettingActivity" >

    <TextView
        style="@style/text_title_style"
        android:text="設置中心" />

    <com.zhong.mobilesafe.ui.SettingView
        android:id="@+id/sv_setting_update"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        zhong:check_text="自動更新已開啓"
        zhong:content="自動更新沒有開啓"
        zhong:title="設置自動更新"
        zhong:uncheck_text="自動更未已開啓" >
    </com.zhong.mobilesafe.ui.SettingView>

</LinearLayout>

在這裏如果要重複使用這個自定義的組件只需要複製一下代碼就可以了

<com.zhong.mobilesafe.ui.SettingView
        android:id="@+id/sv_setting_update"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        zhong:check_text="自動更新已開啓"
        zhong:content="自動更新沒有開啓"
        zhong:title="設置自動更新"
        zhong:uncheck_text="自動更未已開啓" >
    </com.zhong.mobilesafe.ui.SettingView>

總結以上自定義組件的步驟：

1、寫一個類繼承ViewGroup

2、重寫構造方法

3、直接在xml或者代碼裏面就可以使用這個自定義的view對象

4、添加自定義的屬性，values目錄attrs文件創建declare-styleable自定義屬性

5、在R文件中自動生成我們自己定義的屬性

6、申明命名空間     xmlns:<自定義tag>="http://schemas.android.com/apk/res/程序包名"

7、tag:attr=""

8、在代碼的構造方法裏面讀取自定義的配置

//把屬性集和我們自己定義的屬性集合簡歷映射關係

9、通過代碼設置讀取到的信息