Android開發之自定義View（二）

在 Android開發之自定義View（一）中，講解了最複雜的一種自定義View，本次將剩下的兩種講完~~~ go,go,go

繼承原有的控制元件，在原有控制元件基礎上進行修改，如TextView，這種方式常見且簡單。以實現一個顯示粗體文字的TextView例子來講解。

1、自定義屬性

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

    <declare-styleable name="BoldTextView">
        <attr name="textIsBlod" format="boolean" />
    </declare-styleable>

</resources>
複製程式碼

2、建立一個類繼承自TextView，很簡單，內容都是前面講過的

public class BoldTextView extends TextView
{

	private TextPaint paint;

	public BoldTextView(Context context, AttributeSet attrs)
	{
		super(context, attrs);

		TypedArray params = context.obtainStyledAttributes(attrs,
				R.styleable.BoldTextView);
		// 得到自定義控制元件的屬性值。
		boolean textIsBlod = params.getBoolean(
				R.styleable.BoldTextView_textIsBlod, false);
		setTextblod(textIsBlod);

		params.recycle();
	}

	// 設定粗體 其實就是將畫筆變粗即可
	public void setTextblod(boolean textblod)
	{
		if (textblod)
		{
			paint = super.getPaint();
			paint.setFakeBoldText(true);
		}
	}
}
複製程式碼

3、佈局

<com.example.diyview.BoldTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="粗體字，你能看出來嗎？"
        android:textSize="30sp"
        app:textIsBlod="true" />
複製程式碼

4、執行測試

重新拼裝組合，這種方式也比較常見。以實現一個圖片文字按鈕例子來講解。

1、自定義屬性

 <declare-styleable name="ImgBtn">
        <attr name="imgbtn_title" format="string" />
        <attr name="imgbtn_icon" format="reference" />
 </declare-styleable>
複製程式碼

2、組合控制元件佈局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="@dimen/activity_vertical_margin" >

    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>
複製程式碼

3、建立一個類繼承自LinearLayout

public class ImgBtn extends LinearLayout
{
	private TextView title;
	private ImageView icon;

	public ImgBtn(Context context)
	{
		super(context);

	}

	public ImgBtn(Context context, AttributeSet attrs)
	{
		super(context, attrs);

		// 載入佈局
		LayoutInflater.from(context).inflate(R.layout.diy_view, this, true);

		// 找到控制元件
		title = (TextView) findViewById(R.id.title);
		icon = (ImageView) findViewById(R.id.icon);

		// 設定屬性
		TypedArray params = context.obtainStyledAttributes(attrs,
				R.styleable.ImgBtn);

		int resId = params.getResourceId(R.styleable.ImgBtn_imgbtn_icon,
				R.drawable.ic_launcher);
		// 設定圖表
		setIcon(resId);
		String title = params.getString(R.styleable.ImgBtn_imgbtn_title);
		// 設定文字
		setTitle(title);

		params.recycle();
	}

	public void setIcon(int resId)
	{
		icon.setImageResource(resId);

	}

	public void setTitle(String text)
	{

		title.setText(text);
	}

}


複製程式碼

3、Activity佈局

<com.example.diyview.ImgBtn
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:imgbtn_icon="@drawable/icon_set"
        app:imgbtn_title="設定" />
複製程式碼

4、執行測試