概述：

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

 

分析：

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

 

示例分析：

效果圖展示：

本示例將選取ImageButton來做一個簡單地分析。下面先來看看運行效果圖：

 

搭建基本雛形：

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

 

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

 

 

外觀設計和功能添加：

外觀設計：

現在我們就要進行顏色分配和功能說明了，它被實現在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代碼中的使用

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

 

 

 

2.動作效果配置

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

 

 

 

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();
            }
        });
    }
}