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

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

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

ความสามารถในการปรับขนาด

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

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

✓ ทำ

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

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

✗ อย่า

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

การวางแนว

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

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

✓ ทำ

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

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

✗ อย่า

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

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

สัดส่วนภาพ

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

การตั้งค่าไฟล์ Manifest ของ minAspectRatio และ maxAspectRatio จำกัด สัดส่วนการแสดงผลของแอปกับค่าที่ฮาร์ดโค้ดไว้

✓ ทำ

ปรับแอปให้พอดีกับจอแสดงผลโดยไม่คำนึงถึงขนาดที่สัมพันธ์กัน

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

✗ อย่า

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

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

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

การเพิ่มประสิทธิภาพเลย์เอาต์สำหรับ Display ขนาดต่างๆ เป็นพื้นฐานหลักของ การออกแบบที่ปรับเปลี่ยนได้ แอปแบบปรับอัตโนมัติจะโฟกัสที่ขนาดหน้าต่างแอปแทนที่จะเป็นอุปกรณ์ ขนาดหน้าจอ เมื่อแอปอยู่ในโหมดเต็มหน้าจอ หน้าต่างของแอปจะเป็นหน้าจออุปกรณ์

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

✓ ทำ

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

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

✗ อย่า

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

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

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

✓ ทำ

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

✗ อย่า

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

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

เขียน

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

✓ ทำ

สร้างด้วยการเขียน ติดตามข่าวสารเกี่ยวกับฟีเจอร์และการเปิดตัวล่าสุด

✗ อย่า

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

เขียนไลบรารี Material 3 แบบปรับอัตโนมัติ

ไลบรารีของ Compose Material 3 Adaptive มีคอมโพเนนต์และ API ที่ ช่วยพัฒนาแอปแบบปรับอัตโนมัติ

✓ ทำ

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

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

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

เลย์เอาต์

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

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

✓ ทำ

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

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

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

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

✗ อย่า: เลย์เอาต์ขยายจนเต็มหน้าต่างที่ขยายแล้ว

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

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

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

✓ ทำ

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

ใช้ไลบรารี Material 3 ของ Jetpack เพื่อให้ผู้ใช้เขียนลงใน คอมโพเนนต์ TextField ที่ใช้สไตลัส

✗ อย่า

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

สรุป

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

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

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