在前一天中我们学习了通过xml文件和编程混合的方式设置UI。对于界面布局组件,可以通过xml文件实现,而对于按键和图像视图等控件,可以通过编程直接实现。采用混合方式设置UI,既减少了代码又提高了程序的灵活性。
今天,我们一起学习在图像按键的显示以及图像按键的切换。以上功能都可以通过xml文件来实现。
1 图像按键
可以通过两种方法实现在按键上显示图像的功能。一种方法是使用Button控件,另外一种方法是使用ImageButton控件。两者的区别在于Button控件派生自TextView,可以显示文字;而ImageButton控件派生自ImageView,可以显示图像。
1.1通过Button控件实现图像按键
新建一个名为“ImageButton”的项目,接下来在“ImageButton->res->layout”中新建一个名为“activity_main_linear”的xml布局文件,之后在布局中添加Button按键,并设置其宽度、高度、标题和标题文字大小等属性,如下所示
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="普通按键"
android:textSize="10pt"
接下来设置按键的backgrouand属性,将其设置为要显示的图片:
android:background="@drawable/a_57"
以上代码的含义是将按键的背景设置为名为a_57的图片。
接下来将MainActivity.java中MainActivity类的onCreate()函数中的代码修改为:
setContentView(R.layout.activity_main_linear);
以上代码的含义是使用我们自定义的“activity_main_linear”的布局文件。
程序运行效果如图1-1所示。
图1-1 Button控件实现图像按键
1.2 通过ImageButton控件实现图像按键
在“activity_main_linear”的xml布局文件中添加ImageButton按键,并将其高度和宽度设置为“wrap_content”。
接下来设置其“src”属性和“background”属性,代码如下
android:src="@drawable/a_58"
android:background="#FFFFFF"
其中,a_58是要显示的图像资源,“#FFFFFF”表示将按键背景设置为白色。效果如图1-2所示。
图1-2 ImageButton控件实现图像按键
Button按键和ImageButton按键都可以实现图像按键功能,但是Button控件还可以在按键上显示文字,而ImageButton控件则不行。
2 按键图像切换
按下按键后按键图像可以切换的功能也是通过控件的“background”(Button控件)属性或者“src”(ImageButton控件)属性实现的。
下面以ImageButton控件为例,实现按键图像切换的功能。在“activity_main_linear”的xml布局文件中添加ImageButton按键,并将其高度和宽度设置为“wrap_content”。接下来设置“src”属性和“background”属性
android:src="@drawable/button_selector"
android:background="#FFFFFF"
其中,“button_selector”是在“drawable”下的xml文件的名称。在“ImageButton->res->drawable-hdpi”中添加一个名为“button_selector”的xml文件,并且把“Root Element”的类型设置为“selector”,如图2-1所示。
图2-1 添加xml文件
接下来在button_selector.xml文件中添加如下代码
<itemandroid:state_pressed="true"
android:drawable="@drawable/a_60">
</item>
<itemandroid:state_pressed="false"
android:drawable="@drawable/a_62">
</item>
其中,两个item元素表示有两个选项,state_pressed属性表示按键是否被按下,true表示按下,false表示松开;drawable属性指定了按键在不同状态下显示的不同图像。如图2-2和图2-3所示。
图2-2 按键松开时的效果
图2-3 按键按下时的效果
使用Button控件实现以上功能,只需将其“background”属性设置为button_selector即可。
3 小结
今天我们学习了通过Button控件和ImageButton控件实现图像按键以及按键图像切换的功能。通过指定Button控件的“background”属性或者ImageButton控件的“src”属性实现在按键上实现图像的功能;通过添加根元素为“selector”的xml文件实现按键图像切换的功能。Button控件除了能够显示图像外,还能够显示文字;而ImageButton则只能显示图像。