Button
Button的基本使用之前已经讨论过:
http://www.cnblogs.com/mengdd/archive/2012/12/20/2826235.html
其中介绍了两种处理点击的方法:一种是通过在布局文件中设置onClick属性;另一种是通过在程序中设置Listener。
这两种方法对于本文中其他控件也适用,只不过第二种方法可能具体函数名称会有所变化。
对于Button的应用补充一些内容:
Button可以有文字的、图形的、或者文字和图形都有的。
主要是文字的,在布局文件中声明 Button
即可;图形的,就声明为ImageButton,并且添加属性src,
比如:
<ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/button_icon" ... />
如果是文字和图形都有,则使用 Button
类,但是加上android:drawableLeft
属性设置图像:
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_text" android:drawableLeft="@drawable/button_icon" ... />
Styling Your Button
可以设置按钮的风格和主题,这部分内容先不详述,如有兴趣可以转向文末尾的参考链接。
无边按钮
加上属性style="?android:attr/borderlessButtonStyle"
如:
<Button android:id="@+id/button_send" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send" android:onClick="sendMessage" style="?android:attr/borderlessButtonStyle" />
自定义背景
可以定义按钮各种状态对应的图片,首先需要把这些图片资源加入进来,然后在res/drawable/目录下创建一个XML文件,将状态和对应的图片绑定;最后在Button的android:background 属性中加入该XML文件的名字。
比如:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/button_pressed" android:state_pressed="true" /> <item android:drawable="@drawable/button_focused" android:state_focused="true" /> <item android:drawable="@drawable/button_default" /> </selector>
注意到这个文件中item的顺序是很重要的,当这个drawable资源被引用时,<item>元素会按顺序被查询,如果匹配立即返回,不再向后查询。
所以把默认的情况放在最后,当前面的状态都不匹配时,显示默认图像。
<Button android:id="@+id/button_send" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send" android:onClick="sendMessage" android:background="@drawable/button_custom" />
drawable除了可以是图片以外,也可以是自己定义的shape,比如这个state_list其中的drawable就是自己定义的shape(当然从这个文件中是看不出来的,它们和图像的引用方式没有差别):
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/shape_one" android:state_pressed="true"/> <!-- pressed --> <item android:drawable="@drawable/shape_two" android:state_focused="true"/> <!-- focused --> <item android:drawable="@drawable/shape_three"/> <!-- default --> </selector>
其中自定义的shape:shape_one.xml:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <gradient android:angle="45" android:endColor="#80FFBBFF" android:startColor="#FFFFBB00" /> <padding android:bottom="7dp" android:left="7dp" android:right="7dp" android:top="7dp" /> <corners android:radius="8dp" /> </shape>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <solid android:color="#FFFF00FF" /> <padding android:bottom="7dp" android:left="7dp" android:right="7dp" android:top="7dp" /> <corners android:radius="8dp" /> </shape>
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <solid android:color="#FFFFFFFF" /> <padding android:bottom="7dp" android:left="7dp" android:right="7dp" android:top="7dp" /> <corners android:radius="8dp" /> <stroke android:width="5dip" android:color="#555" /> </shape>
具体可以参见:API Guides: Drawable Resources
http://developer.android.com/guide/topics/resources/drawable-resource.html
自定义Button字体颜色:
根据上面的思路,字体颜色也可以采用自定义变化的方式:
比如设置Button的属性如下:
<Button android:id="@+id/button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/myTextView" android:background="@drawable/button_state_list" android:text="Test Button" android:textColor="@drawable/btn_text_color_state_list" />
其中btn_text_color_state_list.xml:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:color="#ffff0000"/> <!-- pressed --> <item android:state_focused="true" android:color="#ff0000ff"/> <!-- focused --> <item android:color="#ff000000"/> <!-- default --> </selector>
Toggle Buttons
这种按钮ToggleButton只涉及两种状态的转换,Android 4.0 (API level 14)开始,引入了 Switch
,可以进行滑动控制,如下图:
可以更改android:textOn和android:textOff属性,设置按钮状态为true和false时的文字。
复选框Checkbox
复选框类 CheckBox 是CompoundButton类的子类,而CompoundButton类是Button类的子类,是带有选择和未选择状态的Button。
关于实现,直接看代码吧。
单选按钮
单选按钮用于从一个集合中选中一项。
单选组将用户的可选项全部罗列出来,让用户选择一个,如果不需要全部罗列出来,可以考虑换用spinner,关于spinner的使用先不赘述。
每一个单选按钮项是一个 RadioButton
,因为单选项目是互斥的,所以需要把它们结成组,组成 RadioGroup
,系统会使得一组中每次只要一个被选中。
RadioButton和CheckBox一样,都是CompoundButton的子类。
而RadioGroup却继承自LinearLayout,默认是垂直布局。
除了给每个RadioButton的onClick属性赋值以外(同一个函数名),还可以通过对RadioGroup设置事件监听。
调用RadioGroup对象的setOnCheckedChangeListener方法。
RadioButton不像CheckBox那样,RadioButton不可以通过二次点击来取消选择。
但是可以通过在RadioGroup外部的按钮之类的,对整个RadioGroup进行清除,清除后,checkedId变为-1,表示没有单选按钮被选择。
程序实例
还是看直接的例子比较简单有效:
程序运行如下图:
例子中:
第一个按钮是无边框按钮;
第二个按钮本来是一个小按钮,后来用于实践了自定义背景的效果,按钮被点击和获得焦点时的图片与默认图片不同;
第三个按钮是一个ImageButton,通过这个按钮试了试长按和点击的事件;
之后是两个Toggle Button,第一个是默认文字,添加了事件相应,第二个更改了两种状态的文字;
之后是Check Box和Radio Group。
这里利用了最初的第一个按钮,作为一个重置按钮,将多选和单选的状态都设置为没有选择,并且两个Toggle Button都设置为false。
代码
布局文件:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/linearLayout1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_alignParentRight="true" android:layout_marginBottom="36dp" android:orientation="vertical" > <Button android:id="@+id/button1" style="?android:attr/borderlessButtonStyle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:text="@string/btn" /> <Button android:id="@+id/button2" style="?android:attr/buttonStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/button_custom" android:text="@string/small_btn" /> <ImageButton android:id="@+id/imageButton1" android:layout_width="50dip" android:layout_height="50dip" android:layout_marginLeft="10dip" android:contentDescription="@string/image_des" android:src="@drawable/pic3" /> <ToggleButton android:id="@+id/toggleButton1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/toggle" /> <ToggleButton android:id="@+id/toggleButton2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/toggle" android:textOff="@string/toggle_off" android:textOn="@string/toggle_on" /> <CheckBox android:id="@+id/checkBox1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/check" /> <TextView android:id="@+id/radioText" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <RadioGroup android:id="@+id/radioGroup1" android:layout_width="wrap_content" android:layout_height="wrap_content" > <RadioButton android:id="@+id/radio0" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:text="@string/radio0" /> <RadioButton android:id="@+id/radio1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/radio1" /> <RadioButton android:id="@+id/radio2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/radio2" /> </RadioGroup> </LinearLayout>
Activity代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
package com.example.hellobutton; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.Button; import android.widget.CheckBox; import android.widget.CompoundButton; import android.widget.ImageButton; import android.widget.RadioButton; import android.widget.RadioGroup; import android.widget.TextView; import android.widget.Toast; import android.widget.ToggleButton; import android.support.v4.app.NavUtils; public class HelloButton extends Activity { Button btn1; Button btn2; ImageButton imageBtn; ToggleButton tBtn1; ToggleButton tBtn2; CheckBox checkBox; TextView textView; RadioGroup radioGroup; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_hello_button); findViews(); setListeners(); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.activity_hello_button, menu); return true; } private void findViews() { btn1 = (Button) findViewById(R.id.button1); btn2 = (Button) findViewById(R.id.button2); imageBtn = (ImageButton) findViewById(R.id.imageButton1); tBtn1 = (ToggleButton) findViewById(R.id.toggleButton1); tBtn2 = (ToggleButton) findViewById(R.id.toggleButton2); checkBox = (CheckBox) findViewById(R.id.checkBox1); textView = (TextView) findViewById(R.id.radioText); radioGroup = (RadioGroup) findViewById(R.id.radioGroup1); } private void setListeners() { // 第一个按钮事件 btn1.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { // 将Toggle Button置为false tBtn1.setChecked(false); tBtn2.setChecked(false); // 将复选框置回起始状态 checkBox.setChecked(false); checkBox.setText(R.string.check); // 将单选框置为什么也没选 radioGroup.clearCheck(); } }); // 第二个按钮事件 btn2.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { } }); // ImageButton有长按和点击两种操作,可以发现点击是在用户松开的瞬间处理的,因为长按结束后松开,会出现点击信息 imageBtn.setOnClickListener(new View.OnClickListener() { // 点击 public void onClick(View v) { Toast.makeText(HelloButton.this, "Image Button is Clicked", Toast.LENGTH_SHORT).show(); } }); //ImageButton长按 imageBtn.setOnLongClickListener(new View.OnLongClickListener() { // 长按 public boolean onLongClick(View v) { Toast.makeText(HelloButton.this, "Image Button is Long Pressed!", Toast.LENGTH_LONG) .show(); return false; } }); // Toggle Button tBtn1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { if (isChecked) { Toast.makeText(HelloButton.this, "The Toggle Button is Checked!", Toast.LENGTH_SHORT) .show(); } else { Toast.makeText(HelloButton.this, "The Toggle Button is NOT Checked!", Toast.LENGTH_SHORT).show(); } } }); // 复选框被点击事件 checkBox.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { checkBox.setText(checkBox.isChecked() ? R.string.checked : R.string.not_checked); } }); // 复选框选择改变事件 // 注意此事件除了用户点击会激发以外,程序内的重置操作,只要改变了复选框选择内容(从无到有或从有到无),就会调用这个函数 checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { Toast.makeText(HelloButton.this, "Check Box has changed!", Toast.LENGTH_SHORT).show(); } }); // 单选框组 radioGroup .setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { public void onCheckedChanged(RadioGroup group, int checkedId) { if (checkedId != -1) { RadioButton rButton = (RadioButton) findViewById(checkedId); if (rButton != null) { textView.setText("You have chosen: " + rButton.getText()); } } else { textView.setText("Choose one!"); } } }); } }
Button自定义图片效果需要的配置文件(放在res/drawable/目录下):
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/button_pressed" android:state_pressed="true" /> <item android:drawable="@drawable/button_focused" android:state_focused="true" /> <item android:drawable="@drawable/button_default" /> </selector>
字符串资源文件:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<resources> <string name="app_name">HelloButton</string> <string name="hello_world">Hello world!</string> <string name="menu_settings">Settings</string> <string name="title_activity_hello_button">HelloButton</string> <string name="btn">Button</string> <string name="small_btn">Small Button</string> <string name="toggle">Toggle Button</string> <string name="toggle_on">Toggle On</string> <string name="toggle_off">Toggle Off</string> <string name="image_des">Just a normal .jpg image file.</string> <string name="check">Check Box</string> <string name="checked">This option is checked!</string> <string name="not_checked">This option is NOT checked!</string> <string name="radio0">Radio Button1</string> <string name="radio1">Radio Button2</string> <string name="radio2">Radio Button3</string> </resources>
参考资料
API Guides: Buttons
http://developer.android.com/guide/topics/ui/controls/button.html
API Guides: Styles and Themes
http://developer.android.com/guide/topics/ui/themes.html
API Guides: Toggle Buttons
http://developer.android.com/guide/topics/ui/controls/togglebutton.html
API Guides: Checkboxes
http://developer.android.com/guide/topics/ui/controls/checkbox.html
API Guides: Radio Buttons
http://developer.android.com/guide/topics/ui/controls/radiobutton.html