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

ดังนั้นในบทความนี้จะมีเนื้อหาเกี่ยวกับรายละเอียดพื้นฐานที่นักพัฒนาควรรู้เพื่อพัฒนาแอปให้รองรับการใช้งานบนอุปกรณ์แอนดรอยด์จำพวก Foldable Device ได้อย่างเหมาะสม

Foldable Device?

ในปัจจุบันเทคโนโลยีเกี่ยวกับหน้าจอสำหรับอุปกรณ์พกพาอย่างอุปกรณ์แอนดรอยด์ได้มาอยู่ในจุดที่ผู้ผลิตสร้างหน้าจอที่สามารถพับได้แล้ว จึงทำให้มีการพัฒนาออกมาเป็นสินค้าอย่างมือถือจอพับหรือที่ในฝั่งแอนดรอยด์เรียก Form Factor แบบนี้ว่า Foldable Device นั่นเอง

โดยจะมีหน้าจออยู่ 2 หน้าจอด้วยกัน แบ่งเป็นหน้าจอหลัก (Main Display) กับหน้าจอด้านนอก (Cover Display) และที่วางขายอยู่ในปัจจุบันจะแบ่งออกตามลักษณะการใช้งานเป็น 2 รูปแบบด้วยกัน

  • Foldable - หน้าจอหลักมีความกว้างเทียบเท่ากับหน้าจอ Tablet ในขณะที่หน้าจอด้านนอกจะมีขนาดเทียบเท่ากับหน้าจอมือถือ การพับและกางหน้าจอจะมีทิศทางในแนวนอน โดยผู้ใช้สามารถใช้งานแอปโดยสลับไปมาระหว่างหน้าจอทั้งสองได้
  • Flippable - หน้าจอหลักมีความกว้างเทียบเท่ากับหน้าจอมือถือ ในขณะที่หน้าจอด้านนอกมีขนาดเล็กสำหรับแสดงข้อมูลพื้นฐานหรือแสดง Widget เป็นหลัก การพับและกางหน้าจอจะมีทิศทางในแนวตั้ง โดยการใช้งานแอปทั่วไปจะเน้นอยู่ที่หน้าจอหลักเพียงแค่หน้าจอเดียว และในบางรุ่นก็สามารถเปิดแอปบนหน้าจอด้านนอกได้ด้วย

และการพัฒนาแอปให้รองรับกับ Foldable Device นั้นก็จะเน้นไปที่อุปกรณ์แบบ Foldable เป็นหลัก เนื่องจาก Flippable มีหน้าจอด้านนอกขนาดเล็ก ไม่ได้เอื้อต่อการใช้งานแอปเป็นหลักอยู่แล้ว ในขณะที่ Foldable ถูกออกแบบมาให้ใช้งานแอปได้ไม่ว่าจะเป็นหน้าจอไหนก็ตาม

รองรับ Responsive UI

เนื่องจากอุปกรณ์แบบ Foldable คือลูกผสมของหน้าจอระหว่าง​ Phone และ Tablet จึงต้องคำนึงถึงการแสดงผลบนหน้าจอขนาดใหญ่แบบเดียวกับ Tablet ด้วย

หน้าจอหลักของ Foldable ส่วนใหญ่จะมีขนาดอยู่ที่ประมาณ​ 7-8 นิ้ว

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

และนอกจากนี้ หน้าจอหลักของ Foldable Device ก็สามารถเปิดแอปได้หลายตัวพร้อมกัน ไม่ว่าจะแบ่งหน้าจอแบบ Split-screen Mode หรือ Free-form Mode จึงเป็นที่มาว่าทำไมแอปควรออกแบบ UI ให้ Responsive ตั้งแต่แรก

จัดการกับ Configuration Changes ให้ดี

เมื่อผู้ใช้ Foldable Device สลับหน้าจอในระหว่างเปิดแอป สิ่งที่เกิดขึ้นกับแอปก็คือ Configuration Changes นั่นเอง ซึ่ง Configuration Changes เป็นพฤติกรรมพื้นฐานของระบบปฏิบัติการณ์แอนดรอยด์ และเพื่อให้แอปสามารถทำงานต่อได้อย่างราบรื่น ก็ควรจัดการกับโค้ดให้รองรับกับการทำงานดังกล่าวด้วยเช่นกัน

ซึ่งเดิมที Configuration Changes จะเป็นสิ่งที่เกิดขึ้นได้ในระหว่างการใช้งานแอปบนแอนดรอยด์ แค่อาจจะไม่ได้เกิดขึ้นบ่อย แต่สำหรับการใช้ Foldable Device ก็จะมีโอกาสที่แอปต้องเจอกับ Configuration Changes บ่อยขึ้นจากการสลับไปมาระหว่างหน้าจอหลักกับหน้าจอด้านนอกนั่นเอง

ความแตกต่างในการแสดงผลแอปที่รองรับเฉพาะแนวตั้ง

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

ยกตัวอย่างเช่น

  • Samsung Galaxy Z Fold5 มีสัดส่วนหน้าจอเป็นแนวตั้ง ทำให้การเปิดแอปสามารถแสดงผลได้เต็มจอ
  • Google Pixel Fold มีสัดส่วนหน้าจอเป็นแนวนอน ทำให้การเปิดแอปในแนวตั้งไม่สามารถแสดงผลเต็มจอได้ จึงต้องแสดงผลด้วยความกว้างน้อยกว่าปกติ จึงเห็นเป็นขอบดำด้านข้างหน้าจอทั้งสองฝั่ง
  • Google Pixel 9 Pro Fold มีสัดส่วนหน้าจอเป็นแนวตั้ง แต่เมื่อหักลบพื้นที่ของ Navigation Bar กับ Status Bar จะมีพื้นที่เหลือเป็นแนวนอน จึงใช้วิธีเดียวกับ Google Pixel Fold แต่เหลือพื้นที่เป็นขอบดำน้อยกว่า

และในบางรุ่นอย่าง Google Pixel 9 Pro Fold จะมีเมนูเพื่อให้ผู้ใช้กำหนดอัตราส่วนในการแสดงผลสำหรับแอปเหล่านี้ตามที่ต้องการได้อีกด้วย เช่น อยากจะบังคับให้แสดงเต็มหน้าจอ, 3:2, หรือครึ่งหนึ่งของหน้าจอ เป็นต้น

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

ความกว้างของหน้าจอด้านนอก

Foldable Device ในบางรุ่นอย่างเช่น Samsung Galaxy Z Fold ไปจนถึง Fold 5 หรือ OPPO Find N3 จะมีความกว้างหน้าจอด้านนอกที่ต่ำกว่า 360dp ซึ่งเป็นความกว้างที่ต่ำกว่าขนาดหน้าจอมือถือทั่วไป จึงมีโอกาสที่จะเจอปัญหา UI เพี้ยนจากความกว้างของหน้าจอได้

ดังนั้นถ้าอยากจะให้แอปรองรับการแสดงผลบน Foldable Device ในบางรุ่นที่มีความกว้างต่ำกว่าปกติ ก็อาจจะต้องออกแบบแอปให้รองรับความกว้างหน้าจอต่ำสุดที่ 320dp แทน (ไม่ค่อยแนะนำให้ทำ เมื่อเทียบกับจำนวนผู้ใช้ที่มี)

ส่วนรุ่นใหม่ ๆ ที่เปิดตัวในปัจจุบันก็ทยอยใช้ความกว้างที่เทียบเท่ากับมือถือทั่วไปแทนแล้ว

Foldable Posture

นอกจากการ "พับ" และ "กาง"  หน้าจอแล้ว อุปกรณ์อย่าง Foldable Device ก็ยังมีลูกเล่นอย่าง "กางหน้าจอครึ่งเดียว" (Half-opened) หรือ "แสดงผลบน 2 หน้าจอพร้อมกัน" (Dual Screen)  อีกด้วย จึงทำให้นักพัฒนาสามารถใส่ลูกเล่นเพิ่มเข้าไปในแอปเพื่อให้ทำงานสอดคล้องกับท่าทางการพับหน้าจอ (Foldable Posture) เหล่านี้ด้วย โดยใช้ Library ที่ชื่อว่า Jetpack WindowManager เข้ามาช่วยจับสถานะดังกล่าว

Make your app fold aware | Android Developers

การทดสอบแอป

การจะหาอุปกรณ์แอนดรอยด์ที่เป็น Foldable Device มาทดสอบแอปก็ไม่ใช่เรื่องง่าย ด้วยราคาที่สูงกว่ามือถือทั่วไป ถ้าจะซื้อมาทดสอบแอปโดยเฉพาะก็คงไม่ค่อยคุ้มค่าซักเท่าไร (เว้นแต่ว่าจะใช้เป็นเครื่องส่วนตัวด้วย) และการใช้ Android Emulator ก็อาจจะไม่ตอบโจทย์กับสิ่งที่ต้องการทดสอบทั้งหมด

ดังนั้นอีกหนึ่งทางเลือกที่แนะนำและใช้งบน้อยกว่าก็คือ Android Device Streaming บน Android Studio ที่มี Foldable Device ของจริงให้เลือกใช้งานผ่านอินเตอร์เน็ตได้นั่นเอง โดยบริการดังกล่าวจะผูกกับโปรเจคบน Firebase รวมไปถึงค่าใช้จ่ายด้วยเช่นกัน

Android Device Streaming, powered by Firebase | Android Studio | Android Developers
Access real physical Android devices hosted in Google's Data Centers, directly from Android Studio.

แหล่งข้อมูลอ้างอิง