如何使用Button

情境

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

程式碼說明

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

宣告方法

方法一

val btn = Button(this)  
btn.text = "push me"  
container.addView(btn)

方法二

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

<?xml version="1.0" encoding="utf-8"?>  
<android.support.constraint.ConstraintLayout  
 xmlns:android="http://schemas.android.com/apk/res/android"  
 xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"  
 android:layout_width="match_parent"  
 android:layout_height="match_parent"  
 android:id="@+id/container"  
 tools:context=".MainActivity">  
 <Button  
  android:text="push me"  
  android:id="@+id/btn"  
  android:layout_width="wrap_content"  
  android:layout_height="wrap_content"  
  android:layout_marginTop="16dp"  
  app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent"  
  android:layout_marginEnd="8dp" app:layout_constraintStart_toStartOf="parent"  
  android:layout_marginStart="8dp" app:layout_constraintHorizontal_bias="0.026"/>  
</android.support.constraint.ConstraintLayout>

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

不同類型一

除了這種基本的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 。

fun onBtnClick(view: View){  
    Toast.makeText(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" />

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

btn.setOnClickListener {  
 Toast.makeText(this, "hi", Toast.LENGTH_SHORT).show();  
}

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

方法三

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

<?xml version="1.0" encoding="utf-8"?>  
<android.support.constraint.ConstraintLayout  
 xmlns:android="http://schemas.android.com/apk/res/android"  
 xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"  
 android:layout_width="match_parent"  
 android:layout_height="match_parent"  
 android:id="@+id/container"  
 tools:context=".MainActivity">  
 <Button  
  android:id="@+id/btn1"  
  android:text="button1"  
  android:layout_width="wrap_content"  
  android:layout_height="wrap_content"  
  app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="16dp" android:layout_marginTop="16dp"  
  app:layout_constraintTop_toTopOf="parent"/>  
 <Button  
  android:id="@+id/btn2"  
  android:text="button2"  
  android:layout_width="wrap_content"  
  android:layout_height="wrap_content"  
  app:layout_constraintTop_toBottomOf="@+id/btn1" app:layout_constraintStart_toStartOf="parent"  
  android:layout_marginStart="8dp" android:layout_marginTop="32dp" app:layout_constraintEnd_toEndOf="parent"  
  android:layout_marginEnd="8dp" app:layout_constraintHorizontal_bias="0.035"/>  
 <Button  
  android:id="@+id/btn3"  
  android:text="button3"  
  android:layout_width="wrap_content"  
  android:layout_height="wrap_content" android:layout_marginTop="36dp"  
  app:layout_constraintTop_toBottomOf="@+id/btn2" app:layout_constraintStart_toStartOf="parent"  
  android:layout_marginStart="16dp"/>  
     
</android.support.constraint.ConstraintLayout>

主程式

class MainActivity : AppCompatActivity(), View.OnClickListener{  
    override fun onClick(v: View) {  
        when (v.id) {  
            btn1.id -> Toast.makeText(this@MainActivity, "button 1", Toast.LENGTH_SHORT).show()  
            btn2.id -> Toast.makeText(this@MainActivity, "button 2", Toast.LENGTH_SHORT).show()  
            btn3.id -> Toast.makeText(this@MainActivity, "button 3", Toast.LENGTH_SHORT).show()  
        }  
    }  
  
    override fun onCreate(savedInstanceState: Bundle?) {  
        super.onCreate(savedInstanceState)  
        setContentView(R.layout.activity_main)  
        btn1.setOnClickListener(this)  
        btn2.setOnClickListener(this)  
        btn3.setOnClickListener(this)  
    }  
}

說明

透過實作 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惡補筆記

搜尋此網誌

如何使用Button (使用 Kotlin)

情境