แสดงแถบแอป

แถบแอปคือคอนเทนเนอร์ที่ด้านบนหรือด้านล่างของหน้าจอ ซึ่งช่วยให้ผู้ใช้เข้าถึงฟีเจอร์หลักและรายการการนำทางได้ ดังนี้

ประเภท

รูปลักษณ์

วัตถุประสงค์

แถบแอปด้านบน

ที่ด้านบนของหน้าจอ

ให้สิทธิ์เข้าถึงงานและข้อมูลสำคัญ โดยทั่วไปจะมีชื่อ รายการการดำเนินการหลัก และรายการการนำทางบางอย่าง

แถบด้านล่างของแอป

ที่ด้านล่างของหน้าจอ

โดยปกติแล้วจะมีรายการการนำทางหลัก อาจให้สิทธิ์เข้าถึงการดำเนินการอื่นๆ เช่น การใช้ปุ่มการทำงานแบบลอย

ความเข้ากันได้ของเวอร์ชัน

การใช้งานนี้กำหนดให้โปรเจ็กต์ของคุณตั้งค่า minSDK เป็น API ระดับ 21 ขึ้นไป

ทรัพยากร Dependency

ใช้แถบแอปด้านบน

โค้ดต่อไปนี้แสดงการใช้งานแถบแอปด้านบน 4 ประเภท รวมถึงตัวอย่างวิธีต่างๆ ในการควบคุมลักษณะการเลื่อน

แถบแอปด้านบนขนาดเล็ก

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

ตัวอย่างต่อไปนี้ไม่ได้ส่งค่า TopAppBar สำหรับ scrollBehavior ดังนั้นแถบแอปด้านบนจึงไม่ตอบสนองต่อการเลื่อนเนื้อหาด้านใน

ผลลัพธ์

ตัวอย่างแถบแอปด้านบนขนาดเล็ก
รูปที่ 1 แถบแอปขนาดเล็กที่ด้านบน

แถบแอปด้านบนที่กึ่งกลาง

แถบแอปด้านบนที่ปรับแนวกึ่งกลางเหมือนกับแถบแอปขนาดเล็ก ยกเว้นชื่อที่วางไว้ตรงกลางคอมโพเนนต์ หากต้องการใช้ ให้ใช้คอมโพสิเบิล CenterAlignedTopAppBar โดยเฉพาะ

ตัวอย่างนี้ใช้ enterAlwaysScrollBehavior() เพื่อรับค่าที่ส่งสำหรับ scrollBehavior แถบจะยุบเมื่อผู้ใช้เลื่อนเนื้อหาภายในของโครงร่าง

ผลลัพธ์

เขียนข้อความแสดงแทนที่นี่
รูปที่ 2 แถบแอปด้านบนที่กึ่งกลาง

แถบแอปด้านบนขนาดกลาง

แถบแอปด้านบนขนาดกลางจะวางชื่อไว้ใต้ไอคอนเพิ่มเติม หากต้องการสร้าง ให้ใช้คอมโพสิเบิล MediumTopAppBar

เช่นเดียวกับโค้ดก่อนหน้า ตัวอย่างนี้ใช้ enterAlwaysScrollBehavior() เพื่อรับค่าที่ส่งสำหรับ scrollBehavior

ผลลัพธ์

รูปที่ 3 แถบแอปด้านบนขนาดกลางที่แสดงลักษณะการเลื่อนจาก enterAlwaysScrollBehavior

แถบแอปด้านบนขนาดใหญ่

แถบแอปด้านบนขนาดใหญ่จะคล้ายกับแถบแอปขนาดกลาง แต่ระยะห่างจากขอบระหว่างชื่อกับไอคอนจะมากกว่าและกินพื้นที่บนหน้าจอโดยรวมมากกว่า หากต้องการสร้าง ให้ใช้คอมโพสิเบิล LargeTopAppBar )

ตัวอย่างนี้ใช้ exitUntilCollapsedScrollBehavior() เพื่อรับค่าที่ส่งสำหรับ scrollBehavior แถบจะยุบเมื่อผู้ใช้เลื่อนเนื้อหาด้านในของโครงร่าง แต่ขยายออกเมื่อผู้ใช้เลื่อนไปที่ท้ายเนื้อหาด้านใน

ผลลัพธ์

หน้าจอในแอปที่มีแถบแอปด้านล่างซึ่งรองรับไอคอนการดำเนินการทางด้านซ้าย และปุ่มการดำเนินการแบบลอยอยู่ทางด้านขวา
รูปที่ 4 ตัวอย่างการใช้งานแถบแอปด้านบนขนาดใหญ่

ใช้แถบด้านล่างของแอป

หากต้องการสร้างแถบแอปด้านล่าง ให้ใช้คอมโพสิเบิล BottomAppBar ซึ่งคล้ายกับคอมโพสิเบิลแถบแอปด้านบน

คุณสามารถส่งคอมโพสิเบิลสําหรับพารามิเตอร์คีย์ต่อไปนี้ได้

  • actions: ชุดไอคอนที่ปรากฏขึ้นทางด้านซ้ายของแถบ โดยปกติแล้ว รายการเหล่านี้จะเป็นการดำเนินการหลักสำหรับหน้าจอหนึ่งๆ หรือรายการการนำทาง
  • floatingActionButton: ปุ่มการทำงานแบบลอยที่ปรากฏขึ้นทางด้านขวาของแถบ

ผลลัพธ์

หน้าจอในแอปที่มีแถบแอปด้านล่างซึ่งรองรับไอคอนการดำเนินการทางด้านซ้าย และปุ่มการดำเนินการแบบลอยอยู่ทางด้านขวา
รูปที่ 5 ตัวอย่างการใช้งานแถบแอปด้านล่าง

ข้อมูลสำคัญ

  • โดยทั่วไปแล้ว คุณจะต้องส่งแถบแอปไปยังคอมโพสิชัน Scaffold ซึ่งมีพารามิเตอร์ที่เฉพาะเจาะจงเพื่อรับแถบแอป
  • คอมโพสิชันที่คุณใช้เพื่อติดตั้งใช้งานแถบแอปด้านบนใช้พารามิเตอร์หลักต่อไปนี้ร่วมกัน

    • title: ข้อความที่ปรากฏในแถบแอป
    • navigationIcon: ไอคอนหลักสำหรับการนําทาง ซึ่งปรากฏทางด้านซ้ายของแถบแอป
    • actions: ไอคอนที่ให้สิทธิ์เข้าถึงการดำเนินการหลักแก่ผู้ใช้ ซึ่งจะปรากฏทางด้านขวาของแถบแอป
    • scrollBehavior: กำหนดวิธีที่แถบแอปด้านบนตอบสนองต่อการเลื่อนเนื้อหาด้านในของโครงสร้างย่อย
    • colors: กำหนดลักษณะที่แถบแอปปรากฏ
  • คุณสามารถควบคุมวิธีที่แถบแอปตอบสนองเมื่อผู้ใช้เลื่อนเนื้อหาภายในของเทมเพลต โดยสร้างอินสแตนซ์ของ TopAppBarScrollBehavior แล้วส่งไปยังแถบแอปด้านบนสําหรับพารามิเตอร์ scrollBehavior TopAppBarScrollBehavior มี 3 ประเภทดังนี้

    • enterAlwaysScrollBehavior: เมื่อผู้ใช้ดึงเนื้อหาด้านในของโครงสร้างขึ้น แถบแอปด้านบนจะยุบลง แถบแอปจะขยายขึ้นเมื่อผู้ใช้ดึงเนื้อหาด้านในลง
    • exitUntilCollapsedScrollBehavior: คล้ายกับ enterAlwaysScrollBehavior แต่แถบแอปจะขยายออกด้วยเมื่อผู้ใช้ไปถึงเนื้อหาด้านในของโครงสร้าง
    • pinnedScrollBehavior: แถบแอปยังคงอยู่ในตำแหน่งเดิมและไม่ตอบสนองต่อการเลื่อน

คอลเล็กชันที่มีคู่มือนี้

คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการ ซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้

ดูวิธีที่ฟังก์ชันคอมโพสิเบิลช่วยให้คุณสร้างคอมโพเนนต์ UI ที่สวยสะดุดตาตามระบบการออกแบบ Material Design ได้อย่างง่ายดาย

หากมีคำถามหรือความคิดเห็น

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