สิ่งที่ควรทำและไม่ควรทำแบบปรับอัตโนมัติ

แอปที่ปรับขนาดได้รองรับการแสดงผลทุกขนาด ได้แก่ หน้าจอทั้งหน้าจอของอุปกรณ์ หน้าต่างที่ปรับขนาดได้โหมดหลายหน้าต่าง แนวตั้งและแนวนอน การแสดงผลแบบพับและไม่พับของอุปกรณ์แบบพับได้

รายการการตั้งค่าการกําหนดค่าและ API สั้นๆ ที่ช่วยให้คุณสร้างแอปที่ปรับเปลี่ยนได้ แต่การตั้งค่าและ API บางรายการที่ล้าสมัยจะใช้ร่วมกับแอปที่ปรับเปลี่ยนไม่ได้และต้องหลีกเลี่ยง

ปรับขนาดได้

แอปที่ปรับขนาดได้รองรับการปรับขนาดแอปและโหมดหลายหน้าต่าง

แอตทริบิวต์ resizeableActivity ขององค์ประกอบไฟล์ Manifest <activity> และ <application> จะเปิดหรือปิดใช้โหมดหลายหน้าต่างใน Android 11 (API ระดับ 30) และต่ำกว่า ใน Android 12 (API ระดับ 31) ขึ้นไป หน้าจอขนาดใหญ่จะรองรับโหมดหลายหน้าต่าง ไม่ว่าแอตทริบิวต์จะเป็นแบบใดก็ตาม ดูข้อมูลเพิ่มเติมได้ที่รองรับโหมดหลายหน้าต่าง

✓ ทํา

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

ตั้งค่าเป็น resizeableActivity="true" หากแอปกำหนดเป้าหมายเป็น API ระดับต่ำกว่า 24 หรือไม่ต้องตั้งค่าเลยเพราะค่าเริ่มต้นใน Android 7.0 (API ระดับ 24) ขึ้นไปคือ true

✗ สิ่งที่ไม่ควรทำ

อย่าตั้งค่า resizeableActivity="false" สำหรับระดับ API ใดๆ อย่ายกเว้นแอปของคุณจาก Use Case ที่เกี่ยวข้องกับโหมดหลายหน้าต่าง

การวางแนว

แอปที่ปรับเปลี่ยนได้รองรับการวางแนวตั้งและแนวนอน ไม่ว่าจะมีขนาดการแสดงผลหรือโหมดการแสดงผลแบบใดก็ตาม

การตั้งค่าไฟล์ Manifest screenOrientation จะจํากัดการวางแนวกิจกรรม

✓ ทํา

นำการตั้งค่า screenOrientation ออกจากไฟล์ Manifest ของแอป

การล็อกการวางแนวของแอปจะไม่ป้องกันการเปลี่ยนแปลงขนาดหน้าต่าง ระบบจะปรับขนาดแอปเมื่อเข้าสู่โหมดหลายหน้าต่าง เมื่อพับหรือกางอุปกรณ์ หรือเมื่อปรับขนาดหน้าต่างประเภทเดสก์ท็อป แอปของคุณต้องรองรับการเปลี่ยนแปลงขนาดหน้าต่าง ไม่ว่าจะตั้งค่าแอตทริบิวต์ screenOrientation ไว้อย่างไรก็ตาม

✗ สิ่งที่ไม่ควรทำ

อย่าจํากัดการวางแนวกิจกรรม แอปที่ล็อกการวางแนวจะมีแถบดำด้านบนและด้านล่างในอุปกรณ์หน้าจอขนาดใหญ่และขนาดหน้าต่างที่เข้ากันไม่ได้

แอปที่มีแถบดำด้านบนและด้านล่างจะลดโอกาสในการค้นพบใน Google Play สำหรับแท็บเล็ต อุปกรณ์แบบพับ และอุปกรณ์ ChromeOS

สัดส่วนภาพ

เนื่องจากขนาดหน้าจอและหน้าต่างแตกต่างกันไป สัดส่วนภาพจึงแตกต่างกันไป ตั้งแต่สูงและแคบไปจนถึงสี่เหลี่ยมจัตุรัส สั้นและกว้าง

การตั้งค่าไฟล์ Manifest minAspectRatio และ maxAspectRatio จะจำกัดสัดส่วนภาพของแอปเป็นค่าที่กำหนดไว้ล่วงหน้า

✓ ทํา

ปรับแอปให้พอดีกับการแสดงผลโดยไม่คำนึงถึงมิติข้อมูลที่เกี่ยวข้อง

นำการตั้งค่า minAspectRatio และ maxAspectRatio ออกจากไฟล์ Manifest ของแอป หรือตรวจสอบว่าแอปปรับขนาดได้และสัดส่วนการแสดงผลจะปรับให้เอง (ดูส่วนการปรับขนาดได้)

✗ สิ่งที่ไม่ควรทำ

อย่าพยายามควบคุมขนาดสัมพัทธ์ของแอป หากแอปทำงานบนหน้าจอหรือในหน้าต่างที่มีสัดส่วนการแสดงผลที่เข้ากันไม่ได้กับสัดส่วนการแสดงผลของแอป แอปจะมีแถบดำด้านบนและด้านล่าง

ใน Android 14 (API ระดับ 34) ขึ้นไป ผู้ใช้สามารถลบล้างอัตราส่วนการแสดงผลของแอปเพื่อขยายแอปที่มีแถบดำด้านบนและด้านล่างให้เต็มพื้นที่แสดงผลที่มีอยู่ ดูโหมดความเข้ากันได้ของอุปกรณ์

ขนาดหน้าต่าง

การเพิ่มประสิทธิภาพเลย์เอาต์สำหรับขนาดการแสดงผลที่แตกต่างกันเป็นพื้นฐานสำคัญของการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ แอปที่ปรับขนาดได้จะมุ่งเน้นที่ขนาดหน้าต่างแอปมากกว่าขนาดหน้าจอของอุปกรณ์ เมื่อแอปแสดงแบบเต็มหน้าจอ หน้าต่างแอปจะเป็นหน้าจอของอุปกรณ์

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

✓ ทํา

ประเมินขนาดหน้าต่างของแอปตามคลาสขนาดหน้าต่าง

หากต้องการระบุคลาสขนาดหน้าต่าง ให้ใช้ฟังก์ชันระดับบนสุด currentWindowAdaptiveInfo() ของไลบรารี Compose Material 3 Adaptive ดูข้อมูลเพิ่มเติมได้ที่สร้างแอปที่ปรับเปลี่ยนได้

✗ สิ่งที่ไม่ควรทำ

อย่ามองข้ามประโยชน์ของคําจํากัดความของคลาสขนาดหน้าต่างและ API ในตัว อย่าใช้ API ที่เลิกใช้งานเพื่อคํานวณขนาดกรอบเวลา

API ที่เลิกใช้งานแล้ว

API ของแพลตฟอร์มรุ่นเก่าวัดขนาดหน้าต่างแอปไม่ถูกต้อง บางรายการวัดหน้าจออุปกรณ์ บางรายการไม่รวมการตกแต่งระบบ

✓ ทํา

ใช้ WindowManager#getCurrentWindowMetrics() และ WindowMetrics#getBounds() เพื่อรับขนาดของหน้าต่างแอป ใช้ WindowMetrics#getDensity() เพื่อดูความหนาแน่นของการแสดงผล

✗ สิ่งที่ไม่ควรทำ

อย่าใช้ Display API ที่เลิกใช้งานต่อไปนี้เพื่อกําหนดขนาดกรอบเวลา

  • getSize(): เลิกใช้งานแล้วใน Android 11 (API ระดับ 30)
  • getMetrics(): เลิกใช้งานแล้วใน Android 11 (API ระดับ 30)
  • getRealSize(): เลิกใช้งานใน Android 12 (API ระดับ 31)
  • getRealMetrics(): เลิกใช้งานใน Android 12 (API ระดับ 31)

เขียน

Jetpack Compose ออกแบบมาเพื่อการพัฒนา UI แบบปรับเปลี่ยนได้ ไม่มี XML, ไม่มีไฟล์เลย์เอาต์, ไม่มีตัวระบุทรัพยากร คอมโพสิเบิลแบบไม่มีสถานะที่ทำงานบน Kotlin เท่านั้น เช่น Column, Row และ Box ที่อธิบาย UI และตัวแก้ไข เช่น offset, padding และ size ที่เพิ่มลักษณะการทำงานให้กับองค์ประกอบ UI

✓ ทํา

สร้างด้วย Compose ติดตามฟีเจอร์และรุ่นล่าสุด

✗ สิ่งที่ไม่ควรทำ

อย่าใช้เทคโนโลยีที่ล้าสมัย อย่าปล่อยให้แอปล้าสมัย

เขียนไลบรารี Adaptive ของ Material 3

ไลบรารี Compose Material 3 Adaptive มีคอมโพเนนต์และ API ที่อำนวยความสะดวกในการพัฒนาแอปที่ปรับเปลี่ยนได้

✓ ทํา

ใช้ API ต่อไปนี้เพื่อทำให้แอปปรับเปลี่ยนได้

  • NavigationSuiteScaffold: สลับระหว่างแถบนำทางกับแถบข้างสำหรับไปยังส่วนต่างๆ โดยขึ้นอยู่กับคลาสขนาดหน้าต่างของแอป
  • ListDetailPaneScaffold: ใช้เลย์เอาต์ Canonical ของรายการแบบละเอียด ปรับเลย์เอาต์ให้เหมาะกับขนาดหน้าต่างแอป
  • SupportingPaneScaffold: ใช้เลย์เอาต์ Canonical ของแผงสนับสนุน
✗ สิ่งที่ไม่ควรทำ

อย่าทำอะไรซ้ำๆ อย่าพลาดโอกาสที่จะได้เพิ่มประสิทธิภาพการทำงานสำหรับนักพัฒนาแอปจากคลัง Jetpack Compose ทั้งหมด

เลย์เอาต์

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

แอปที่ปรับเปลี่ยนได้จะเพิ่มประสิทธิภาพเลย์เอาต์ตามการเปลี่ยนแปลงในการแสดงผล โดยเฉพาะการเปลี่ยนแปลงขนาดของหน้าต่างแอปหรือการเปลี่ยนแปลงการวางแนวของอุปกรณ์

✓ ทํา

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

จัดระเบียบเนื้อหาเป็นแผงเพื่อใช้เลย์เอาต์หลายแผง เช่น แผงรายละเอียดรายการและแผงสนับสนุนสำหรับการแสดงเนื้อหาแบบไดนามิก

✓ สิ่งที่ควรทำ: แสดงรายการและรายละเอียดกิจกรรมที่จัดระเบียบในเลย์เอาต์แบบแยกหน้าจอ
✗ สิ่งที่ไม่ควรทำ

หากคุณไม่ได้ใช้แผงเนื้อหา อย่าเพิ่งยืดองค์ประกอบ UI ให้เต็มพื้นที่แสดงผล ข้อความบรรทัดยาวอ่านยาก ปุ่มที่ยืดออกดูออกแบบมาไม่ดี หากคุณใช้ Modifier.fillMaxWidth อย่าคิดว่าลักษณะการทำงานนั้นเหมาะกับขนาดการแสดงผลทุกขนาด

✗ ไม่ทำ: เลย์เอาต์ยืดให้เต็มหน้าต่างที่ขยาย

อุปกรณ์อินพุต

ผู้ใช้ไม่ได้ใช้แค่หน้าจอสัมผัสเพื่อโต้ตอบกับแอป

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

✓ ทํา

ใช้ประโยชน์จากฟังก์ชันการทำงานในตัวของเฟรมเวิร์ก Android สำหรับการไปยังส่วนต่างๆ ของแป้นพิมพ์ การคลิก เลือก และเลื่อนของเมาส์หรือแทร็กแพด เผยแพร่แป้นพิมพ์ลัดของแอปในเครื่องมือช่วยเหลือแป้นพิมพ์ลัด

ใช้ Material 3 Library ของ Jetpack เพื่อให้ผู้ใช้เขียนลงในคอมโพเนนต์ TextField ใดก็ได้โดยใช้สไตลัส

✗ สิ่งที่ไม่ควรทำ

อย่าทำให้วิธีการป้อนข้อมูลอื่นใช้งานไม่ได้ ไม่ทำให้เกิดปัญหาการช่วยเหลือพิเศษ

สรุป

  • สร้างแอปด้วย Compose และไลบรารี Material 3 Adaptive
  • เลย์เอาต์ตามคลาสขนาดหน้าต่าง
  • สร้างเลย์เอาต์แบบหลายแผง
  • ทำให้แอปปรับขนาดได้
  • ไม่ล็อกการวางแนวกิจกรรม
  • ไม่จำกัดสัดส่วนภาพ
  • รองรับการป้อนข้อมูลนอกเหนือจากการสัมผัส
  • หลีกเลี่ยง API ที่เลิกใช้งานแล้ว

✓ ทำในสิ่งที่ผู้ใช้คาดหวัง โดยเพิ่มประสิทธิภาพแอปให้เหมาะกับอุปกรณ์ที่หลากหลายที่ผู้ใช้ใช้งานทุกวัน

✗ อย่ารอ เริ่มต้นใช้งานเลยวันนี้