【Android Studio】Snackbar -- 比 Toast 更多功能的 跳出式訊息

參考資料 ----
Building and Displaying a Pop-Up Message


Snackbar 是自 API22 新加入的功能，類似 Toast，也是跳出式的訊息視窗 (是不是要取代 Toast? 官方沒有明確表示) 。


當 Snackbar 在 CoordinatorLayout 內顯示時，還能有額外的特殊功能：

1. 使用者能以 左/右 滑動的方式移除 Snackbar

2. 如果在 Layout 內有諸如 FloatingActionButton 的元件時，當跳出 Snackbar 顯示，Snackbar 會將 FloatingActionButton 往上推；等 Snackbar 退出畫面，FloatingActionButton 會再回到原位。


如果您的畫面是 FramLayout，您甚至可以直接以 CoordinatorLayout 取代，就能充分運用 Snackbar 的功能。


先看傳統的程式使用 Snackbar 的方式

 build.gradle(Module: app)

 
...
...

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support:design:27.1.1'      // 注意：要加上這行
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
}
 

activity_main.xml(採用 RelativeLayout)

 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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:id="@+id/mv"    注意：Layout 要有 id
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:text="Button"
        tools:layout_editor_absoluteX="16dp"
        tools:layout_editor_absoluteY="16dp"
        android:onClick="ShowSnackBar"/>

</RelativeLayout>
 

MainActivity.java

 
...
...

public void ShowSnackBar(View v)
{
    Snackbar.make(findViewById(R.id.mv), "顯示 Snackbar", Snackbar.LENGTH_SHORT)
            .show();
}
 

稍微修改 activity_mail.xml

 
<!-- 在 RelativeLayout 外層包上 CoordinatorLayout, 並微調 -->
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/mv"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<RelativeLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:text="Button"
        tools:layout_editor_absoluteX="16dp"
        tools:layout_editor_absoluteY="16dp"
        android:onClick="ShowSnackBar"/>

</RelativeLayout>

</android.support.design.widget.CoordinatorLayout>
 

當 Snackbar 顯示時，往右滑移除。

Snackbar 還可以加入 文字按鈕，並在使用者點擊時執行指定的動作。

 
public void ShowSnackBar(View v)
{
    Snackbar.make(findViewById(R.id.mv), "顯示 Snackbar", Snackbar.LENGTH_LONG)
            .setAction("點擊執行", new View.OnClickListener()
                                    {
                                        @Override
                                        public void onClick(View v)
                                        {
                                            // 點擊訊息時要執行的動作
                                            Toast.makeText(MainActivity.this, "點擊了 Snackbar", Toast.LENGTH_SHORT).show();
                                        }
                                    })
            .setActionTextColor(Color.YELLOW)    // 還可以指定 文字顏色
            .show();
}