如何使用Button

情境

Button 是 Android 剛入門一定會碰到的元件
根據使用者按下去
開發者寫出對應的反應
在外觀上就是一個單純的按鈕

程式碼說明

從程式碼你就可以直接宣告一個 Button
並且加到你想要加入的 layout 內

宣告方法

方法一

Button button = new Button(this);
button.setText("push me");
RelativeLayout relativeLayout = (RelativeLayout) findViewById(R.id.activity_main);
relativeLayout.addView(button);

方法二

但是這樣其實在布局上不好做整體的布置
因此你也可以這樣寫

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.givemepass.rejavapractice.MainActivity">
    <Button
        android:text="push me"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

兩段程式碼所呈現出來的畫面是一樣的,
那麼你就可以看到下圖。

不同類型一

除了這種基本的Button, 其實還有其他類型的Button,
例如你想要在Button上面放icon, 那麼就可以使用ImageButton。

<ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_android_black_24dp" />

就可以看到如下圖

不同類型二

那麼你會說, 如果我想要有文字也想要有 Button 呢?
其實也很簡單, 改回 Button 透過 drawableLeft 屬性來完成。

<Button
    android:text="push me"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/ic_android_black_24dp" />

就可以看到下方的圖出現有文字且又有圖示的 Button。

事件

那如果要設定按下去的觸發事件該怎麼做呢?

方法一

你可以直接在xml上面直接設定

<Button
    android:onClick="onBtnClick"
    android:text="push me"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

接著到 MainActivity.java 內部宣告一個方法叫做 onBtnClick

public void onBtnClick(View view){
    Toast.makeText(MainActivity.this, "hi", Toast.LENGTH_SHORT).show();
}

這樣你就會看到按下去會跳出一個 Toast。

這邊有一點要注意的是

在 MainActivity.java 內宣告的方法必須是 public 且傳入一個 View 的參數否則會閃退。

方法二

但是其實這樣的作法並不好追蹤, 所以很少看見這樣的用法。
所以比較常見的做法會像下面一樣,
先在 main_activity.xml 給它一個 id

<Button
    android:id="@+id/btn"
    android:text="push me"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

接著透過程式碼來設定事件。

Button button = (Button) findViewById(R.id.btn);
button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(MainActivity.this, "Hi", Toast.LENGTH_SHORT).show();
    }
});

效果跟上面一樣, 但是比較好追蹤。

####方法三
但是其實還有另外一種寫法, 當你有很多個 Button 的時候,
通常都會透過 id 去辨識

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.example.givemepass.rejavapractice.MainActivity">
    <Button
        android:id="@+id/btn1"
        android:text="button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn2"
        android:text="button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn3"
        android:text="button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

主程式

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.btn1).setOnClickListener(this);
        findViewById(R.id.btn2).setOnClickListener(this);
        findViewById(R.id.btn3).setOnClickListener(this);
    }


    @Override
    public void onClick(View v) {
        switch(v.getId()){
            case R.id.btn1:
                Toast.makeText(MainActivity.this, "button 1", Toast.LENGTH_SHORT).show();
                break;
            case R.id.btn2:
                Toast.makeText(MainActivity.this, "button 2", Toast.LENGTH_SHORT).show();
                break;
            case R.id.btn3:
                Toast.makeText(MainActivity.this, "button 3", Toast.LENGTH_SHORT).show();
                break;
        }
    }
}

說明

透過實作 View.OnClickListener 介面, 來完成 onClick 這個方法
他會回傳你在這個頁面所按下的 view 的 id
透過這個 id 就可以寫出相對應的動作。
就會看到以下的效果

客製化style

你也可以客製化 Button 的外觀

使用內建style

例如在 Button 上加上一行 style="?android:attr/borderlessButtonStyle" 屬性

<Button
   style="?android:attr/borderlessButtonStyle"
   android:id="@+id/btn1"
   android:text="button1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

Android 有許多內建屬性可以參考
https://developer.android.com/reference/android/R.attr.html

自訂換背景顏色

拿這張圖做測試

只要設定 background 屬性就可以改變 Button 的背景

<Button
    android:background="@drawable/button_bg"
    android:id="@+id/btn1"
    android:text="push me"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

輕鬆改變它的背景

你也可以幫它做特效, 當按下去換背景顏色, 放開又回復
這個功能就叫做 selector (5.0以上可以做 ripple 效果)
用這張圖當作按壓時候的背景。

而要多寫一份 selector 的 xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_press"
        android:state_pressed="true" />
    <item android:drawable="@drawable/button_bg" />
</selector>

然後在 Button 的背景上面設定這個 xml

<Button
    android:background="@drawable/button_press"
    android:id="@+id/btn1"
    android:text="push me"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

所以按下去的效果如下圖

以上就是簡單的 Button 操作了。

GiveMePasS's Android惡補筆記

搜尋此網誌