PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

สร้าง app ใน android studio ให้รองรับการแสดงผลบนหน้าจอขนาดต่างๆ

16 April 2015 By


Android จัดหมวดหมู่ของหน้าจอจาก ขนาด และ ความละเอียดหน้าจอ
เราควรจะเพิ่มทางเลือกเพื่อปรับการแสดงผลของ app ของเราให้เหมาะกับขนาด
และความละเอียดหน้าจอที่แตกต่างกัน
 
- ขนาดหน้าจอที่วไปจะมี 4 ขนาดคือ small normal large และ xlarge
- ความละเอียดหน้าจอทั่วไป 4 ระดับ low (ldpi), medium (mdpi), high (hdpi), extra high (xhdpi)
 
การที่จะกำหนด layout และ รูปภาพ เราต้องคำนึงถึงความแตกต่างของหน้าจอ โดยต้อง
เพิ่มโฟลเดอร์ resource แยกออกมา คล้ายๆ กับที่เรากำหนดกรณีให้รองรับหลายภาษา
ตามเนื้อหาบทความที่แล้ว
 
นอกจากนั้น ต้องดูในเรื่องทิศทางการหมุนหน้าจอทั้งแนวนอนและแนวตั้ง (landscape or portrait)
ที่จะมีส่วนในการเปลี่ยนแปลงของขนาดหน้าจอ ดังนั้น app เราก็ควรรองรับการปรับ layout
ตามทิศทางการหมุนของหน้าจอด้วย
 
 
การสร้าง layout สำหรับหน้าจอที่ต่างกัน
 
เพื่อให้ผู้ใช้งาน app ของเราได้รับประสบการณ์การใช้งานที่ดีกับการใช้งานผ่านหน้าจอขนาดต่างๆ เราควร
สร้างไฟล์ layout เฉพาะเจาะจงสำหรับขนาดหน้าจอนั้นๆ โดยหลักการก็คือ ให้เราสร้างโฟลเดอร์
ชื่อ layout-(ตามด้วยขนาดหน้าจอ)  ตัวอย่างเช่น เราจะสร้าง layout สำหรับแสดงผลในหน้าจอขนาดใหญ่
ไว้ในโฟลเดอร์ชื่อ res/layout-large/  แบบนี้เป็นต้น
 
หมายเหตุ:: ระบบจะทำการขยายและปรับขนาดของ layout ให้แสดงเต็มจออัตโนมัติ ดังนั้น เราไม่ต้องกังวล
เรื่องขนนาดของ UI ว่ามีขนาดตามจริงหรือไม่  แต่ให้เราไปสนใจในส่วนของโครงสร้างของ layout ที่จะมีผล
ต่อการใช้งานมากกว่าแทน เช่น ขนาด หรือตำแหน่งของ view ที่สำคัญที่สุดกับ view อื่นๆ รอบข้างในระดับเดียวกัน
 
ตัวอย่างโครงสร้าง layout สำหรับหน้าจอ normal และ สำหรับหน้าจอขนาดใหญ่ large
 
MyProject/
    res/
        layout/
            main.xml
        layout-large/
            main.xml
 
ชื่อไฟล์ layout xml จะต้องเป็นชื่อเดียวกัน
 
นอกจากนี้เรายังสามารถกำหนด layout ตามทิศทางการหมุนของหน้าจอ หรือการแสดงหน้าจอแนวนอนหรือแนวตั้ง
ได้อีกด้วย ตัวอย่างโครงสร้าง
 
MyProject/
    res/
        layout/              # ค่าเริ่มต้น (แสดงแนวตั้ง)
            main.xml
        layout-land/         # แนวนอน
            main.xml
        layout-large/        # ขนาดใหญ่ (แสดงแนวตั้ง)
            main.xml
        layout-large-land/   # ขนาดใหญ่แนวนอน
            main.xml
 
ส่วนการเรียกใช้งานใน java code ก็ใช้เรียกใช้งานปกติ ระบบ Android จะเลือก layout ที่เหมาะกับหน้าจอที่กำลัง
ใช้งานอยู่ให้อัตโนมัติ
 
@Override
 protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.main);
}
 
เรามาลองเพิ่ม layout แบบแนวนอน ผ่าน android stuidio 
 
1. คลิกขวาที่ res เลือก New > Directory  เพื่อสร้างโฟลเดอร์ แล้วกำหนดชื่อว่า layout-land
 

 
 


 
 
    จะสังเกตว่า ยังไม่มี โฟลเดอร์นี้แสดง แต่ความจริงแล้ว androud studio ได้สร้างให้แล้ว

 
 
2. คลิกขวาที่ไฟล์ activity_main.xml แล้วเลือก Copy
 


 
 
3. คลิกขวาที่ res แล้วเลือก Paste
 
 
    เลือกที่ปุ่ม ... (จุดสามจุด) เพื่อเลือกโฟลเดอร์ layout-land ที่เราได้สร้างขึ้น
    แล้วเลือก OK และก็ OK อีกรอบ
 
 


 
 
4. เราจะได้ไฟล์ activity_main.xml (land) สำหรับวางการแสดงผล สำหรับหน้าจอ
    ที่หมุนแนวนอน ตามรูป
 

 
 
    เท่านี้เราก็พอจะรู้วิธีการกำหนด layout สำหรับขนาดหน้าจอต่างๆ อย่างง่ายกันแล้ว
 
 

 
การสร้าง รูปภาพ Bitmaps สำหรับหน้าจอขนาดที่ต่างกัน
 
เราควรกำหนดรูปภาพสำหรับใช้งานในหน้าจอที่มีความละเอียดขนาดต่างๆ ได้แก่  
low (ldpi), medium (mdpi), high (hdpi), extra high (xhdpi)  แนวทางต่อไปนี้
เหมาะสำหรับใช้ในการกำหนดคุณภาพให้กับรูปภาพที่ต้องการใช้งานและแสดงผลใน
หน้าจอที่มีความละเอียดแตกต่างกัน
 
ให้เราสร้างรูปที่ต้องการในรูปแบบ vector และเป็นรูปที่จะใช้กับความละเอียดสูงสุดคือ xhdpi  
จากนั้นเราจะกำหนดขนาดของรูป ตามค่าความละเอียดต่างๆ ตามสัดส่วนดังนี้
 
xhdpi: 2.0
hdpi: 1.5
mdpi: 1.0 (ค่าตั้งต้น)
ldpi: 0.75
 
หมายความว่า สมมติเรามีรูปชื่อ logo.png ขนาด 200 x 200 px ที่ความละเอียดสูงสุด 
xhdpi หรือในสัดส่วน 2 เท่า ดังนั้นขนาดของรูปสำหรับค่าตั้งต้น ก็คือ 200 / 2 เท่ากับ 100 
เมื่อได้ค่า baseline ตั้งตั้นมาแล้ว เราก็สามารถเอาค่านี้ไปคูณ เข้ากับสัดส่วนของแต่ละความ
ละเอียดหน้าจอ ก็จะได้ว่า ขนาดของรูป logo.png ของแต่ละความละเอียดจะเป็นดังนี้
 
xhdpi: 200 x 200 px (2x100)
hdpi: 150 x 150 px (1.5x100)
mdpi: 100 x 100 px (1x100)
ldpi: 75 x 75 px (0.75x100)
 
โครงสร้างไฟล์ใน drawable ก็จะประมาณนี้
 
MyProject/
    res/
        drawable-xhdpi/
            logo.png
        drawable-hdpi/
            logo.png
        drawable-mdpi/
            logo.png
        drawable-ldpi/
            logo.png
 
ส่วนการสร้างโฟลเดอร์ แล้ว copy รูปมาวาง ก็ทำเช่นเดียวกับที่ได้กล้าวมาแล้ว อย่างตัวอย่าง
ในบทความ ใช้งาน icon ใน action bar
 
การเพิ่ม action button ใน action bar ตอนที่ 1 
http://www.ninenik.com/content.php?arti_id=618 via @ninenik
 
เนื้อหาส่วนนี้เป็นการแนะนำการใช้งานอย่างง่ายให้เห็นโครงสร้าง เราคงได้ศึกษาเพิ่มเติมในบทความต่อๆ ไป



เนื้อหาที่เกี่ยวข้อง



Tags:: android studio density drawable layout android

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





URL สำหรับอ้างอิง