设计具有背景图的按钮------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有动态交互的感觉。

运行结果

范例程序

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" 
/> 

如此一来，即可实现如同本范例程序所展示的效果。
注意：导入图片的方法：把图片放到res/drawable目录下，目录不存在则新建