4.2 設計具有背景圖的按鈕ImageButton的焦點及事件處理
範例說明
延續前一章按鈕事件的應用範例重新設計一個具有背景圖的按鈕，讓按鈕有美觀的背景圖片，只是這次不使用先前的Button Widget，而是改以ImageButton Widget來顯示。
將按鈕背景圖預先Import至Drawable裡（*.png圖形檔），利用這些圖片，作為ImageButton的背景圖。為了做對照，我們另外在Layout配置一個"一般按鈕"，運行結果畫面中，可以明顯看出圖片按鈕與一般按鈕在外觀上的差異。
一般來說，要設置ImageButton背景圖有許多方法，此程式使用的方法是ImageButton.setImage- Resource()，需要傳遞的參數即是res/drawable/下麵的Resource ID，除了設置背景圖片的方法外，程式需要用到onFocusChange與onClick等按鈕事件作為按鈕事件按一下之後的處理，最後通過TextView來顯示目前圖片按鈕的狀態為onClick、onFocus，或offFocus，並且同步更新按鈕的背景圖，讓User有動態交互的感覺。
運行結果（見圖4-2）
 |
| 图4-2 随着Focus与Click动作，画面上的图片与文字会告知你目前图片按钮的状态 |
範例程式
src/irdc.ex04_02/EX04_02.java
主程式構造三個物件ImageButton、Button與TextView，並在ImageButton上設置onFocus ChangeListener與onClickListener，並實現Image Button圖片的置換。
ImageButton.setOnFocusChangeListener()是處理User按一下圖片按鈕之後需要處理的關鍵，當按一下圖片按鈕的瞬間，以ImageButton.setImageResource()來更換背景圖片。
/* import程式略 */
import android.view.View.OnClickListener;
import android.view.View.OnFocusChangeListener;
public class EX04_02 extends Activity
{
/*聲明三個物件變數(圖片按鈕,一般按鈕,與TextView)*/
private ImageButton mImageButton1;
private Button mButton1;
private TextView mTextView1;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
/*通過findViewById構造三個物件*/
mImageButton1 =(ImageButton) findViewById(R.id.myImageButton1);
mButton1=(Button)findViewById(R.id.myButton1);
mTextView1 = (TextView) findViewById(R.id.myTextView1);
/*通過OnFocusChangeListener來回應ImageButton的onFous事件*/
mImageButton1.setOnFocusChangeListener(new OnFocusChangeListener()
{
public void onFocusChange(View arg0, boolean isFocused)
{
// TODO Auto-generated method stub
/*若ImageButton狀態為onFocus改變ImageButton的圖片
* 並改變textView的文字*/
if (isFocused==true)
{
mTextView1.setText("圖片按鈕狀態為:Got Focus");
mImageButton1.setImageResource(R.drawable.iconfull);
}
/*若ImageButton狀態為offFocus改變ImageButton的圖片
*並改變textView的文字*/
else
{
mTextView1.setText("圖片按鈕狀態為:Lost Focus");
mImageButton1.setImageResource(R.drawable.iconempty);
}
}
});
/*通過onClickListener來回應ImageButton的onClick事件*/
mImageButton1.setOnClickListener(new OnClickListener()
{
public void onClick(View v)
{
// TODO Auto-generated method stub
/*若ImageButton狀態為onClick改變ImageButton的圖片
* 並改變textView的文字*/
mTextView1.setText("圖片按鈕狀態為:Got Click");
mImageButton1.setImageResource(R.drawable.iconfull);
}
});
/*通過onClickListener來回應Button的onClick事件*/
mButton1.setOnClickListener(new OnClickListener()
{
public void onClick(View v)
{
// TODO Auto-generated method stub
/*若Button狀態為onClick改變ImageButton的圖片
* 並改變textView的文字*/
mTextView1.setText("圖片按鈕狀態為:Lost Focus");
mImageButton1.setImageResource(R.drawable.iconempty);
}
});
}
}
擴展學習
除了在運行時用onFocus()與onClick()事件來設置按鈕背景圖片外，Android的MVC設計理念可以讓程式運行之際初就以xml定義的方式來初始化ImageButton的背景圖，這僅需先將圖片導入res/drawable。
設置方法為在res/drawable下自行定義一個xml，主要針對按鈕的state_focused、state_pressed與drawable屬性作設置，如下所示：
drawable/advancedbutton.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/btnfocused" />
<item
android:state_focused="true"
android:state_pressed="true"
android:drawable="@drawable/btnfocusedpressed" />
<item
android:state_focused="false"
android:state_pressed="true"
android:drawable="@drawable/btnpressed" />
<item android:drawable="@drawable/btndefault" />
</selector>
然後，在main.xml中將advancedbutton賦值給Button元件中background的屬性。
layout/main.xml
<Button
android:id="@+id/myButton1"
android:background="@drawable/advancedbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/str_button1"
/>
如此一來，即可實現如同本範例程式所展示的效果。
全站熱搜
留言列表
