Android UI編程之自訂控制項初步——ImageButton

標籤：android   控制項   自訂   ui編程   widget   

概述：

    我想我們在使用一些App的時候，應該不會出現一些“裸控制項”的吧。除非是一些系統中的軟體，那是為了保持風格的一致性，做出的一些權衡。我這裡並非是在指責Android原生的控制項不好看，說實在的，我很喜歡Android的一些原生控制項。只是有些時候為了風格的一致性，就不得不去花些功夫在美工上。這於美工這一點，我對某訊的產品的確欣賞。下面就讓我們開始一點一點學習Android UI編程中的自訂控制項。

分析：

自訂控制項就點像堆積木，並給它塗上顏色，和功能說明。下面就讓我們用一個例子來逐一地簡單討論一下。

樣本分析：展示：

本樣本將選取ImageButton來做一個簡單地分析。下面先來看看運行：

  

搭建基本雛形：

    對於雛形，首先要做的是積木的選擇。我們選擇的是一個ImageView和一個TextView，上下擺放，然後用一個約束將其綁定在一起。如下所示的程式碼片段：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:gravity="center_vertical"    android:orientation="vertical" >    <ImageView        android:id="@+id/imageView1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:paddingBottom="5dip"        android:paddingTop="5dip"        android:src="@drawable/right_icon" />    <TextView        android:id="@+id/textView1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:layout_marginTop="5dp"        android:text="確定"        android:textColor="#000000" /></LinearLayout>

上面的代碼只能讓我們得到一個如上所示的中間方形圖和下方的文本以及緊貼在這兩者邊緣的一個約束。

外觀設計和功能添加：外觀設計：

現在我們就要進行顏色分配和功能說明了，它被實現在Java代碼中了。如下關鍵代碼：

/**     * 設定圖片資源     */    public void setImageResource(int resId) {        imageView.setImageResource(resId);    }    /**     * 設定顯示的文字     */    public void setTextViewText(String text) {        textView.setText(text);    }

功能添加：而對於此我們僅僅只是讓這個“Button”更好看了一些罷了。於是我們現在還要做另外一件事。例如點擊後要有一些指定的、綁定死的、使用這個控制項所必然會進行的操作。其實和上面的加外套是一個性質。如下關鍵代碼：

@Override    public void setOnClickListener(OnClickListener l) {        auxiliaryFunction();                super.setOnClickListener(l);    }        protected void auxiliaryFunction() {        Log.i("TAG", "log message.");    }

上面添加的額外功能，我們可以在Log日誌中查看是否有真的完成。

既然是自訂，當然這裡的ImageButton原始構建不會是Button。如下真相代碼：

public class ImageButton extends LinearLayout {    private ImageView imageView;    private TextView textView;    public ImageButton(Context context) {        super(context);    }    public ImageButton(Context context, AttributeSet attrs) {        super(context, attrs);        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);        inflater.inflate(R.layout.image_button, this);        imageView = (ImageView) findViewById(R.id.imageView1);        textView = (TextView) findViewById(R.id.textView1);    }    /**     * 設定圖片資源     */    public void setImageResource(int resId) {        imageView.setImageResource(resId);    }    /**     * 設定顯示的文字     */    public void setTextViewText(String text) {        textView.setText(text);    }    @Override    public void setOnClickListener(OnClickListener l) {        auxiliaryFunction();                super.setOnClickListener(l);    }        protected void auxiliaryFunction() {        Log.i("TAG", "log message.");    }}

流量分析：

1.xml代碼中的使用

這裡只是有一點需要注意，我們要指明自訂控制項的完整路徑，如下：

<com.demo.customview.imagebutton.widgets.ImageButton        android:id="@+id/btn_right"        android:layout_width="150dp"        android:layout_height="150dp"        android:background="@drawable/custom_button" />

2.動作效果配置

對於Button的動作也就是觸摸、按下和抬起，對於這三個動作效果的配置需要在res包下的drawable檔案夾中去建立（沒有這個檔案夾就建立一個）。如下代碼：

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/button_unpress_background" android:state_focused="true" android:state_pressed="false"></item>    <item android:drawable="@drawable/button_pressed_background" android:state_pressed="true"></item>    <item android:drawable="@drawable/button_unpress_background" android:state_focused="false" android:state_pressed="false"></item></selector>

3.Java代碼中的使用

在Java代碼的使用與Button無異，如下：

public class MainActivity extends Activity {    private ImageButton mImageBtn1;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mImageBtn1 = (ImageButton) this.findViewById(R.id.btn_right);        mImageBtn1.setTextViewText("確定");        mImageBtn1.setImageResource(R.drawable.right_icon);        mImageBtn1.setOnClickListener(new View.OnClickListener() {            public void onClick(View v) {                Toast.makeText(getApplicationContext(), "點擊確定", 0).show();            }        });    }}

源碼分享：

    對於以上的分析，我想大家應該也已經完成了一個很漂亮的自訂控制項。不過也有可能因為本人講解得不夠清楚，致使你沒有實現想要的效果，在此也分享了本人的原始碼。如下串連：

http://download.csdn.net/detail/u013761665/8408209

Android UI編程之自訂控制項初步——ImageButton