สร้างแถบแอปด้านบนเพื่อช่วยผู้ใช้ไปยังส่วนต่างๆ และเข้าถึงฟังก์ชันในแอปโดยใช้คอมโพสิเบิล TopAppBar
ความเข้ากันได้ของเวอร์ชัน
การใช้งานนี้กำหนดให้โปรเจ็กต์ของคุณตั้งค่า minSDK เป็น API ระดับ 21 ขึ้นไป
ทรัพยากร Dependency
สร้างคอมโพสิเบิลสําหรับแถบแอปด้านบน
สร้างแถบแอปด้านบนโดยใช้คอมโพสิชัน MediumTopAppBar
ซึ่งจะยุบลงเมื่อผู้ใช้เลื่อนพื้นที่เนื้อหาลง และขยายออกเมื่อผู้ใช้เลื่อนกลับไปที่ด้านบนของเนื้อหา
ประเด็นสำคัญเกี่ยวกับรหัส
Scaffold
ด้านนอกที่มีTopBar
- ชื่อที่ประกอบด้วยองค์ประกอบ
Text
รายการเดียว - แถบด้านบนที่มีการกําหนดการดําเนินการรายการเดียว
- การดำเนินการ
IconButton
ที่มีonClick
lambda เพื่อดําเนินการ IconButton
ที่มีIcon
ซึ่งมีรูปไอคอนและข้อความอธิบายเนื้อหา- ลักษณะการเลื่อนสำหรับเนื้อหาภายในของ Scaffold กำหนดเป็น
enterAlwaysScrollBehavior()
ซึ่งจะยุบแถบแอปเมื่อผู้ใช้ดึงเนื้อหาด้านในขึ้น และขยายแถบแอปเมื่อผู้ใช้ดึงเนื้อหาด้านในลง - นอกจาก
MediumTopBar
ที่มีชื่อแล้ว คุณยังใช้รายการต่อไปนี้ได้ด้วยTopAppBar
: ใช้กับหน้าจอที่ไม่ต้องมีการไปยังส่วนต่างๆ หรือการดำเนินการมากนักCenterAlignedTopAppBar
: ใช้สำหรับหน้าจอที่มีการดําเนินการหลักรายการเดียว หัวข้อจะอยู่ตรงกลางคอมโพเนนต์MediumTopAppBar
: ใช้กับหน้าจอที่ต้องมีการไปยังส่วนต่างๆ และการดำเนินการในระดับปานกลางLargeTopAppBar
: ใช้กับหน้าจอที่ต้องไปยังส่วนต่างๆ และดำเนินการหลายอย่าง ใช้ระยะห่างจากขอบมากกว่าMediumTopAppBar
และวางชื่อไว้ใต้ไอคอนเพิ่มเติม
ผลลัพธ์
คอลเล็กชันที่มีคู่มือนี้
คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=th)
สร้างสคาฟเฟิลด์หน้าจอหลัก
ดูวิธีใช้แพลตฟอร์มมาตรฐานเพื่อสร้างอินเทอร์เฟซผู้ใช้ที่ซับซ้อน โครงสร้างพื้นฐานจะยึดส่วนต่างๆ ของ UI ไว้ด้วยกัน ทำให้แอปมีรูปลักษณ์และความรู้สึกที่สอดคล้องกัน
![](https://developer.android.google.cn/static/images/quick-guides/collection-illustration.png?hl=th)
แสดงคอมโพเนนต์แบบอินเทอร์แอกทีฟ
ดูวิธีที่ฟังก์ชันคอมโพสิเบิลช่วยให้คุณสร้างคอมโพเนนต์ UI ที่สวยสะดุดตาตามระบบการออกแบบ Material Design ได้อย่างง่ายดาย
หากมีคำถามหรือความคิดเห็น
ไปที่หน้าคำถามที่พบบ่อยเพื่อดูคู่มือฉบับย่อหรือติดต่อเราเพื่อบอกความคิดเห็นของคุณ