Android應用程序用戶界面(九)- 按鈕

按鈕由文本或(和)圖標組成,這些文本或圖標傳遞着當用戶點擊該按鈕時會發生什麼。

根據你是想創建帶文本、圖標或者兩者都有的按鈕,你可以以以下三種方式在你的佈局文件中創建按鈕。

  • 創建只帶有文本的按鈕,使用Button類:
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_text"
    ... />
  • 創建只帶有圖標的按鈕,使用ImageButton類:
<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"
    ... />

響應點擊事件

當用戶點擊一個按鈕時,按鈕對象會接收到一個on-click事件。

爲了定義on-click事件的事件處理器,爲你的XML佈局文件的<Button>屬性添加android:onClick屬性。這個屬性的值必須是你想要調用以響應一個點擊事件的方法名。加載這個佈局的活動必須實現相應的方法。

例如,以下是一個使用設置了android:onClick屬性的按鈕:

<?xml version="1.0" encoding="utf-8"?>
<Button xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/button_send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_send"
    android:onClick="sendMessage" />

在加載這個佈局的活動中,下面的方法處理點擊事件:

/** Called when the user touches the button */
public void sendMessage(View view) {
    // Do something in response to button click
}

聲明在android:onClick屬性中的方法必須具有如上例中的簽名。具體地,這個方法必須是:

  • 公有方法
  • 返回void
  • 定義一個視圖作爲它自己的參數(這個視圖將是被點擊的視圖)

使用OnClickListener

你可以在程序中而不是在XML佈局文件中聲明按鈕的點擊事件處理器。當你在運行時實例化按鈕或者你需要在Fragment子類中聲明點擊行爲時這樣做可能是必要的。

爲了以程序的方式聲明事件處理器,創建一個View.onClickListener對象,並且通過調用按鈕的setOnClickListener(View.onClickListener)方法爲該按鈕指定給該按鈕。例如:

Button button = (Button) findViewById(R.id.button_send);
button.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
        // Do something in response to button click
    }
});

定義你的按鈕樣式

你的按鈕的外觀(背景圖片和字體)可能在不同的設備上不同,因爲不同配置的設備通常有不同類型的輸入控件的樣式。

你可以使用應用於你整個應用程序的主題來精確地控制你的按鈕的樣式。例如,爲了確保所有運行Android 4.0或更高系統的設備在你的應用中使用Holo主題,在你的清單文件中的<application>元素中聲明android:theme="@android:style/Theme.Holo。也可以通過其他方式支持舊設備支持Holo主題。

爲了定製每個按鈕使用不同的背景,使用一個顏色資源或drawable圖片來指定按鈕的android:background屬性。另外,你可以爲按鈕指定一個樣式,類似於HTML樣式一樣定義多個樣式屬性例如背景、字體、大小等。

無邊界按鈕

關於按鈕可用的一個設計就是無邊界按鈕。無邊界按鈕類似於普通的按鈕,除了他們沒有邊界或背景,但仍然可以在不同的狀態下改變外觀,例如當在點擊的時候。

爲了聲明一個無邊界按鈕,爲按鈕應用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" />

定製背景

如果你想要真正的重新定義你的按鈕的外觀,你可以指定一個定製的背景。與提供一個簡單的位圖或顏色不同,你的背景應該是一個狀態列表資源,根據按鈕當前的狀態概念外觀。

你可以在一個XML文件中定義狀態列表,定義三個不同的顏色或圖片爲不同的按鈕狀態使用。

爲了爲你的按鈕創建一個狀態列表可繪製圖像,需要完成以下步驟:

  1. 爲按鈕背景創建三個位圖代表默認、點擊和獲得焦點的按鈕狀態。爲了確保你的圖片符合按鈕的各種各樣的大小,使用Nine-patch位圖。

  2. 將位圖放置在你的項目的res/drawable目錄下。確保每個位圖適當命名來反映它們表示的按鈕的狀態,例如button_default.9.pngbutton_pressed_9.pngbutton_focused.9.png

  3. 在res/drawable目錄下創建一個新的XML文件(命名爲類似爲button_custom.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>元素定義了當按鈕被按下時使用的位圖
  • 第二個<item>元素定義了當按鈕獲得焦點時使用的位圖
  • 第三個<item>元素定義了當按鈕處於默認狀態時使用的位圖

注意:<item>的順序是很重要的。當這個可繪製資源被引用時,<item>會依序遍歷去決定哪個是適合當前狀態的。因爲默認的位圖是最後一個,它只在條件android:state_pressedandroid:state_focused都爲false時應用。

這個XML文件代表一個單個的繪製資源,並且當賦給按鈕作爲背景時,圖像將根據這三個狀態改變。
4. 然後簡單地將上面的XML文件應用到按鈕的背景。

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

示例

layout_different_buttons.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
  <Button android:layout_height="wrap_content"
          android:layout_width="wrap_content"
          android:text="This is a button!"/>
  <ImageButton android:id="@+id/button"
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      android:src="@drawable/ic_launcher"/>
  <Button android:layout_height="wrap_content"
          android:layout_width="wrap_content"
          android:text="Button"
          android:drawableLeft="@drawable/ic_launcher"
          android:onClick="sayHi"/>
  <Button android:layout_height="wrap_content"
          android:layout_width="wrap_content"
          style="?android:attr/borderlessButtonStyle"
          android:text="This is a borderless button!"/>
  <Button android:layout_height="wrap_content"
          android:layout_width="wrap_content"
          android:textColor="@drawable/button_custom"
          android:text="This is a customed button!"/>
</LinearLayout>

button_custom.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
          <item android:color="#FFFF0000"
                android:state_pressed="true"/>
          <item android:color="#FF00FF00"
                android:state_focused="true"/>
          <item android:color="#FF0000FF"/>
</selector>
package lemon.learnandroid;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
import android.widget.ImageButton;

public class LayoutStudyActivity extends Activity
{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_different_buttons);
        ImageButton btn = (ImageButton)findViewById(R.id.button);
        btn.setOnClickListener(new View.OnClickListener()
        {
            public void onClick(View v)
            {
                Toast.makeText(LayoutStudyActivity.this,
                               "Hello again, Android!",
                               Toast.LENGTH_SHORT).show();
            }
         });
    }

    public void sayHi(View view)
    {
        Toast.makeText(this,"Hello Android", Toast.LENGTH_SHORT).show();
    }
}

不同的按鈕

原文

http://wear.techbrood.com/guide/topics/ui/controls/button.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章