แถบแอปคือคอนเทนเนอร์ที่ด้านบนหรือด้านล่างของหน้าจอ ซึ่งช่วยให้ผู้ใช้เข้าถึงฟีเจอร์หลักและรายการการนำทางได้ ดังนี้
ประเภท |
รูปลักษณ์ |
วัตถุประสงค์ |
---|---|---|
แถบแอปด้านบน | ที่ด้านบนของหน้าจอ |
ให้สิทธิ์เข้าถึงงานและข้อมูลสำคัญ โดยทั่วไปจะมีชื่อ รายการการดำเนินการหลัก และรายการการนำทางบางอย่าง |
แถบด้านล่างของแอป | ที่ด้านล่างของหน้าจอ |
โดยปกติแล้วจะมีรายการการนำทางหลัก อาจให้สิทธิ์เข้าถึงการดำเนินการอื่นๆ เช่น การใช้ปุ่มการทำงานแบบลอย |
ความเข้ากันได้ของเวอร์ชัน
การใช้งานนี้กำหนดให้โปรเจ็กต์ของคุณตั้งค่า minSDK เป็น API ระดับ 21 ขึ้นไป
ทรัพยากร Dependency
ใช้แถบแอปด้านบน
โค้ดต่อไปนี้แสดงการใช้งานแถบแอปด้านบน 4 ประเภท รวมถึงตัวอย่างวิธีต่างๆ ในการควบคุมลักษณะการเลื่อน
แถบแอปด้านบนขนาดเล็ก
หากต้องการสร้างแถบแอปขนาดเล็กด้านบน ให้ใช้คอมโพสิเบิล TopAppBar
นี่คือแถบแอปด้านบนที่เรียบง่ายที่สุดเท่าที่จะเป็นไปได้ และในตัวอย่างนี้มีเพียงชื่อเท่านั้น
ตัวอย่างต่อไปนี้ไม่ได้ส่งค่า TopAppBar
สำหรับ scrollBehavior
ดังนั้นแถบแอปด้านบนจึงไม่ตอบสนองต่อการเลื่อนเนื้อหาด้านใน
ผลลัพธ์
![ตัวอย่างแถบแอปด้านบนขนาดเล็ก](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-small.png?hl=th)
แถบแอปด้านบนที่กึ่งกลาง
แถบแอปด้านบนที่ปรับแนวกึ่งกลางเหมือนกับแถบแอปขนาดเล็ก ยกเว้นชื่อที่วางไว้ตรงกลางคอมโพเนนต์ หากต้องการใช้ ให้ใช้คอมโพสิเบิล CenterAlignedTopAppBar
โดยเฉพาะ
ตัวอย่างนี้ใช้ enterAlwaysScrollBehavior()
เพื่อรับค่าที่ส่งสำหรับ scrollBehavior
แถบจะยุบเมื่อผู้ใช้เลื่อนเนื้อหาภายในของโครงร่าง
ผลลัพธ์
![เขียนข้อความแสดงแทนที่นี่](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-centered.png?hl=th)
แถบแอปด้านบนขนาดกลาง
แถบแอปด้านบนขนาดกลางจะวางชื่อไว้ใต้ไอคอนเพิ่มเติม หากต้องการสร้าง ให้ใช้คอมโพสิเบิล MediumTopAppBar
เช่นเดียวกับโค้ดก่อนหน้า ตัวอย่างนี้ใช้ enterAlwaysScrollBehavior()
เพื่อรับค่าที่ส่งสำหรับ scrollBehavior
ผลลัพธ์
enterAlwaysScrollBehavior
แถบแอปด้านบนขนาดใหญ่
แถบแอปด้านบนขนาดใหญ่จะคล้ายกับแถบแอปขนาดกลาง แต่ระยะห่างจากขอบระหว่างชื่อกับไอคอนจะมากกว่าและกินพื้นที่บนหน้าจอโดยรวมมากกว่า หากต้องการสร้าง ให้ใช้คอมโพสิเบิล LargeTopAppBar
)
ตัวอย่างนี้ใช้ exitUntilCollapsedScrollBehavior()
เพื่อรับค่าที่ส่งสำหรับ scrollBehavior
แถบจะยุบเมื่อผู้ใช้เลื่อนเนื้อหาด้านในของโครงร่าง แต่ขยายออกเมื่อผู้ใช้เลื่อนไปที่ท้ายเนื้อหาด้านใน
ผลลัพธ์
![หน้าจอในแอปที่มีแถบแอปด้านล่างซึ่งรองรับไอคอนการดำเนินการทางด้านซ้าย และปุ่มการดำเนินการแบบลอยอยู่ทางด้านขวา](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-large.png?hl=th)
ใช้แถบด้านล่างของแอป
หากต้องการสร้างแถบแอปด้านล่าง ให้ใช้คอมโพสิเบิล BottomAppBar
ซึ่งคล้ายกับคอมโพสิเบิลแถบแอปด้านบน
คุณสามารถส่งคอมโพสิเบิลสําหรับพารามิเตอร์คีย์ต่อไปนี้ได้
actions
: ชุดไอคอนที่ปรากฏขึ้นทางด้านซ้ายของแถบ โดยปกติแล้ว รายการเหล่านี้จะเป็นการดำเนินการหลักสำหรับหน้าจอหนึ่งๆ หรือรายการการนำทางfloatingActionButton
: ปุ่มการทำงานแบบลอยที่ปรากฏขึ้นทางด้านขวาของแถบ
ผลลัพธ์
![หน้าจอในแอปที่มีแถบแอปด้านล่างซึ่งรองรับไอคอนการดำเนินการทางด้านซ้าย และปุ่มการดำเนินการแบบลอยอยู่ทางด้านขวา](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-bottom.png?hl=th)
ข้อมูลสำคัญ
- โดยทั่วไปแล้ว คุณจะต้องส่งแถบแอปไปยังคอมโพสิชัน
Scaffold
ซึ่งมีพารามิเตอร์ที่เฉพาะเจาะจงเพื่อรับแถบแอป คอมโพสิชันที่คุณใช้เพื่อติดตั้งใช้งานแถบแอปด้านบนใช้พารามิเตอร์หลักต่อไปนี้ร่วมกัน
title
: ข้อความที่ปรากฏในแถบแอปnavigationIcon
: ไอคอนหลักสำหรับการนําทาง ซึ่งปรากฏทางด้านซ้ายของแถบแอปactions
: ไอคอนที่ให้สิทธิ์เข้าถึงการดำเนินการหลักแก่ผู้ใช้ ซึ่งจะปรากฏทางด้านขวาของแถบแอปscrollBehavior
: กำหนดวิธีที่แถบแอปด้านบนตอบสนองต่อการเลื่อนเนื้อหาด้านในของโครงสร้างย่อยcolors
: กำหนดลักษณะที่แถบแอปปรากฏ
คุณสามารถควบคุมวิธีที่แถบแอปตอบสนองเมื่อผู้ใช้เลื่อนเนื้อหาภายในของเทมเพลต โดยสร้างอินสแตนซ์ของ
TopAppBarScrollBehavior
แล้วส่งไปยังแถบแอปด้านบนสําหรับพารามิเตอร์scrollBehavior
TopAppBarScrollBehavior
มี 3 ประเภทดังนี้enterAlwaysScrollBehavior
: เมื่อผู้ใช้ดึงเนื้อหาด้านในของโครงสร้างขึ้น แถบแอปด้านบนจะยุบลง แถบแอปจะขยายขึ้นเมื่อผู้ใช้ดึงเนื้อหาด้านในลงexitUntilCollapsedScrollBehavior
: คล้ายกับenterAlwaysScrollBehavior
แต่แถบแอปจะขยายออกด้วยเมื่อผู้ใช้ไปถึงเนื้อหาด้านในของโครงสร้างpinnedScrollBehavior
: แถบแอปยังคงอยู่ในตำแหน่งเดิมและไม่ตอบสนองต่อการเลื่อน
คอลเล็กชันที่มีคู่มือนี้
คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการ ซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=th)