20 พฤศจิกายน 2555

[Android Dev Tips] Device Definitions ของเก่าเอามาทำใหม่ [SDK Tools 21 ขึ้นไป]



        บทความนี้เนื่องมาจากมี Development Tools เวอร์ชัน 21 เข้ามาใหม่ ได้มีการแก้ไขตัว Eclipse เพิ่มเติมในส่วนที่เรียกว่า Device Definitions ที่เจ้าของบล็อกเรียกว่า Device Screen ที่ได้เคยอธิบายไปแล้ว [Android Design] Device Screen ใน Eclipse ของดีที่ควรหัดใช้ให้เป็น [SDK Tools ต่ำกว่า 20] ซึ่งมีการแก้ไขมากพอสมควรที่เจ้าของบล็อกจะต้องทำบทความเรื่องนี้ใหม่อีกคร้ง

        กลับมาจุดเริ่มต้นใหม่อีกครั้งเลยละกันกับเรื่องนี้ สำหรับอุปกรณ์แอนดรอยด์ เป็นอุปกรณ์ที่มีความเป็น Fragment สูงมาก หรือก็คือมีความหลากหลายของฮาร์ดแวร์มากมาย สารพัดสเปคจากแต่ละค่าย เพราะความที่มันเป็น Open Source จึงทำให้แต่ละรุ่นมีความแตกต่างกันออกไปมากมาย ซึ่งทำให้มีปัญหาในการพัฒนาแอปพลิเคชันให้รองรับกับทุกเครื่องได้ค่อนข้างยาก ถ้าแอปพลิเคชันนั้นๆไม่ได้ทำงานขั้นสูงมาก เป็นแค่แอปพลิเคชันพื้นๆ ก็จะไม่มีปัญหาเรื่องสเปคนัก  แต่สำหรับเหล่านักพัฒนาทั้งหลายก็จะรู้ดีกันอยู่แล้วว่าปัญหา Fragment เบื้องต้นที่เป็นปัญหาหลักเลยก็คือขนาดและความละเอียดของหน้าจอนั้นเอง ถ้าผู้ที่หลงเข้ามาอ่านแล้วยังไม่รู้จักปัญหาดังกล่าว ก็ลองเขียนแอปพลิเคชันซักตัวให้รองรับกับอุปกรณ์แอนดรอยด์ทุกเครื่องดู

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


        ก่อนอื่นให้เปิดหน้า Layout (ไฟล์ที่อยู่ใน layout และมีนาสกุลเป็น .xml) จะเป็นอันไหนก็ได้แล้วแต่ โดยเจ้าของบล็อกก็จะยกตัวอย่างตามภาพนี้



        ทีนี้ให้ดูที่กรอบสีแดงจะเห็นว่าในภาพของเจ้าของบล็อก ได้เลือกเป็น 2.7" QVGA ไว้ ซึ่งเป็นขนากหน้าจอที่จะแสดงหน้าต่างของแอปในภาพตัวอย่างนี้นั่นเอง

        พอลองกดดูก็จะพบว่ามีรายชื่อหน้าจอขนาดต่างๆให้เลือก



        ให้ลองเลือกอันอื่นดู อันไหนก็ได้ ก็จะพบว่าขนาดหน้าจอแอปในภาพเปลี่ยนไปจะมีขนาดตามที่ได้เลือกไว้ ซึ่งอันนี้นี่แหละ ที่จะช่วยให้ทดสอบขนาดหน้าจอต่างๆได้ โดยไม่ต้องไปนั่งหาเครื่องจริงมาทดสอบ (แต่ถ้ามีเครื่องจริงก็ใช้ทดสอบดีกว่านะ)



        แต่ว่า...ถ้าขนาดหน้าจอเครื่องของผู้ที่หลงเข้ามาอ่านไม่ตรงกับที่มีให้เลือกล่ะ? เนื่องจากทาง Development Tools ก็ไม่สามารถแจกลิสต์อุปกรณ์ทั้งหมดได้เช่นกัน จึงให้ผู้พัฒนาสามารถเพิ่มเข้าไปได้เอง เพื่อให้ได้ขนาดตามที่ต้องการ

        โดยเริ่มจากไปที่ Window > Android Virtual Device Manager (สำหรับ SDK Tools 21 ขึ้นไป) ถ้าผู้ที่หลงเข้ามาอ่านใช้ SDK Tool ที่ต่ำกว่า 21 ให้อ่านจากบทความนี้แทน [Android Design] Device Screen ใน Eclipse ของดีที่ควรหัดใช้ให้เป็น [SDK Tools ต่ำกว่า 20]



        ก็จะมีหน้าต่าง Android Virtual Device Manager แสดงขึ้นมา หรือที่เรียกว่า AVD หน้านี้จะมีไว้สำหรับการสร้าง Emulator ถ้าสนใจก็ไปหาอ่านกันเองละกันนะ



        ทีนี้ก็ข้ามหน้านี้ไปก่อน ให้เลือกที่แถบ Device Definitions แทน เป็นหน้าต่างสำหรับกำหนดขนาดหน้าจออุปกรณ์แอนดรอยด์ตามต้องการจะเห็นว่ามีการกำหนดไว้บ้างแล้ว ซึ่งเป็นค่าที่กำหนดมาแล้วของ Development Tools



        ให้กดปุ่ม New Device... เพื่อสร้างขึ้นมาใหม่ โดยจะมีช่องต่างที่ประกอบไปด้วย

                Name : ชื่ออุปกรณ์แอนดรอยด์

                Screen Size (in) : ขนาดหน้าจอ(นิ้ว)

                Resolution (px) : ความละเอียดหน้าจอ (Pixel)

                Sensors : เซนเซอร์ของอุปกรณ์แอนดรอยด์

                Camera : กล้องของอุปกรณ์แอนดรอยด์

                Input : จำพวกปุ่มหรือ Track Ball ที่ใช้ควบคุม

                RAM : หน่วยความจำชั่วคราว (MB หรือ GB)

                Size : ขนาดของหน้าจอ (Small, Normal, Large และ X-Large

                Screen Ratio : อัตราส่วนของจอ (No Long กับ Long)

                Density : ความหนาแน่นของหน้าจอ (ldpi, mdpi, hdpi และ xhdpi)

                Button : ปุ่มควบคุมมาตรฐาน

                Device State : กำหนดค่าสำหรับการหมุนหน้าจอ (ยังไม่แน่ใจ)



        สำหรับ Size, Screen Raio และ Density เมื่อกำหนดค่าใน Screen Size กับ Resolution โปรแกรมจะมีการคำนวณออกมาให้โดยอัตโนมัติ แต่เท่าที่ลองมี Size ที่เพี้ยนไปบ้าง ดังนั้นก็อย่าลืมเช็คด้วยว่าถูกต้องหรือป่าว

        สำหรับผู้ที่หลงเข้ามาอ่านคนใดไม่รู้ว่าเครื่องที่ใช้อยู่เป็นหน้าจอขนาดไหน และมีความหนาแน่นของหน้าจอระดับใด ให้ดาวน์โหลด Screen Check มาใช้ดู Check Screen [Google Play]

ส่วน Screen Ratio ป็นอัตราส่วนหน้าจอ ถ้า 16 : 9 , 16 : 10 หรือ 15 : 9 จะเป็น Long และถ้าเป็น 4 : 3 หรือ 5 : 3 ก็จะเป็น No Long ส่วน Button จะเป็นปุ่ม Home Menu Back หรือ Task นั่นเอง ถ้า Hardware ก็จะหมายถึงเครื่องที่มีปุ่ม Home อยู่บนตัวเครื่องเช่นเครื่องของ Samsung แต่ถ้า Software คือเครื่องที่มี Nav Bar อย่างตระกูล Nexus นั่นเอง

        ก็ให้กำหนดค่าต่างๆตามเครื่องของผู้ที่หลงเข้ามาอ่านแล้วกดปุ่ม Create Device จากนั้นก็จะกลับมาที่หน้าต่าง Android Virtual Device Manager ก็จะเห็นว่า มีอุปกรณ์ที่ได้สร้างเมื่อครู่นี้แสดงขึ้นมาในรายชื่อแล้ว



        ทีนี้ปิดหน้าต่างนั้นไปแล้วดูที่หน้าต่าง Layout อีกครั้ง ให้เลือกขนาดหน้าจอที่ต้องการแสดงใหม่ ก็จะพบว่ามีการแบ่งหมวดหมู่แทนคือ Generic, Google และ User สำหรับที่สร้างขึ้นมาเมื่อครู่ก็จะอยู่ในหมวดของ User



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



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



        จะเห็นว่าเจ้าของบล็อกได้สร้างขนาดหน้าจอตามระดับต่างๆดังนี้

                                small - ldpi
                                small - mdpi
                                small - hdpi
               
                                normal - ldpi
                                normal - mdpi
                                normal - hdpi
                                normal - xhdpi

                                large - ldpi
                                large - mdpi
                                large - hdpi

                                xlarge - ldpi
                                xlarge - mdpi
                                xlarge - hdpi

        ซึ่งเป็นขนาดหน้าจอในระดับต่างๆที่ครอบคลุมกับอุปกรณ์แอนดรอยด์เกือบทุกเครื่อง

        ทีนี้มาดูกันต่อที่เดิม จะเห็นว่ามีให้เลือก Preview All Screens ได้ ซึ่งจะอยู่ข้างล่างในแถบเลือกขนาดหน้าจอ


        ซึ่งเป็นการแสดงหน้าจอหลายๆขนาดพร้อมๆกัน อันนี้ Google เคยโชว์คุณสมบัตินี้ไปแล้วกับงาน Google I/O 2012 แต่พึ่งจะทำออกมาให้ใช้งานได้จริงใน SDk Tools 21 ทำให้สามารถดูหน้าจอได้หลายๆขนาดพร้อมๆกันในทีเดียว


        ซึ่งรูปแบบการแสดงก็จะมีให้เลือกคราวๆโดยเลือกที่มุมซ้ายบน



        เจ้าของบล็อกขอพูดถึงแต่ Manual Previews ละกันนะ เอาไว้กำหนดเองว่าจะให้แสดง Layout ตัวไหนบ้าง ให้เลือกเป็น Manual Previews ก่อน จะเห็นว่ามีแสดงแค่อันเดียว เพราะว่ายังไม่ได้กำหนดเพิ่ม ก็ให้เลือกขนาดหน้าจอที่ต้องการก่อน แล้วเลือกที่ Add As Thumbnail...



        ก็จะมีหน้าต่างแสดงขึ้นมาให้ใส่ชื่อของ Thumbnail นั้นๆ ให้กำหนดตามต้องการ เจ้าของบล็อกขอยกตัวอย่างเป็น Galaxy Gio



        ก็จะได้เป็น Thumbnail ตามที่กำหนดเองแล้ว



        จะทำเพิ่มหลายๆแบบเอาไว้ทดสอบก็ได้ หรือจะเลือกแสดงแบบ Preview All Screen Sizes แทนก็ได้ตามสะดวก



        และถ้าผู้ที่หลงเข้ามาอ่านได้สร้าง AVD ขึ้นมา ก็แสดง Layout ตามขนาดหน้าจอของ AVD ใน Graphical Layout ได้เช่นกัน โดยจะรายชื่อ AVD ที่สร้างขึ้นมาให้เลือกได้ทันทีเลย


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

        ซึ่งในการใช้งาน Device Definitions จริงๆให้ดูบทความ [Android Design] Device Definitions Add-on สำหรับ Layout Preview ใน Graphical Layout เพราะเจ้าของบล็อกได้ทำเป็นอุปกรณ์ทั้งหมดให้ไปใช้งานได้ทันทีแล้ว


        สะดวกนะเออ




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

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