สร้างและแสดงข้อความป๊อปอัป

ลองใช้วิธีแบบ Compose
Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Android ดูวิธีเพิ่มการแจ้งเตือนในฟีเจอร์เขียน
Snackbar →

คุณใช้ Snackbar เพื่อแสดงข้อความสั้นๆ แก่ผู้ใช้ได้ ข้อความจะหายไปโดยอัตโนมัติหลังจากผ่านไปสักครู่ ซึ่งต่างจากการแจ้งเตือน Snackbar เหมาะสำหรับข้อความสั้นๆ ที่ผู้ใช้ไม่จำเป็นต้องดำเนินการ เช่น แอปอีเมลสามารถใช้ Snackbar เพื่อแจ้งให้ผู้ใช้ทราบว่าแอปส่งอีเมลสำเร็จแล้ว

ใช้ CoordinatorLayout

Snackbar จะแนบไปกับมุมมอง Snackbar จะให้ฟังก์ชันพื้นฐานหากแนบกับออบเจ็กต์ใดก็ตามที่ได้มาจากคลาส View เช่น ออบเจ็กต์เลย์เอาต์ทั่วไป อย่างไรก็ตาม หากSnackbar แนบมากับ CoordinatorLayout Snackbar จะมีฟีเจอร์เพิ่มเติมดังนี้

  • ผู้ใช้สามารถปิดSnackbarได้โดยการปัดออก
  • เลย์เอาต์จะย้ายองค์ประกอบ UI อื่นๆ เมื่อ Snackbar ปรากฏขึ้น เช่น หากเลย์เอาต์มี FloatingActionButton เลย์เอาต์จะเลื่อนปุ่มขึ้นเมื่อแสดง Snackbar แทน ที่จะวาด Snackbar ไว้เหนือปุ่ม คุณจะเห็นลักษณะของ ฟีเจอร์นี้ในรูปที่ 1

คลาส CoordinatorLayout มีฟังก์ชันการทำงานที่ครอบคลุมกว่าของ FrameLayout หากแอปใช้ FrameLayout อยู่แล้ว คุณสามารถแทนที่เลย์เอาต์นั้น ด้วย CoordinatorLayout เพื่อเปิดใช้ฟังก์ชันการทำงานทั้งหมดของ Snackbar หากแอปใช้ออบเจ็กต์เลย์เอาต์อื่นๆ ให้ห่อองค์ประกอบเลย์เอาต์ที่มีอยู่ด้วย CoordinatorLayout ดังที่แสดงในตัวอย่างต่อไปนี้ 

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/myCoordinatorLayout"
    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">

    <!-- Here are the existing layout elements, now wrapped in
         a CoordinatorLayout. -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!-- ...Toolbar, other layouts, other elements... -->

    </LinearLayout>

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

ตั้งแท็ก android:id สำหรับ CoordinatorLayout คุณจะต้องใช้รหัสของเลย์เอาต์เมื่อแสดงข้อความ

รูปที่ 1 CoordinatorLayout จะเลื่อนFloatingActionButtonขึ้นเมื่อSnackbar ปรากฏ

แสดงข้อความ

การแสดงข้อความมี 2 ขั้นตอน ก่อนอื่น ให้สร้างออบเจ็กต์ Snackbar ที่มีข้อความ จากนั้นคุณจะเรียกใช้เมธอด show() ของออบเจ็กต์นั้นเพื่อแสดงข้อความต่อผู้ใช้

สร้างออบเจ็กต์ Snackbar

สร้างออบเจ็กต์ Snackbar โดยเรียกใช้เมธอดแบบคงที่ Snackbar.make() เมื่อสร้าง Snackbar ให้ระบุข้อความที่จะแสดงและระยะเวลาที่จะแสดงข้อความ

Kotlin

val mySnackbar = Snackbar.make(view, stringId, duration)

Java

Snackbar mySnackbar = Snackbar.make(view, stringId, duration);
ดู
มุมมองที่จะแนบ Snackbar เมธอดจะค้นหาลำดับชั้นการแสดงผลจากมุมมองที่ส่งผ่านจนกว่าจะถึง CoordinatorLayout หรือมุมมองเนื้อหาของการตกแต่งหน้าต่าง โดยปกติแล้ว การส่งCoordinatorLayout ที่แนบเนื้อหาของคุณจะง่ายกว่า
stringId
รหัสทรัพยากรของข้อความที่ต้องการแสดง ซึ่งอาจเป็นข้อความที่มีการจัดรูปแบบหรือ ไม่มีการจัดรูปแบบ
ระยะเวลา
ระยะเวลาที่จะแสดงข้อความ โดยอาจเป็น LENGTH_SHORT หรือ LENGTH_LONG

แสดงข้อความต่อผู้ใช้

หลังจากสร้าง Snackbar แล้ว ให้เรียกใช้เมธอด show() เพื่อแสดง Snackbar ต่อผู้ใช้

Kotlin

mySnackbar.show()

Java

mySnackbar.show();

ระบบจะไม่แสดงออบเจ็กต์ Snackbar หลายรายการพร้อมกัน ดังนั้นหากมุมมองกำลังแสดง Snackbar อื่นอยู่ ระบบจะจัดคิว Snackbar ของคุณและแสดงหลังจากที่ Snackbar ปัจจุบันหมดอายุหรือถูกปิด

หากต้องการแสดงข้อความต่อผู้ใช้และไม่จำเป็นต้องเรียกใช้เมธอดอรรถประโยชน์ของออบเจ็กต์ Snackbar คุณไม่จำเป็นต้องเก็บการอ้างอิงถึง Snackbar หลังจากเรียกใช้ show() ด้วยเหตุนี้ จึงนิยมใช้การเชื่อมโยงเมธอดเพื่อสร้างและแสดง Snackbar ในคำสั่งเดียว

Kotlin

Snackbar.make(
        findViewById(R.id.myCoordinatorLayout),
        R.string.email_sent,
        Snackbar.LENGTH_SHORT
).show()

Java

Snackbar.make(findViewById(R.id.myCoordinatorLayout), R.string.email_sent,
                        Snackbar.LENGTH_SHORT)
        .show();