概述：

? ? 我想我們在使用一些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" ><ImageViewandroid: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" /><TextViewandroid: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”更好看了一些罷了。于是我們現在還要做另外一件事。例如點擊后要有一些指定的、綁定死的、使用這個控件所必然會進行的操作。其實和上面的加外套是一個性質。如下關鍵代碼：

@Overridepublic 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);}@Overridepublic void setOnClickListener(OnClickListener l) {auxiliaryFunction();super.setOnClickListener(l);}protected void auxiliaryFunction() {Log.i("TAG", "log message.");} }

使用分析：

1.xml代碼中的使用

這里只是有一點需要注意，我們要指明自定義控件的完整路徑，如下：

<com.demo.customview.imagebutton.widgets.ImageButtonandroid: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;@Overrideprotected 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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。