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

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

如此一来，即可达到如同本范例程序所展示的效果。有兴趣的朋友可以自己试一下！

更多相关文章

随机推荐