31 December 2017

[Android Design] เมื่อขนาดหน้าจอของมือถือในยุคใหม่ ไม่ใช่ 16:9 อีกต่อไป



        ในทุกวันนี้ตลาดของมือถือแอนดรอยด์เริ่มมีการเปลี่ยนแปลงอยู่ตลอดเวลา ในยามที่ซักแบรนด์จะเปิดตัว Smartphone รุ่นใหม่ ก็มักจะมาพร้อมกับฟีเจอร์และสเปคที่มีการอัปเดตไปตามยุคสมัย แต่สิ่งหนึ่งที่น่าสนใจในช่วงนี้ก็คือเทรนด์ของสัดส่วนหน้าจอที่ไม่ใช่ 16:9 กันอีกต่อไป จนเจ้าของบล็อกรู้สึกอยากจะหยิบมาพูดถึงว่ามีอะไรที่นักพัฒนาจะต้องรู้บ้าง


ลาก่อนหน้าจอ 16:9

        ในช่วงแรกๆของเทรนด์นี้จะเริ่มจาก LG G6 กับ Samsung Galaxy S8 ที่แหวกแนวของสัดส่วนหน้าจอ ซึ่งในมุมมองของนักพัฒนาในตอนแรกๆก็อาจจะรู้สึกทะแม่งๆอยู่พอสมควร แต่ทว่าเมื่อเวลาผ่านไปเรื่อยๆก็เริ่มเห็นว่ามันไม่ใช่แค่เทรนด์ที่จะมาแล้วก็ผ่านไปแล้วล่ะ เพราะว่าหลายๆแบรนด์ต่างก็พากันทำหน้าจอในสัดส่วนที่ไม่ใช่ 16:9 อีกต่อไป

แล้วมีหน้าจอแบบไหนบ้าง?

        ถึงแม้ว่าหลายๆแบรนด์จะพากันทำหน้าจอที่ไม่ใช่ 16:9 เหมือนๆกัน แต่จุดที่น่าปวดหัวสำหรับนักพัฒนาอย่างเราๆก็คือแต่ละรุ่นก็ดันมีค่าหน้าจอต่างกันอยู่ดี ไม่ว่าจะเป็นสัดส่วน รวมไปถึงขนาดหน้าจอในหน่วย DP ดังนั้นจึงเป็นเรื่องที่น่าสนใจที่ทำให้เจ้าของบล็อกต้องถ่อไปหาข้อมูลมาดูว่าแต่ละรุ่นมีขนาดหน้าจอเป็นยังไงกันบ้าง

        จากที่รวบรวมมา ก็จะมีประมาณนี้

// Google Pixel 2 XL
Resolution (PX) : 2,880 x 1,440 px
Resolution (DP) : 822 x 411 dp
DPI : 560
Density : 560DPI
Screen Ratio : 18 : 9

// Samsung Galaxy S8/Note 8
Resolution (PX) : 2,960 x 1,440 px
Resolution (DP) : 740 x 360 dp
DPI : 640
Density : XXXHDPI
Screen Ratio : 18.5 : 9

// Vivo V7/V7+
Resolution (PX) : 1,440 x 720 px
Resolution (DP) : 720 x 360 dp
DPI : 320
Density : XHDPI
Screen Ratio : 18 : 9

// OPPO F5/F5 Youth
Resolution (PX) : 2160 x 1080 px
Resolution (DP) : 720 x 360 dp
DPI : 480
Density : XXHDPI
Screen Ratio : 18 : 9

// Xiaomi Mi Mix 2
Resolution (PX) : 2,160 x 1,080 px
Resolution (DP) : 785 x 392 dp
DPI : 440
Density : Unknown​
Screen Ratio : 18 : 9

// Xiaomi Mi Mix
Resolution (PX) : 2,040 x 1,080 px
Resolution (DP) : ???
DPI : ???
Density : ???
Screen Ratio : 17 : 9

// LG G6
Resolution (PX) : 2,880 x 1,440 px
Resolution (DP) : ???
DPI : ???
Density : ???
Screen Ratio : 18 : 9

// Wiko View/View Prime/View XL
Resolution (PX) : 1,440 x 720 px
Resolution (DP) : ???
DPI : ???
Density : ???
Screen Ratio : 18 : 9

        ที่ข้อมูลยังไม่ครบก็จะเป็น Xiaomi Mi Mix, LG G6 และ Wiko View/View Prime/View XL เพราะยังหาเครื่องจริงมาทดสอบไม่ได้ (ไว้ได้เมื่อไร จะมาอัปเดตให้ทีหลังนะ)

         จะเห็นว่าส่วนใหญ่เป็น 18 : 9 ก็จริง แต่เมื่อดูค่าต่างๆก็จะเห็นว่ายังมีความแตกต่างกันอยู่ ที่ส่งผลที่สุดก็จะเป็นความละเอียดหน้าจอในหน่วย DP และที่น่าสนใจที่สุดก็คงจะเป็น Xiaomi Mi Mix 2 ที่มีค่า Density ที่อยู่นอกเหนือจากที่ระบบแอนดรอยด์มีให้ (เมื่อดูจาก DisplayMetrics [Android Developers] จะเห็นว่าไม่มี Density สำหรับ 440)

แล้วนักพัฒนาต้องทำอะไรเพิ่มบ้าง?

        หลักๆก็เป็นเรื่อง Layout น่ะแหละ ที่ต้องทำให้รองรับกับหน้าจอเหล่านี้ ซึ่งไม่น่าจะมีปัญหาอะไรถ้านักพัฒนาอิงตามบทความ [Android Design] แบ่ง Layout ให้รองรับหน้าจอทุกขนาดด้วย Configuration Qualifier กันเถอะ เพราะสุดท้ายแล้วเครื่องเหล่านี้ก็ยังอยู่ในกลุ่มของ sw360dp อยู่ดี

         โดยปกติแล้วเมื่อเปิดแอปฯบนหน้าจอเหล่านี้ มักจะถูกบังคับให้แสดงเป็น 16:9 เพื่อป้องกันแอปฯหลายๆตัวแสดง Layout เพี้ยน เพราะยังไม่ได้ทำให้รองรับ ดังนั้นนักพัฒนาอยากทำให้รองรับก็ควรเพิ่ม Metadata ไว้ใน Android Manifest เพื่อบอกให้แต่ละเครื่องรู้ด้วย

<!-- AndroidManifest.xml -->

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>

    <application ...>

        ...

        <meta-data
            android:name="android.max_aspect"
            android:value="2.1" />

    </application>

</manifest>

        ในกรณีที่ไม่ใส่ Metadata นี้ จะมีค่าเป็น 1.86 เสมอ ซึ่งเป็นของหน้าจอ 16 : 9 จึงเป็นที่มาว่าทำไมแอปฯที่ไม่ได้ใส่ Metadata ตัวนี้จะแสดงผลไม่เต็มจอ

        นอกจากกำหนดด้วย Metadata แล้ว ถ้าผู้ที่หลงเข้ามาอ่านออกแบบ Layout ให้รองรับ Multi Window แล้วกำหนดค่าไว้ใน Android Manifest ดังนี้

<!-- AndroidManifest.xml -->

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>

    <application ...
        android:resizeableActivity="true">

        ...

    </application>

</manifest>

        ถ้ากำหนด resizeableActivity ก็ไม่จำเป็นต้องกำหนดค่า max_aspect ก็ได้ เพราะถือว่าแอปฯนั้นรองรับกับหน้าจอทุกขนาดทันที

        โดยสามารถดูข้อมูลเพิ่มเติมสำหรับเรื่องนี้ได้ที่ Update your app to take advantage of the larger aspect ratio on new Android flagship devices [Android Developers Blog]

        และสิ่งที่ต้องระวังก็คือการดึงค่าหน้าจอจากเครื่องเหล่านี้มาใช้ในการคำนวณภายในแอปฯ ว่าจะมีการคำนวณผิดพลาดหรือไม่

สรุป

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

        อย่ามัวแต่ปล่อยปละละเลยให้แอปฯต้องกลายเป็นแอปฯเก่าๆที่ไม่รองรับกับเทคโนโลยีใหม่ๆเลยนะ


Scroll To Top

Neighbourhood



เหล่าพันธมิตรแอนดรอยด์

Devahoy Layer Net NuuNeoI The Cheese Factory Somkiat CC Artit-K Arnondora Oatrice Benz Nest Studios Kotchaphan@Medium Jirawatee@Medium Travispea@Medium