24 พฤศจิกายน 2555

[Android Design] Screen Rotation ทำอย่างไรให้รองรับกับการหมุนหน้าจอได้



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

        สมมติว่าเจ้าของบล็อกสร้าง Layout มาหน้าหนึ่ง มีหน้าตาแบบนี้


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



        ผู้ที่หลงเข้ามาอ่านคนสงสัยว่า แล้วไงล่ะ? ก็ปกติดีนี่ ไม่เห็นจะมีปัญหาอะไร ดูได้ทั้งแนวตั้งและแนวนอน เพราะเจ้าของบล็อกออกแบบ Widget ให้เล็กและอยู่กลางหน้าจอ


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

        ดังนั้นการออกแบบแอปพลิเคชันให้รองรับ จึงต้องออกแบบทั้งสองแนว ดังนี้




        โดยการสร้างทั้งสองแบบนี้เจ้าของบล็อกสร้างใน main.xml เหมือนกันนะ แต่จะแบ่งเป็นโฟลเดอร์แยกกัน ซึ่งแต่ละโฟลเดอร์จะรองรับแนวนั้นๆ


        ซึ่งการสร้างโฟลเดอร์ให้รองรับกับหน้าจอ เคยพูดถึงไปแล้วในบทความ [Android Design] Supporting Multiple Screens - การรองรับหน้าจอที่หลากหลาย แต่เห็นว่าออกแนวทฤษฎีมากไปหน่อย อ่านไปอาจจะไม่เห็นภาพ เจ้าของบล็อกก็เลยทำบทความนี้ขึ้นมาเพื่อเป็นตัวอย่างให้เข้าใจขึ้น

        ทีนี้พอลองทดสอบดูก็จะเห็นว่า Layout จะเปลี่ยนไปตามทิศทางของจอแล้ว


        จากวีดีโอ ถึงแม้ว่ามีการใส่ข้อความใน Edit Text หรือเลือก Check Box เวลาหมุนเครื่องก็ยังคงเดิมอยู่ ถึงแม้ว่าจะเปลี่ยน Layout ที่ใช้แสดงผล

        เพิ่มเติม - สำหรับการหมุนจอครั้งหนึ่ง ฟังก์ชัน onResume จะทำงานด้วย ถ้าต้องการกำหนดค่าใดๆทุกครั้งที่มีการหมุนจอก็ใส่ใน onResume แทน

        เพียงเท่านี้แอปพลิเคชันที่สร้างขึ้นมา ก็หมดปัญหาเวลาหมุนหน้าจอแล้ว
        ซึ่งเดิมจากที่หลายๆคนใช้วิธีล็อคทิศทางให้เป็นแนวตั้งหรือแนวนอนอย่างเดียว เจ้าของบล็อกไม่ค่อยแนะนำซักเท่าไร เพราะมันคือลูกเล่นบน Smart Device ถ้าไม่ลำบากนัก ก็แนะนำทำออกมาให้รองรับทั้งแนวตั้งและแนวนอนดีกว่า แต่ถ้าติดปัญหาจุกจิกที่ทำให้รองรับหน้าจอทั้งสองแนวไม่ได้ก็ไม่เป็นไร


        และในบทความนี้นอกจากการหมุนหน้าจอ เจ้าของบล็อกแนะนำให้ดู โค๊ดตัวอย่างการจัด Layout ด้วย สำหรับผู้ที่จัด Layout ไม่ค่อยเก่ง รวมไปถึงเรื่องการใช้สีด้วย จะเห็นว่าไม่จำเป็นต้องใช้สีหลากหลาย เจ้าของบล็อกใส่แค่สามสีคือ ขาว ฟ้า เหลือง ทำให้แอปดูลงตัว และดูเรียบง่ายมากกว่าการใช้สีสะเปะสะปะไม่มีความลงตัว และการออกแบบปุ่ม Button กับ Check Box เอง

        สำหรับผู้ที่หลงเข้ามาอ่านคนใดต้องการไฟล์ตัวอย่างสามารถดาวน์โหลดได้ที่ Screen Rotation [Google Drive]

        จบละ



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

Devahoy Layer Net NuuNeoI The Cheese Factory Somkiat CC Mart Routine Artit-K Arnondora Kamonway Try to be android developer Oatrice Benz Nest Studios Kotchaphan@Medium Jirawatee@Medium Travispea@Medium