Android 按钮类控件大集锦：Button ToggleButton CheckBox RadioButton

 

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>

<?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>

<?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。

 

代码

布局文件：

<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代码：

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/目录下）：

<?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>

字符串资源文件：

<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