Android控件篇03之 Button

本文介绍Button控件。

点击查看"Button示例源码"。

目录
1. Button基本使用
2. 自定义Button样式

1. Button基本使用

基本的Button定义大致如下:

<Button
    android:id="@+id/bt_simple"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="12sp"
    android:text="@string/bt_simple" />

1.2 Button事件的响应

有三种方法去处理Button响应事件。

1.2.1 在资源文件中声明

可以在Button的资源文件中通过"android:onClick"属性来指定Button的点击方法,然后再在Button所属的Activity或Fragment中实现该方法。

下面是"在资源文件中定义andriod:onClick"的示例:

<Button
    android:id="@+id/bt_send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/bt_send"
    android:onClick="sendMessage"
    android:textSize="12sp" />

下面是在Activity中实现的sendMessage()示例:

public void sendMessage(View v) {
    Toast.makeText(this, "send message!", Toast.LENGTH_SHORT).show();
}

1.2.2 通过匿名内部类实现onClick监听事件

该方法是在获取Button对象之后,匿名实现View.OnClickListener接口,并将它作为Button对象的监听处理事件。

mBtnPost = (Button)findViewById(R.id.bt_post);
mBtnPost.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(getApplicationContext(), "post message!", Toast.LENGTH_SHORT).show();
    }   
}); 

1.2.3 通过Activity实现onClick监听事件

该方法是Button所属的类直接实现View.OnClickListener接口,然后将该类作为Button对象的监听处理事件。

public class ButtonTest extends Activity 
    implements View.OnClickListener {

    private Button mBtnTransmit;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);


        mBtnTransmit = (Button)findViewById(R.id.bt_transmit);
        mBtnTransmit.setOnClickListener(this);

        ...
    }   

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.bt_transmit:
                Toast.makeText(this, "transmit message!", Toast.LENGTH_LONG).show();
                break;
            default:
                break;
        }   
    } 

    ...
}

2. 自定义Button样式

2.1 使用Android系统自带的Button样式

在定义Button时,使用android自带的Button样式。如下所示:

<Button
    android:id="@+id/bt_style"
    android:layout_width="wrap_content"          
    android:layout_height="wrap_content"         
    android:text="@string/bt_style"
    style="?android:attr/borderlessButtonStyle"  
    android:textSize="12sp" />

说明:上面是创建一个无边框按钮。需要在Button所属的Activity或Application中声明android:theme="@android:style/Theme.Holo"属性才有效!

2.2 通过图片自定义Button背景图

首先,在定义Button时,通过"android:background"属性指定Button的背景图。

<Button
    android:id="@+id/bt_sync"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/bt_sync"
    android:background="@drawable/button_custom"
    android:textSize="12sp"
    />

说明:android:background="@drawable/button_custom",这意味着按钮的背景是drawable下的button_custom文件。下面是button_custom.xml的内容。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Android系统在处理下面的状态时,是按照它们定义的先后顺序进行处理的 -->

    <!-- 按钮按下 -->
    <item android:drawable="@drawable/ic_sync_red"   
          android:state_pressed="true" />

    <!-- 按钮获取焦点 -->
    <item android:drawable="@drawable/ic_sync_green"
          android:state_focused="true" />

    <!-- 默认 -->
    <item android:drawable="@drawable/ic_sync_grey" />

</selector>

说明:需要注意的是,系统会根据状态定义的先后顺序对这些状态进行处理!ic_sync_red.png, ic_sync_green.png, ic_sync_grey.png是drawable目录下的三种图片。

2.3 通过shape自定义Button背景图

第一步和上面一样。首先,在定义Button时,通过"android:background"属性指定Button的背景图。

<Button
    android:id="@+id/bt_diy"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/bt_diy"
    android:background="@drawable/button_style1"
    android:textSize="12sp" />

接着,实现button_style1.xml。它的内容如下:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 按下的效果 -->
    <item android:state_pressed="true">
        <shape>
            <!-- gradient表示渐变,startColor是起始色,endColor是结束色,
                 type是线性渐变类型(默认类型),angle是渐变角度 -->
            <gradient android:startColor="#0e3264" android:endColor="#225193"
                android:type="linear" android:angle="270" />
            <!-- stroke是边缘颜色,width表示边缘宽度,color是边缘颜色 -->
            <!-- stroke可用于实现边缘模糊,反光等效果 -->
            <stroke android:width="2dip" android:color="#062249" />
            <!-- corner是四个圆角的大小 -->
            <corners android:radius="5dp" />
            <!-- padding是按钮文字和边缘的距离 -->
            <padding android:left="10dp" android:top="10dp"
                android:right="10dp" android:bottom="10dp" />
        </shape>
    </item>

    <!--获取焦点的效果 -->
    <item android:state_focused="true">
        <shape>
            <gradient android:startColor="#053b47" android:endColor="#146a7c"
                android:angle="270" />
            <stroke android:width="1dip" android:color="#02272f" />
            <corners android:radius="5dp" />
            <padding android:left="10dp" android:top="10dp"
                android:right="10dp" android:bottom="10dp" />
        </shape>
    </item>

    <!-- 默认效果 -->
    <!-- 注意:默认效果没有stroke,而按钮效果有stroke;这样可以实现类似按下的动态效果 -->
    <item>
        <shape>
            <gradient android:startColor="#275525" android:endColor="#75ac73"   
                android:type="linear" android:angle="90"  
                android:centerX="0.5" android:centerY="0.5" />  
            <corners android:radius="5dip" />
            <padding android:left="10dp" android:top="10dp"
                android:right="10dp" android:bottom="10dp" />
        </shape>
    </item>
</selector>

原文中已经给出了详细的介绍,这里就不再对各个标签的含义进行说明了。上面定义的按钮是渐变的,下面给出一个非渐变(实心)按钮的定义。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 按下的效果 -->
    <item android:state_pressed="true">
        <!-- shape是圆角矩形 -->
        <shape android:shape="rectangle">
            <!-- corner是四个圆角的大小 -->
            <corners android:radius="8dp"/>
            <!-- solid指明该按钮是实心效果,而不是渐变等其他效果 -->
            <solid android:color="#9a2424"/>
            <!-- stroke是边缘颜色,width表示边缘宽度,color是边缘颜色 -->
            <!-- stroke可用于实现边缘模糊,反光等效果 -->
            <stroke android:width="2dip" android:color="#830a0a" />
            <!-- padding是按钮文字和边缘的距离 -->
            <padding android:bottom="5dp" android:left="5dp"
                android:right="5dp" android:top="5dp"/>
        </shape>
    </item>

    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <corners android:radius="8dip"/>
            <solid android:color="#d96e26"/>
            <stroke android:width="2dip" android:color="#93420d" />
            <padding android:bottom="5dp" android:left="5dp"
                android:right="5dp" android:top="5dp"/>
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <corners android:radius="8dip"/>
            <solid android:color="#db7910"/>
            <padding android:bottom="5dp" android:left="5dp"
                android:right="5dp" android:top="5dp"/>
        </shape>  
    </item>
</selector>

下面是一个白色矩形边框的定义。

<!-- dashGap是虚线间隔。如果是0,则是实线 -->
<!-- width是线宽。-->
<!-- color是线的颜色 -->
<item>      
    <shape android:shape="rectangle">
        <corners android:radius="4dip"/>
        <solid android:color="#000000"/>
        <stroke
            android:dashGap="0dp"
            android:width="2dp"
            android:color="@android:color/white" />
    </shape>  
</item>    
by skywang
Previous     Next