自訂UI控制項之ImageTextViewButton圖片文字按鈕

1.大家先看效果，然後我再詳細解釋

2.大家可以看出來這是一個帶有文字的ImageButton，而實際上是一個布局，上面是ImageView下面是TextView，然後重寫了按鈕的方法，所以有了這個效果

這個布局檔案如下custombt.xml檔案

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <ImageView        android:id="@+id/iv"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerHorizontal="true"        android:paddingBottom="5dip"        android:paddingTop="5dip"        android:src="@drawable/confirm" />    <TextView        android:id="@+id/tv"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@id/iv"        android:layout_centerHorizontal="true"        android:text="確定"        android:textColor="#000000" /></RelativeLayout>

注意的是，控制項標籤使用完整的類名即可。為了給按鈕一個點擊效果，你需要給他一個selector背景，這裡就不說了。

最後一步，即在activity中設定該控制項的內容。當然，在xml中也可以設定，但是只能設定一個，當我們需要兩次使用這樣的控制項，並且顯示內容 不同時就不行了。在activity中設定也非常簡單，我們在ImageBt這個類中已經寫好了相應的方法，簡單調用即可。

3.用java檔案繼承這個布局，如下

package mars.com;import android.content.Context;import android.util.AttributeSet;import android.view.LayoutInflater;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;public class ImageTextViewButton extends LinearLayout {private ImageView iv;private TextView tv;public ImageTextViewButton(Context context) {this(context, null);}public ImageTextViewButton(Context context, AttributeSet attrs) {super(context, attrs);// 匯入布局LayoutInflater.from(context).inflate(R.layout.custombt, this, true);iv = (ImageView) findViewById(R.id.iv);tv = (TextView) findViewById(R.id.tv);}/** * 設定圖片資源 */public void setImageResource(int resId) {iv.setImageResource(resId);}/** * 設定顯示的文字 */public void setTextViewText(String text) {tv.setText(text);}}

那我們怎麼使用它呢

看main.xml檔案吧，我先說明，我的包名為mars.com

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:layout_gravity="bottom"    android:orientation="horizontal" >    <mars.com.ImageTextViewButton        android:id="@+id/bt_confirm"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:background="@drawable/btbg"        android:clickable="true"        android:focusable="true" />    <mars.com.ImageTextViewButton        android:id="@+id/bt_cancel"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_toRightOf="@id/bt_confirm"        android:background="@drawable/btbg"        android:clickable="true"        android:focusable="true" /></RelativeLayout>

看主檔案的測試

package mars.com;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.widget.Toast;public class DemoButtonActivity extends Activity {private ImageTextViewButton ib1;private ImageTextViewButton ib2;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);ib1 = (ImageTextViewButton) findViewById(R.id.bt_confirm);ib2 = (ImageTextViewButton) findViewById(R.id.bt_cancel);ib1.setTextViewText("確定");ib1.setImageResource(R.drawable.confirm);ib2.setTextViewText("取消");ib2.setImageResource(R.drawable.cancel);ib1.setOnClickListener(new OnClickListener() {public void onClick(View v) {Toast.makeText(getApplicationContext(), "自訂Button",Toast.LENGTH_LONG).show();}});}}

後期我將會把我見到的比較好的布局方式都寫上。對了，還有一些我自己ps的圖片也貼出來吧。

btbg.png就是一張白圖片，大家自己弄。