《Monkey Android》第11課Button和ImageButton

轉發請註明出處：
安卓猴的專欄（http://blog.csdn.net/androidmonkey）
安卓猴的微博（@安卓猴）

---

通過本節課可以學習到的內容：

• Button的用法
• Button的樣式
• ImageButton的用法
• 點擊事件的寫法（之前已經講過，不知還會否？）

---

實例代碼:

運行效果參見本課程示例App：安卓猴Demos

github地址：https://github.com/git0pen/MonkeyAndroid

---

Button的用法

按鈕，可以按下它，或者點擊，由用戶來執行一個動作或者操作。

Button的xml寫法：

<Button
  android:id="@+id/btn_btn"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_gravity="center_horizontal"
  android:drawableLeft="@mipmap/ic_launcher"
  android:onClick="btnClicked"
  android:text="安卓猴是Button"
  android:textSize="26sp"
  />

上面使用的Button的xml屬性介紹：

• android:layout_gravity=”center_horizontal”

代表當前Button的位置要水平居中；

• android:drawableLeft=”@mipmap/ic_launcher”

表示當前的Button中文字左邊的一個小圖標；

• android:onClick=”btnClicked”

點擊事件的其中一個寫法。

Button的樣式

這裏用selector選擇器來定義Button的樣式，實現自定義的點擊響應效果。

1. 在res目錄下新建一個drawable文件夾；

2. 在drawable文件夾上右擊鼠標，選擇New，再選擇Drawable Resource file，彈出對話框，輸入文件名字爲bg_btn，如圖：

3. 打開bg_btn.xml文件，裏面的內容爲，實現的效果爲默認狀態下是holo_blue_bright顏色，按下狀態的顏色是holo_red_light：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

  <item android:drawable="@android:color/holo_red_light" android:state_pressed="true" />
  <item android:drawable="@android:color/holo_blue_bright" />

</selector>

其中的item標籤，用來定義Button的不同狀態下顯示的drawable，它可以是圖片或者顏色值，關於狀態有如下幾個：

<?xml version="1.0" encoding="utf-8" ?>   
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 默認時的背景圖片-->  
  <item android:drawable="@drawable/image1" />    
<!-- 沒有焦點時的背景圖片 -->  
  <item android:state_window_focused="false"   
        android:drawable="@drawable/image2" />   
<!-- 非觸摸模式下獲得焦點並單擊時的背景圖片 -->  
  <item android:state_focused="true" android:state_pressed="true"   android:drawable= "@drawable/image3" />
<!-- 觸摸模式下單擊時的背景圖片-->  
<item android:state_focused="false" android:state_pressed="true"   android:drawable="@drawable/image4" />  
<!--選中時的圖片背景-->  
  <item android:state_selected="true"   android:drawable="@drawable/image5" />   
<!--獲得焦點時的圖片背景-->  
  <item android:state_focused="true"   android:drawable="@drawable/image6" />   
</selector>

ImageButton的用法

<ImageButton
  android:onClick="btnClicked"
  android:id="@+id/imagebtn"
  android:layout_width="wrap_content"
  android:layout_gravity="center_horizontal"
  android:layout_height="wrap_content"
  android:src="@mipmap/ic_launcher"
  />

• android:src="@mipmap/ic_launcher"用來設定ImageButton中的圖片。

效果Gif

下課

這一節課，我們主要學習了Button和Button的樣式以及ImageButton的簡單用法。

關注我，我們一起進步

安卓猴的微博（@安卓猴），感謝關注。
安卓猴的github（@git0pen），感謝star一下。