25 กรกฎาคม 2555

[Android Design] Device Screen ใน Eclipse ของดีที่ควรหัดใช้ให้เป็น [SDK Tools ต่ำกว่า 20]


        สำหรับ Android SDK Tools ตั้งแต่เวอร์ชัน 21 ขึ้นไปให้อ่านที่ [Android Design] Device Definitions ของเก่าเอามาทำใหม่ [SDK Tools 21 ขึ้นไป]

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

        ** จริงๆ เจ้าของบล้อกควรเขียนบทความการทำแอพให้รองรับหลายหน้าจอก่อน แต่ดันอยากเขียนเรื่องนี้ขึ้นมาก่อน ก็ไว้เดี๋ยวเขียนเสร็จแล้วจะเอามาแปะลิ้งให้ **

        หลายคนอาจจะไม่รู้ว่า Graphic Layout ที่เราเอาไว้สร้างหน้าตาแอพเนี่ยมีดียังไง นอกจากจะลาก Widget ไปลงหน้าต่างแอพ หรือพิมโค๊ดใน XML เท่านั้น


        จากในภาพที่เป็นการเลือกขนาดหน้าจอของอุปกรณ์ที่ใช้ทดสอบ นอกจากจะเลือกจากที่มีอยู่เพื่อทดสอบหน้าจอแล้ว แต่ก็อย่าลืมว่าอุปกรณ์แอนดรอยด์มีหลากหลายสเปค ดังนั้นจึงเป็นไปไม่ได้ที่ว่าในขนาดที่ให้มาจะครบครันเสมอไป ทีนี้มาลองสร้างเพิ่มด้วยตัวเองกันดูดีกว่า โดยเข้าไปที่ Add Custom...



        หน้าต่าง Device Configuration จะแสดงขึ้นมา ซึ่งเป็นการกำหนดค่าให้กับอุปกรณ์นั่นเอง



        ให้เลื่อนลงมาข้างล่างสุดเพื่อเลือก Custom แล้วกดที่ปุ่ม New...



        จะมีหน้าต่างสำหรับสร้างอุปกรณ์ขึ้นมาโดยจะต้องกำหนด Device Name และ Configuration Name ทุกครั้ง อย่างอื่นสามารถกำหนดหรือไม่ก็ได้



        ในตัวอย่างนี้เจ้าของบล็อกจะสร้างเป็น Samsung Galaxy Note ก็ให้กำหนดค่าให้ใกล้เคียงกับความเป็นจริง

        Device Name : 5.3in WXGA (Galaxy Note)
        ชื่อของอุปกรณ์ ตั้งตามใจชอบ เอาให้จำได้ง่ายๆละกัน

        Configuration Name
        เป็นชื่อของการตั้งค่านั้นๆ ใช้ Protrait เพราะว่าเจ้าของบล็อกจะกำหนดให้กับแนวตั้ง

        Screen Size : Large
        ขน่าดหน้าจอของอุปกรณ์

        Screen Ratio : Long
        อัตราส่วนของหน้าจอ Long คือ Widescreen

        Screen Orientation : Portrait
        ทิศทางของหน้าจอ Portrait คือแนวตั้ง Landscape คือแนวนอน

        Density : High Density
        ความหนาแน่นของหน้าจอ

        Screen Dimension : 1280 x 720
        ความละเอียดของหน้าจอ



        สำหรับ Smallest Screen Width, Screen Width และ Screen Height โปรแกรมจะคำนวนจาก Density, Screen Size และ Screen Resolution อัตโนมัติ

        เมื่อกดปุ่ม OK ก็จะเห็นมีรายชื่ออุปกรณ์ที่สร้างโผล่ขึ้นมา ให้กด New... อีกครั้งเพื่อเพิ่มหน้าจอแบบแนวนอน



        เจ้าของบล็อกจะกำหนดชื่อ Configuration Name เป็น Landscape และเปลี่ยน Screen Orientation เป็น Landscape ที่เหลือเหมือนเดิมหมด



        และกด OK ก็จะเห็นว่ามีค่าเพิ่มเข้าไปแล้วเป็น Portrait และ Landscape ก็เป็นอันเสร็จแล้ว กด OK เพื่อปิดหน้าต่างนี้ได้เลย



        เพียงเท่านี้ก็สามารถทดสอบขนาดหน้าจอของอุปกรณ์แอนดรอยด์ที่สร้างขึ้นมาได้แล้ว



        เวลาเจ้าของบล็อกใช้ เจ้าของบล็อกก็จะสร้างไซส์มาตรฐานหลักๆเอาไว้เทส โดยกำหนดค่าให้ใกล้เคียงกับของจริงที่สุด (ถ้าอันไหนผิดก็คอมเม้นบอกที) ซึ่งที่เจ้าของบล็อกใช้เทสก็จะมีทั้งหมดประมาณนี้



        ลองใช้ดูละกัน แล้วการออกแบบแอพของคุณจะง่ายขึ้นทันตาเห็น




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

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