Android軟體開發之 自定義控制元件

雖然Android系統提供了各種各樣的控制元件供我們開發使用，但在實際的開發中，系統提供的控制元件有時候不能滿足我們的需求，這時我們就需要自定義一個控制元件。

下面的例子就來自定義一個簡單的Button:

首先是佈局,image_btn.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="horizontal"
  android:gravity="center_horizontal"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:background="@drawable/btn_bg">
  <ImageView 
  	android:id="@+id/imageView0"
  	android:layout_width="wrap_content"
  	android:layout_height="wrap_content"
  	android:layout_gravity="center_vertical"
  	android:src="@drawable/image0"
  	/>
  <TextView 
  	android:id="@+id/textView0"
  	android:layout_width="wrap_content"
  	android:layout_height="wrap_content"
  	android:layout_gravity="center_vertical"
  	android:textSize="20sp"
  	android:textColor="#000"
  	android:text="@string/ic_img_up"
  	/>
    
</LinearLayout>
 

然後實現一個新的控制元件，ImageBtn.java:

public class ImageBtn extends LinearLayout {
	
	private ImageView imageView;
	private TextView textView;

	public ImageBtn(Context context, AttributeSet attrs) {
		super(context, attrs);
		LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		inflater.inflate(R.layout.image_btn, this);
		
		//例項化控制元件物件
		imageView = (ImageView) findViewById(R.id.imageView0);
		textView = (TextView) findViewById(R.id.textView0);
	}

	public ImageBtn(Context context) {
		super(context);
	}
	
	/**
	 * 設定圖片資源
	 * @param resId
	 */
	public void setImageResource(int resId) {
		imageView.setImageResource(resId);
	}
	
	/**
	 * 設定要顯示的文字
	 * @param text
	 */
	public void setText(int strId) {
		textView.setText(strId);
	}

}
 

然後在main.xml中使用該控制元件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
	<jack.userdefined.ImageBtn
		android:id="@+id/imgBtn0"
		android:layout_width="wrap_content" 
	    android:layout_height="wrap_content" 
	    />
	    
</LinearLayout>
 

最後，在MainActivity中進行測試,我們實現點選該控制元件，該控制元件中的圖片進行切換和text同時也相應的改變。

public class MainActivity extends Activity implements OnClickListener {
	
	//宣告一個ImageBtn物件
	private ImageBtn imgBtn0;
	//定義一個數組用於存放圖片資源
	private int[] resId = {R.drawable.image0, R.drawable.image1, R.drawable.image2, R.drawable.image3};
	//定義一個數組用於存放字元資源
	private int[] strId = {R.string.ic_img_up, R.string.ic_img_right, R.string.ic_img_down, R.string.ic_img_left};
	//資源索引標誌
	private int Num = 0;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        //例項化ImageBtn物件
        imgBtn0 = (ImageBtn) findViewById(R.id.imgBtn0);
        imgBtn0.setOnClickListener(this);
        
    }

	@Override
	public void onClick(View v) {
		if (Num > resId.length - 1) {
			Num = 0;
		}
		
		imgBtn0.setImageResource(resId[Num]);
		imgBtn0.setText(strId[Num]);
		Num++;
	}
}

Run app之後，如下圖所示：