แสดงแถบแอป

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

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

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

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

ทรัพยากร Dependency

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

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

• แถบแอปขนาดเล็กด้านบน
• แถบแอปด้านบนที่ปรับแนวกึ่งกลาง
• แถบแอปด้านบนขนาดกลาง
• แถบแอปด้านบนขนาดใหญ่

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

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

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

ผลลัพธ์

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

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

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

ผลลัพธ์

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

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

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

ผลลัพธ์

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

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

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

ผลลัพธ์

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

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

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

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

ผลลัพธ์

ข้อมูลสำคัญ

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

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

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

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

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

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

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

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

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

ไปที่คำถามที่พบบ่อย แสดงความคิดเห็น