Android UI編程之自定義控件初步——ImageButton

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

 

分析：

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

 

示例分析：

效果圖展現：

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

  

 

搭建基本雛形：

對於雛形，首先要作的是積木的選擇。咱們選擇的是一個ImageView和一個TextView，上下襬放，而後用一個約束將其綁定在一塊兒。以下所示的代碼片斷：

 

?

1 2 3 4 5 6 7 8

<!--?xml version= 1.0 encoding=utf- 8 ?--> <linearlayout android:gravity= "center_vertical" android:layout_height= "fill_parent" android:layout_width= "fill_parent" android:orientation= "vertical" xmlns:android= "http://schemas.android.com/apk/res/android" >        <imageview android:id= "@+id/imageView1" android:layout_gravity= "center_horizontal" android:layout_height= "wrap_content" android:layout_width= "wrap_content" android:paddingbottom= "5dip" android:paddingtop= "5dip" android:src= "@drawable/right_icon" >        <textview android:id= "@+id/textView1" android:layout_gravity= "center_horizontal" android:layout_height= "wrap_content" android:layout_margintop= "5dp" android:layout_width= "wrap_content" android:text= "肯定" android:textcolor= "#000000" >   </textview></imageview></linearlayout>

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

 

 

外觀設計和功能添加：

外觀設計：

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

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13

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

 

 

功能添加：

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

 

?

1 2 3 4 5 6 7 8 9 10

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

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

 

既然是自定義，固然這裏的ImageButton原始構建不會是Button。以下真相代碼：

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

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代碼中的使用

這裏只是有一點須要注意，咱們要指明自定義控件的完整路徑，以下：

 

?

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

 

 

2.動做效果配置

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

 

?

1 2 3 4 5 6 7 8

<!--?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無異，以下：

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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

 

結伴旅遊,一個免費的交友網站：www.jieberu.com

推推族，免費得門票，遊景區：www.tuituizu.com