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

สร้างแถบแอปด้านบนเพื่อช่วยผู้ใช้ไปยังส่วนต่างๆ และเข้าถึงฟังก์ชันในแอปโดยใช้คอมโพสิเบิล TopAppBar

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

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

ทรัพยากร Dependency

สร้างคอมโพสิเบิลสําหรับแถบแอปด้านบน

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

ประเด็นสำคัญเกี่ยวกับรหัส

  • Scaffold ด้านนอกที่มี TopBar
  • ชื่อที่ประกอบด้วยองค์ประกอบ Text รายการเดียว
  • แถบด้านบนที่มีการกําหนดการดําเนินการรายการเดียว
  • การดำเนินการ IconButton ที่มี onClick lambda เพื่อดําเนินการ
  • IconButton ที่มี Icon ซึ่งมีรูปไอคอนและข้อความอธิบายเนื้อหา
  • ลักษณะการเลื่อนสำหรับเนื้อหาภายในของ Scaffold กำหนดเป็น enterAlwaysScrollBehavior() ซึ่งจะยุบแถบแอปเมื่อผู้ใช้ดึงเนื้อหาด้านในขึ้น และขยายแถบแอปเมื่อผู้ใช้ดึงเนื้อหาด้านในลง
  • นอกจาก MediumTopBar ที่มีชื่อแล้ว คุณยังใช้รายการต่อไปนี้ได้ด้วย
    • TopAppBar: ใช้กับหน้าจอที่ไม่ต้องมีการไปยังส่วนต่างๆ หรือการดำเนินการมากนัก
    • CenterAlignedTopAppBar: ใช้สำหรับหน้าจอที่มีการดําเนินการหลักรายการเดียว หัวข้อจะอยู่ตรงกลางคอมโพเนนต์
    • MediumTopAppBar: ใช้กับหน้าจอที่ต้องมีการไปยังส่วนต่างๆ และการดำเนินการในระดับปานกลาง
    • LargeTopAppBar: ใช้กับหน้าจอที่ต้องไปยังส่วนต่างๆ และดำเนินการหลายอย่าง ใช้ระยะห่างจากขอบมากกว่า MediumTopAppBar และวางชื่อไว้ใต้ไอคอนเพิ่มเติม

ผลลัพธ์

รูปที่ 1 แถบแอปด้านบนขนาดกลาง

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

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

ดูวิธีใช้แพลตฟอร์มมาตรฐานเพื่อสร้างอินเทอร์เฟซผู้ใช้ที่ซับซ้อน โครงสร้างพื้นฐานจะยึดส่วนต่างๆ ของ UI ไว้ด้วยกัน ทำให้แอปมีรูปลักษณ์และความรู้สึกที่สอดคล้องกัน
ดูวิธีที่ฟังก์ชันคอมโพสิเบิลช่วยให้คุณสร้างคอมโพเนนต์ UI ที่สวยสะดุดตาตามระบบการออกแบบ Material Design ได้อย่างง่ายดาย

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

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