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

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

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

การปรับขนาด

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

แอตทริบิวต์ resizeableActivity ขององค์ประกอบ Manifest <activity> และ <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) ขึ้นไป ผู้ใช้สามารถลบล้างสัดส่วนภาพของแอป เพื่อขยายแอปที่มีแถบดำด้านบนและด้านล่างให้เต็มพื้นที่แสดงผลที่มีอยู่ได้ ดูโหมดความเข้ากันได้ของอุปกรณ์

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

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

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

✓ สิ่งที่ควรทำ

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

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

✗ ไม่ควร

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

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

✓ สิ่งที่ควรทำ

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

✗ ไม่ควร

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

ไลบรารี Compose Material 3 Adaptive

ไลบรารี 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
  • อิงเลย์เอาต์ตามคลาสขนาดหน้าต่าง
  • สร้างเลย์เอาต์หลายบานหน้าต่าง
  • ทำให้แอปปรับขนาดได้
  • ไม่ล็อกการวางแนวของกิจกรรม
  • อย่าจำกัดสัดส่วนภาพ
  • รองรับการป้อนข้อมูลอื่นๆ นอกเหนือจากการสัมผัส
  • หลีกเลี่ยง API ที่เลิกใช้งานแล้ว

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

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

ก่อนหน้า
รองรับโหมดหลายหน้าต่าง
ถัดไป
ใช้คลาสขนาดหน้าต่าง