Change image when click the UI components

在按下按鈕時，時常都需要有兩張以上的圖片切換，而這篇文章，將紀錄以XML檔案的方式，按下按鈕時自動切換圖片。


首先，先將兩張圖片放置  (project)/res/drawable-mdpi/.. 的目錄下

btn.png

btn_down.png

 

 

接著在drawable-mdpi的目錄下按下右鍵 -> new Android XML，檔案名稱btn_selector，並選取selector，如下圖：

 

 

完成之後，會出現一個btn_selector.xml在drawable-mdpi目錄中，將以下程式碼貼入

 

btn_selector.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/btn_down" />
    <item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/btn_down" />
    <item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/btn_down"/>
    <item android:drawable="@drawable/btn" />
</selector>

layout: activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.widget.Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/btn_selector" />

</LinearLayout>

avtivity: MainActivity.xml：

package com.main;
import com.example.android_ui_changeimagewhenclick.R;
import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
 }
}