Android中设计具有背景图的按钮—ImageButton的焦点及事件处理

转了按钮UI的文章，嗯，一直不注意UI的。

例子效果图：









实现步骤：

第一步：建立Android 工程：ImageButtonDemo。

第二步：编写Activity 的子类别：ImageButtonDemo，其程序代码如下：

package com.a3gs.imagebutton;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.TextView;

public class ImageButtonDemo extends Activity {
private TextView mTV;
private ImageButton imgBtn;
private Button btn;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

mTV = (TextView) findViewById(R.id.tv);
imgBtn= (ImageButton) findViewById(R.id.imgBtn);
btn = (Button) findViewById(R.id.Btn);

// ImageButton的的onFous事件
imgBtn.setOnFocusChangeListener(new ImageButton.OnFocusChangeListener(){
@Override
public void onFocusChange(View v, boolean hasFocus) {
// TODO Auto-generated method stub
if(hasFocus == true) {
imgBtn.setImageResource(R.drawable.full);
mTV.setText("图片按钮状态为:获得焦点");
}else{
imgBtn.setImageResource(R.drawable.empty);
mTV.setText("图片按钮状态为:失去焦点");
}
}
});

// ImageButton的单击事件
imgBtn.setOnClickListener(new ImageButton.OnClickListener(){
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
imgBtn.setImageResource(R.drawable.full);
mTV.setText("图片按钮状态为:单击");
}
});

// 普通按钮的单击事件
btn.setOnClickListener(new Button.OnClickListener(){
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
imgBtn.setImageResource(R.drawable.empty);
mTV.setText("您按的是普通按钮！");
}
});
}
}

第三步：修改res/layout/main.xml，其代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:id="@+id/tv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<ImageButton
android:id="@+id/imgBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/empty"
/>
<Button
android:id="@+id/Btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button按钮"
/>
</LinearLayout>

扩展学习

除了在运行时用 onFocus() 与onClick() 事件来设置按钮背景图片外，Android 的MVC 设计理念，可以让程序运行之初就以xml 定义的方式来初始化ImageButton 的背景图，仅需先将图片导入res/drawable。
设置方法为在 res/drawable 下自行定义一个xml，主要针对按钮的state_focused、state_pressed 与drawable 属性作设置，如下所示：
drawable/imagebutton.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/ imagebutton "
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/str_button1"
/>
如此一来，即可达到如同本范例程序所展示的效果。有兴趣的朋友可以自己试一下！