จริงๆเรื่องการจัดการกับไฟล์ภาพที่ใช้ใน Android App เรียกได้ว่าเป็นปัญหาหลักๆของนักพัฒนาหลายๆคนเลยก็ว่าได้ เพราะบนแอนดรอยด์นั้นมีเรื่องของ Configuration Qualifier ที่ทำให้นักพัฒนาต้องปวดหัวกับมันมากมาย ไม่ว่าจะเป็นเรื่อง DPI หรือ Smallest-width ซึ่งทั้งสองอย่างนี้เป็นเรื่องที่ต้องใช้เวลาในการทำความเข้าใจพอสมควร
นักพัฒนาส่วนใหญ่ที่ไม่เข้าใจเรื่อง Configuration Qualifier มักจะจัดการกับไฟล์ภาพที่ใช้ในแอปฯกันแบบผิดวิธี ซึ่งจะส่งผลในหลายๆเรื่อง เช่น เมื่อเปิดบนเครื่องรุ่นอื่นๆแล้วภาพแสดงผลเพี้ยนบ้าง หรือแอปฯกระตุกเพราะภาพที่ใช้มีขนาดที่ไม่เหมาะสม และอื่นๆอีกมากมาย
ดังนั้นมาดูกันดีกว่าว่า ปกติเวลาเจ้าของบล็อกต้องทำแอปฯตัวหนึ่ง เจ้าของบล็อกนั้นมีวิธีจัดการกับไฟล์ภาพอย่างไรไม่ให้มีปัญหาวุ่นวายแบบนั้น
Android App สามารถใช้ภาพแบบไหนได้บ้าง?
อันนี้ขอเริ่มจากปูทางให้กับนักพัฒนามือใหม่ด้วยก็ว่าได้ ว่าปกติแล้วภาพที่ใช้ในแอปฯนั้นมีหลายประเภท และมีชื่อเรียกรวมกันทั้งหมดว่า Drawableโดยจะแยกประเภทออกได้เป็น 3 ประเภทหลักๆดังนี้
• Bitmap Drawable
• Shape Drawable
• Vector Drawable
Bitmap Drawable
ไฟล์ภาพต่างๆไม่ว่าจะเป็น JPG, PNG, GIF หรือ WebP นั้นอยู่ในกลุ่มของ Bitmap Drawable ครับ ซึ่งเป็นธรรมดาอยู่แล้วล่ะที่จะต้องมีการเอาไฟล์ภาพที่ Graphic Designer ทำไว้ให้ หรือทำเอง หรือว่าไปหาดาวน์โหลดมาใช้งาน
ซึ่งไฟล์เหล่านี้สามารถเลือกได้ว่าจะเก็บไว้ในโฟลเดอร์ drawable หรือว่า mipmap ทั้งนี้ขึ้นอยู่กับเวอร์ชันขั้นต่ำของแอปฯนั้นๆ เพราะการเอาภาพไปเก็บไว้ใน mipmap เพื่อใช้งานจะรองรับเฉพาะ Android 4.3 ขึ้นไป (ยกเว้นภาพ App Icon)
ถ้าผู้ที่หลงเข้ามาอ่านคนไหนยังไม่รู้จักกับ Mipmap ในแอนดรอยด์ แนะนำให้ไปอ่านบทความ รู้จักกับ mipmap ในวันที่ Android Studio 1.1 ย้ายไอคอนใน Template จาก drawable ไป mipmap [NuuNeoI] ก่อนละกันเนอะ
Shape Drawable
เป็น XML Resource อย่างหนึ่งของแอนดรอยด์ที่จะทำให้นักพัฒนาสามารถสร้างภาพที่มีรูปทรงง่ายๆโดยใช้ XML โดยเก็บไฟล์เหล่านั้นไว้ในโฟลเดอร์ drawableส่วนรายละเอียดตามไปอ่านกันได้ที่ [Android Design] สร้างภาพง่ายๆจาก XML ด้วย Shape Drawable
Vector Drawable
เป็น XML Resource แบบใหม่ที่ทางแอนดรอยด์พัฒนาขึ้นมาใน Android 5.0 Lollipop ซึ่งเป็นการทำให้สามารถใช้ภาพที่เป็นแบบ Vector ภายในแอปฯได้ส่วนรายละเอียดตามไปอ่านกันได้ที่ [Android Code] ยินดีต้อนรับเข้าสู่โลกของ Vector ด้วย Vector Drawable
เลือกใช้ Drawable แบบไหนให้เหมาะสม
ทีนี้ผู้ที่หลงเข้ามาอ่านก็ต้องพิจารณาก่อนว่าแต่ละภาพที่จะเอามาใช้ในแอปฯนั้นควรเลือกเป็น Drawable แบบไหนดี โดยจะมีวิธีพิจารณาแบบง่ายๆดังนี้
ใช้ Vector Drawable ถ้า...
• เป็นภาพ Icon หรือสัญลักษณ์• สามารถทำเป็นภาพ Vector ได้
เงื่อนไขการใช้งาน
• Vector Drawable เดิมทีถูกสร้างขึ้นมา เพื่อใช้งานบน API 21 ขึ้นไป• ควรใช้ Support Vector Drawable เพื่อให้รองรับกับเวอร์ชันต่ำกว่า API 21 ได้
• ตัวไฟล์จะอยู่ในรูป XML และเก็บไว้ในโฟลเดอร์ Drawable
• กรณีของ Support Vector Drawable เมื่อแอปฯทำงานบนเครื่องที่เป็น API 21 ขึ้นไป จะใช้ Vector Drawable โดยตรงเลย แต่ถ้าทำงานบนเครื่องที่ต่ำกว่า API 21 จะใช้ไฟล์ภาพ PNG ที่ถูกสร้างขึ้นตอน Compile
ใช้ Shape Drawable ถ้า...
• ภาพเป็นรูปทรงพื้นฐาน เช่น วงกลม สี่เหลี่ยม
• ใช้เป็นภาพพื้นหลังสำหรับปุ่มหรือกรอบข้อความ
• รองรับกับทุกเวอร์ชัน
• ตัวไฟล์จะอยู่ในรูป XML และเก็บไว้ในโฟลเดอร์ Drawable
• ไม่ได้ทำเป็นภาพ Vector ตั้งแต่แรกหรือทำไม่เป็น
• รองรับไฟล์ JPG, PNG, GIF และ WebP
• ตัวไฟล์จะเก็บไว้ในโฟลเดอร์ Drawable หรือ Mipmap ก็ได้
• ภาพ Icon หรือภาพที่มีพื้นหลังโปร่งใสควรใช้เป็น WebP หรือ PNG
• ภาพธรรมดาทั่วไปหรือภาพที่มีขนาดใหญ่ควรใช้เป็น WebP หรือ JPG
• ควรทำไฟล์ภาพแยกตาม Density ของแต่ละเครื่อง เช่น MDPI, HDPI, XHDPI เพื่อให้ภาพสามารถแสดงบนหน้าจอแต่ละขนาดได้คมชัด ภาพไม่แตกหรือหยาบจนน่าเกลียด
• ถ้ากลัวว่าแอปฯจะมีขนาดบวมมากเพราะมีภาพเยอะและแยกไว้หลายๆขนาด จะทำ APK แยกตาม Density ก็ได้นะ โดยใช้ความสามารถของ Android App Bundle (สามารถอ่านเพิ่มเติมได้ที่ Android App Bundle - ตอนที่ 1 รู้จักความสามารถและเบื้องหลังในการทำงาน)
• ใช้เป็นภาพพื้นหลังสำหรับปุ่มหรือกรอบข้อความ
เงื่อนไขการใช้งาน
• ไม่สามารถทำรูปทรงที่ซับซ้อนได้• รองรับกับทุกเวอร์ชัน
• ตัวไฟล์จะอยู่ในรูป XML และเก็บไว้ในโฟลเดอร์ Drawable
ใช้ Bitmap Drawable ถ้า...
• เป็นภาพที่มีรายละเอียดเยอะ• ไม่ได้ทำเป็นภาพ Vector ตั้งแต่แรกหรือทำไม่เป็น
เงื่อนไขการใช้งาน
• รองรับกับทุกเวอร์ชันแน่นอน• รองรับไฟล์ JPG, PNG, GIF และ WebP
• ตัวไฟล์จะเก็บไว้ในโฟลเดอร์ Drawable หรือ Mipmap ก็ได้
คำแนะนำ
• ถึงแม้แอนดรอยด์จะรองรับ GIF แต่ก็ไม่ต้องไปใช้หรอก...• ภาพ Icon หรือภาพที่มีพื้นหลังโปร่งใสควรใช้เป็น WebP หรือ PNG
• ภาพธรรมดาทั่วไปหรือภาพที่มีขนาดใหญ่ควรใช้เป็น WebP หรือ JPG
• ควรทำไฟล์ภาพแยกตาม Density ของแต่ละเครื่อง เช่น MDPI, HDPI, XHDPI เพื่อให้ภาพสามารถแสดงบนหน้าจอแต่ละขนาดได้คมชัด ภาพไม่แตกหรือหยาบจนน่าเกลียด
• ถ้ากลัวว่าแอปฯจะมีขนาดบวมมากเพราะมีภาพเยอะและแยกไว้หลายๆขนาด จะทำ APK แยกตาม Density ก็ได้นะ โดยใช้ความสามารถของ Android App Bundle (สามารถอ่านเพิ่มเติมได้ที่ Android App Bundle - ตอนที่ 1 รู้จักความสามารถและเบื้องหลังในการทำงาน)
มาจัดการกับ Bitmap Drawable อย่างถูกต้องกันเถอะ
นักพัฒนาส่วนใหญ่รู้กันอยู่แล้วล่ะว่าภาพจำพวก Bitmap Drawable เนี่ย เวลาเอาไปเก็บไว้ในโฟลเดอร์ Drawable ควรแยกตาม Density นะ ว่าแต่ละแยกยังไงให้ถูกต้องล่ะ?
วิธีการแยกโฟลเดอร์สำหรับ Bitmap Drawable นั้น ต้องบอกเลยว่าขึ้นอยู่กับว่าแอปฯของผู้ที่หลงเข้ามาอ่านนั้นออกแบบให้รองรับกับหน้าจอทุกขนาดด้วยวิธีแบบไหนอยู่
หมายเหตุ - ค่า DP ที่จะพูดถึงต่อไปนี้เป็นค่า DP ที่กำหนดให้กับ View แล้วส่งผลต่อการแสดงผลของภาพ เช่น ขนาดของปุ่มที่ใช้ภาพเป็นพื้นหลัง ดังนั้นผู้ที่หลงเข้ามาอ่านคนใดยังไม่รู้จักกับ DP ให้ไปอ่านบทความเรื่อง [Android Design] ทำไมแอนดรอยด์ต้องใช้หน่วย DP? เพื่อทำความรู้จักกับหน่วย DP เสียก่อน
รูปแบบอุดมคติ
รูปแบบนี้ไม่ค่อยเจอกันง่ายๆ เพราะมันคือ Best Practice ใน Mobile Application Design เลยก็ว่าได้ เป็นรูปแบบที่มีต้นทุนสูง ใช้เวลานาน แต่ได้งานคุณภาพวิธีการออกแบบ
• การออกแบบที่คำนึงถึงค่า DP ไม่ใช่อิงจากหน่วย PX• View ที่ออกแบบบน Mobile แล้วมีการกำหนดเป็นหน่วย DP ทุกตัว เมื่อไปแสดงผลอยู่บน Tablet จะต้องมีค่า DP เท่าเดิม
• Layout จะมีการจัดวางแตกต่างกันระหว่าง Mobile กับ Tablet หรือไม่ ไม่สำคัญ สนใจแค่ว่าค่า DP ที่ใช้กำหนดให้กับ View ตัวเดียวกันนั้นมีค่าเหมือนกันหรือป่าว ยกตัวอย่างเช่น ปุ่มวงกลมที่เป็นรูป Icon ที่กำหนดไว้ใน Mobile ไว้ว่าให้มีค่าเป็น 60dp เมื่อออกแบบสำหรับ Tablet ก็ควรกำหนดให้ปุ่มนั้นมีค่าเป็น 60dp เหมือนเดิม
• สำหรับค่า DP บางอย่างที่กำหนดไว้ใน Mobile หรือ Tablet อย่างใดอย่างหนึ่งเท่านั้น ก็ไม่เป็นไร
ถ้าเจอแอปฯตัวไหนออกแบบไว้แบบนี้อยู่ บอกเลยว่าเป็นบุญของผู้ที่หลงเข้ามาอ่านแล้วล่ะ เพราะมันคือการออกแบบที่ใส่ใจถึงรูปแบบของตัวแอปฯที่มีผลต่อผู้ใช้งานบนอุปกรณ์แอนดรอยด์ที่แตกต่างกันออกไป เพราะงั้นอย่าปล่อยให้งานแบบนี้หลุดมือไปล่ะ
สำหรับแอปฯที่ออกแบบด้วยรูปแบบที่อุดมคติแบบนี้ บอกเลยว่านักพัฒนาจะจัดการกับภาพที่จะต้องใช้ได้ง่ายมากๆ เพราะ Mobile และ Tablet นั้นสามารถใช้ภาพเดียวกันได้เลย ขอแค่แยกตาม Density ก็พอ
ในกรณีที่ใช้โฟลเดอร์ Drawable แนะนำให้แยกภาพตาม Density แบบนี้
• drawable-mdpi
• drawable-hdpi
• drawable-xhdpi
• drawable-xxhdpi
รูปแบบ Mobile เป็นหลัก ส่วน Tablet ขยายใหญ่เอา
อันนี้เป็นรูปแบบที่สามารถพบเจอได้ทั่วไปครับ เพราะเป็นรูปแบบที่ใช้ต้นทุนไม่เยอะมาก เน้นทำแอปฯให้รองรับ Mobile เป็นหลัก แล้วค่อยไปปรับ Scale ให้ใหญ่ขึ้นเมื่อเปิดบน Tabletวิธีการออกแบบ
• การออกแบบที่คำนึงถึงค่า DP ไม่ใช่อิงจากหน่วย PX• ตำแหน่งของ View ทั้งหมดของ Tablet แทบจะเหมือนกับ Mobile
• View บน Mobile กำหนดไว้ขนาดเท่าไร จะขยายใหญ่ขึ้นบน Tablet โดยไม่มีอัตราส่วนที่แน่นอน ใช้วิธีกะด้วยสายตาและความรู้สึกล้วนๆว่ามันโอเคแล้ว (ฮาๆ)
ดังนั้นรูปแบบนี้ส่วนใหญ่จึงใช้วิธีจัด Layout สำหรับ Mobile เพียงอย่างเดียว แต่ค่า Dimension จะแยกโฟลเดอร์ระหว่าง values กับ values-sw...dp ไว้ เพื่อให้กำหนดค่า DP แตกต่างกันระหว่าง Mobile กับ Tablet ได้
ในกรณีที่ใช้โฟลเดอร์ Drawable แนะนำให้แยกภาพตาม Density แบบนี้
• drawable-mdpi
• drawable-hdpi
• drawable-xhdpi
• drawable-xxhdpi
• drawable-sw540dp-mhdpi
• drawable-sw540dp-xhdpi
เพราะ View บน Mobile กับ Tablet จะมีขนาดไม่เท่ากัน จึงต้องแยกภาพเป็น 2 ชุด แล้วทำเป็นหลายๆขนาดตามค่า Density โดยทั้ง Mobile และ Tablet แยกกัน
ในกรณีแบบนี้แนะนำว่าให้คุยกับทุกๆคนที่มีชะตากรรมร่วมกันในโปรเจคตัวนั้นครับ แล้วออกแบบใหม่โดยใช้หน่วย DP ให้ถูกต้องตามแบบฉบับของแอนดรอยด์เถอะ
ที่เจ้าของบล็อกเลือกออกแบบจากหน้าจอ XXHDPI ก็เพราะว่าเจ้าของบล็อกใช้เครื่องหน้าจอ XXHDPI อยู่แล้ว เวลาทดสอบก็จะทดสอบบนเครื่องจริงได้เลย และไม่ต้องขยายขนาดภาพสำหรับ Density อื่นๆแล้ว มีแต่ย่อขนาดภาพอย่างเดียว จึงหายห่วงเรื่องภาพแตก
• drawable-hdpi
• drawable-xhdpi
• drawable-xxhdpi
• drawable-sw540dp-mhdpi
• drawable-sw540dp-xhdpi
เพราะ View บน Mobile กับ Tablet จะมีขนาดไม่เท่ากัน จึงต้องแยกภาพเป็น 2 ชุด แล้วทำเป็นหลายๆขนาดตามค่า Density โดยทั้ง Mobile และ Tablet แยกกัน
รูปแบบตามใจฉัน อะไรๆก็ไม่แน่นอน
ถ้า View เป็นต้องใช้ภาพที่มีขนาดไม่แน่นอน แล้วแสดงผลแบบ Dynamic (ยืดขยายความกว้างหรือความสูงได้ตามขนาดหน้าจอ) จะไม่ถือว่าอยู่ในรูปแบบนี้นะวิธีการออกแบบ
• View มีการอ้างอิงขนาดจากค่า PX เป็นหลัก เช่น ปุ่มที่ใช้เป็นภาพ แล้วกำหนดความกว้างความสูงเป็น Wrap Content เพื่อให้ปุ่มมีขนาดตามขนาดของภาพในกรณีแบบนี้แนะนำว่าให้คุยกับทุกๆคนที่มีชะตากรรมร่วมกันในโปรเจคตัวนั้นครับ แล้วออกแบบใหม่โดยใช้หน่วย DP ให้ถูกต้องตามแบบฉบับของแอนดรอยด์เถอะ
จะรู้ได้ยังไง ว่าต้องใช้ภาพขนาดเท่าไร?
โดยปกติแล้วเวลาเจ้าของบล็อกจะอ้างอิงจากหน้าจอที่เจ้าของบล็อกใช้ออกแบบเป็นหลัก เช่น Nexus 5X ที่หน้าจอเป็น XXHDPI ดังนั้นเจ้าของบล็อกก็จะจัด Layout ในหน้าจอแบบนี้จนเสร็จเสียก่อน แล้วภาพที่ใช้ก็จะดูว่าบนหน้าจอตัวนี้ใน View แต่ละตัวจะต้องใช้ภาพขนาดเท่าไรถึงจะเหมาะสม เมื่อได้ขนาดภาพที่พอดีกับหน้าจอแล้ว ก็จะเอาภาพนั้นไปลดขนาดให้เหมาะสมกับ XHDPI, HDPI และ MDPI ตามอัตราส่วนของแต่ละ Densityที่เจ้าของบล็อกเลือกออกแบบจากหน้าจอ XXHDPI ก็เพราะว่าเจ้าของบล็อกใช้เครื่องหน้าจอ XXHDPI อยู่แล้ว เวลาทดสอบก็จะทดสอบบนเครื่องจริงได้เลย และไม่ต้องขยายขนาดภาพสำหรับ Density อื่นๆแล้ว มีแต่ย่อขนาดภาพอย่างเดียว จึงหายห่วงเรื่องภาพแตก
ทำไมเจ้าของบล็อกถึงแยก Mobile แค่ MDPI, HDPI, XHDPI และ XXHDPI ส่วน Tablet แยกเป็น MDPI และ XHDPI เท่านั้น?
ถึงแม้ว่าบนโลกของแอนดรอยด์นั้นจะมี LDPI, MDPI, HDPI, XHDPI, XXHDPI, XXXHDPI แต่ในความเป็นจริงนักพัฒนาก็ไม่จำเป็นต้องทำทุกๆ Density เสมอไปครับLDPI
ต้องบอกเลยว่ายุคนี้อุปกรณ์แอนดรอยด์ที่มี Density ระดับนี้คงไม่หลงเหลืออยู่ในโลกนี้แล้วล่ะ เพราะงั้นจึงตัดออกไปได้เลย
MDPI
ในยุคนี้จะเหลือก็แค่ Tablet เท่านั้น ส่วน Mobile ก็ไม่หลงเหลือแล้วล่ะ ดังนั้นการสร้าง Drawable สำหรับ MDPI ก็มีไว้เพื่อ Tablet เป็นหลัก ซึ่งถ้าสังเกตดีๆจะเห็นว่ากรณีที่ทำ Bitmap Drawable แยกกันระหว่าง Mobile กับ Tablet ก็จะมีแค่ MDPI สำหรับ Tablet เท่านั้น
HDPI
จะไม่มีใน Tablet ซักเท่าไรนัก เพราะ Tablet ส่วนใหญ่จะมี Density อยู่ระหว่าง MDPI กับ XHDPI ส่วน Mobile ก็ยังพอมีอยู่บ้าง เลยต้องทำเผื่อไว้
XXXHDPI
เป็น Density ที่ก้าวข้ามจุดที่มนุษย์จะแยกแยะความแตกต่างเมื่อเทียบกับ XXHDPI ได้แล้วล่ะ เพราะจริงๆแค่ XXHDPI ก็คมชัดเพียงพอต่อสายตามนุษย์แล้ว ดังนั้น XXXHDPI จึงไม่ได้จำเป็นซักเท่าไร แถมยังทำให้ตัวแอปฯมีขนาดบวมเกินจำเป็นอีก
อยากรู้ว่ามันใช้ยังไง สะดวกแค่ไหน ลองไปอ่านบทความเกี่ยวกับ Plugin ตัวนี้กันได้ที่ [Android Dev Tips] Android Drawable Importer - Plugin แนะนำสำหรับ Android Studio
ถึงแม้ว่าการเก็บไฟล์ไว้ในนี้โดยตรงก็เหมือนกับ drawable-mdpi ก็เถอะ แต่ทางที่ดีก็ควรแยกเป็น drawable-mdpi ดีกว่า แล้วโฟลเดอร์ drawable ค่อยเอาไว้เก็บพวก Shape Drawable หรือ Vector Drawable แทน เพื่อไม่ให้ปนกันมั่วซั่ว
แต่เวลาทำภาพ 9-Patch ก็ควรแยกตาม Density อยู่ดีนะ เพราะว่าภาพ 9-Patch สุดท้ายแล้วก็คือภาพที่ขึ้นอยู่กับหน่วย PX อยู่ดี ดังนั้นเวลาแสดงบน HDPI กับ XXHDPI ก็จะมีความแตกต่างกัน
ยกตัวอย่างเช่น 9-Patch ของภาพปุ่มที่มีมุมโค้งมนจะไม่เท่ากันเมื่อแสดงในหน้าจอที่ Density ต่างกัน แต่เจ้าของบล็อกดันทำภาพไว้แค่ใน drawable-mdpi อย่างเดียว เวลาแสดงใน XHDPI ก็จะเห็นได้ชัดว่ามุมของปุ่มจะมีมุมที่โค้งน้อยลง
เพราะงั้นผู้ที่หลงเข้ามาอ่านคนใดคิดว่าทำ 9-Patch แล้วไม่ต้องทำหลายๆขนาด ยังไงก็ควรทำหลายๆขนาดแยกตาม Density อยู่ดีนะครับ แต่ถ้าไม่ซีเรียสตรงจุดนี้ก็สามารถปล่อยข้ามไปได้ครับ
ถ้าทดสอบแล้วพบว่ามีหน้าจอบางขนาดแสดงภาพไม่ชัดหรือหยาบ ให้ดูว่าเครื่องนั้นเป็น Density แบบไหน เป็น Mobile หรือ Tablet แล้วจึงทำภาพที่มีขนาดพอดีกับหน้าจอนั้นๆเพิ่มเข้าไป
เวลาทำภาพนั้นเจ้าของบล็อกแนะนำให้ออกแบบจากหน้าจอที่มีความละเอียดสูงสุดเท่าที่ทำได้ (หรือมีอยู่บนโลกนี้) จะเป็น Mobile ที่มีหน้าจอ 2,560x1,440 px ก็ได้ แล้ว Tablet ก็ออกแบบที่ขนาด 2,560x1,600 px เมื่อเสร็จแล้วก็ส่งภาพแต่ละส่วนให้ Android Dev ไปจัดการต่ออีกที แล้ว Android Dev ก็จะเอาไปใช้ในโปรเจคโดยใช้ Android Drawable Importer เข้ามาเพื่อช่วยในการย่อรูปสำหรับ Density ต่างๆแทน
ดังนั้นสำหรับคนที่ไม่ใช่ Android Dev แล้วต้องทำภาพ เจ้าของบล็อกแนะนำว่าไม่ต้องสนใจในรายละเอียดของบทความนี้ก็ได้ครับ เน้นทำภาพขนาดใหญ่ๆเผื่อไว้ก็พอ เดี๋ยว Android Dev จะเอาไปใช้งานเอง โดยใช้ Plugin เข้ามาช่วย
ส่วนเรื่องการเก็บไฟล์ Bitmap Drawable ก็สามารถอ้างอิงจาก Guideline ที่เจ้าของบล็อกแนะนำไว้ได้เลย แต่อย่าลืมด้วยว่าขึ้นอยู่กับโปรเจคของผู้ที่หลงเข้ามาอ่านแต่ละคนด้วยนะ ว่าต้องใช้เทคนิคอื่นๆเพิ่มเติมหรือเปล่า เพื่อให้ภาพสามารถแสดงบนแอปฯได้อย่างถูกต้อง ภาพไม่เบลอหรือแตก แต่ส่วนใหญ่ก็อิงจากวิธีที่เจ้าของบล็อกใช้นั่นแหละ ถ้าไม่ใช่ ก็ลองดูก่อนว่าวิธีที่ใช้กันอยู่นั้นถูกต้องแล้วหรือป่าว
และควรมองหา Tools มาช่วยเพื่อให้จัดการได้ง่ายขึ้น อย่างเช่นการเอา Android Drawable Importer มาใช้ เพื่อที่จะได้ไม่ต้องมานั่งทำภาพหลายๆขนาดเอง ซึ่งพวกนี้จะช่วยลดระยะเวลาในการทำงานได้เยอะพอสมควรเลยล่ะ
สุดท้าย การจัดการกับไฟล์ภาพเพื่อใช้ใน Android Application ไม่ใช่หน้าที่ของคนอื่นนะ ดังนั้นการบอกให้ Graphic Designer ไปดูเรื่อง Configuration Qualifier แล้วทำภาพหลายๆขนาดให้ด้วยนั้นเป็นการผลักภาระให้คนอื่นครับ หน้าที่ของ Android Dev คือมันควรรู้และจัดการกับภาพเหล่านั้นให้ถูกต้องครับ แล้วบอกให้คนทำภาพรู้แค่ว่าควรทำภาพขนาดใหญ่ไว้ก่อนก็พอครับ
และสุดท้ายของสุดท้ายก็ต้องขอบคุณพี่เนย NuuNeoI ที่ช่วยตรวจทานเนื้อหานี้ให้
อย่ามานั่งปรับขนาดภาพเองให้เสียเวลา ลองใช้ Android Drawable Importer สิ
Android Drawable Importer เป็น Plugin สำหรับ Android Studio ที่จะช่วยให้นักพัฒนาไม่ต้องมานั่งเสียเวลากับการย่อ/ขยายขนาดภาพสำหรับ Bitmap Drawable อีกต่อไปอยากรู้ว่ามันใช้ยังไง สะดวกแค่ไหน ลองไปอ่านบทความเกี่ยวกับ Plugin ตัวนี้กันได้ที่ [Android Dev Tips] Android Drawable Importer - Plugin แนะนำสำหรับ Android Studio
ไม่ควรเอา Bitmap Drawable ไปใส่ไว้ใน Drawable โดยตรง
การเอาไฟล์ภาพไปเก็บไว้ใน Drawable โดยตรงนั้นไม่ใช่เรื่องที่ถูกต้องซักเท่าไร อย่างน้อยก็ควรเก็บแยกตาม Density ไว้หน่อยก็ดีถึงแม้ว่าการเก็บไฟล์ไว้ในนี้โดยตรงก็เหมือนกับ drawable-mdpi ก็เถอะ แต่ทางที่ดีก็ควรแยกเป็น drawable-mdpi ดีกว่า แล้วโฟลเดอร์ drawable ค่อยเอาไว้เก็บพวก Shape Drawable หรือ Vector Drawable แทน เพื่อไม่ให้ปนกันมั่วซั่ว
ภาพ 9-Patch ก็ควรแยกตามขนาดหน้าจอเหมือนกันนะ
9-Patch เป็น Bitmap Drawable อย่างหนึ่งที่นักพัฒนาหลายๆคนใช้กัน เพราะมันสามารถยืดและขยายได้โดยไม่ทำให้สัดส่วนของภาพบิดเบี้ยวแต่เวลาทำภาพ 9-Patch ก็ควรแยกตาม Density อยู่ดีนะ เพราะว่าภาพ 9-Patch สุดท้ายแล้วก็คือภาพที่ขึ้นอยู่กับหน่วย PX อยู่ดี ดังนั้นเวลาแสดงบน HDPI กับ XXHDPI ก็จะมีความแตกต่างกัน
ยกตัวอย่างเช่น 9-Patch ของภาพปุ่มที่มีมุมโค้งมนจะไม่เท่ากันเมื่อแสดงในหน้าจอที่ Density ต่างกัน แต่เจ้าของบล็อกดันทำภาพไว้แค่ใน drawable-mdpi อย่างเดียว เวลาแสดงใน XHDPI ก็จะเห็นได้ชัดว่ามุมของปุ่มจะมีมุมที่โค้งน้อยลง
เพราะงั้นผู้ที่หลงเข้ามาอ่านคนใดคิดว่าทำ 9-Patch แล้วไม่ต้องทำหลายๆขนาด ยังไงก็ควรทำหลายๆขนาดแยกตาม Density อยู่ดีนะครับ แต่ถ้าไม่ซีเรียสตรงจุดนี้ก็สามารถปล่อยข้ามไปได้ครับ
ควรทดสอบจริงทุกครั้งเพื่อความมั่นใจ
ที่เจ้าของบล็อกแนะนำนั้นก็น่าจะครอบคลุมเกือบทั้งหมดแหละ แต่เนื่องจากแอปฯไม่ได้ออกแบบเหมือนๆกันทั้งหมด ดังนั้นทางที่ดีควรทดสอบจาก Emulator หรือเครื่องจริง โดยให้ครอบคลุมกับทุกๆ Density ด้วย (ทดสอบแยกระหว่าง Mobile และ Tablet ด้วยนะ)ถ้าทดสอบแล้วพบว่ามีหน้าจอบางขนาดแสดงภาพไม่ชัดหรือหยาบ ให้ดูว่าเครื่องนั้นเป็น Density แบบไหน เป็น Mobile หรือ Tablet แล้วจึงทำภาพที่มีขนาดพอดีกับหน้าจอนั้นๆเพิ่มเข้าไป
Graphic Designer ควรรู้อะไรบ้างเวลาทำภาพ?
ในการทำงานจริงๆนักพัฒนาคงไม่ได้เป็นคนทำเองซักเท่าไรนัก ส่วนมากจะมีคนอื่นทำมาให้อย่างเช่น Graphic Designer แต่ปัญหาก็คือ คนที่ทำภาพให้เค้าควรจะทำภาพขนาดเท่าไรให้ล่ะ? ต้องรู้เกี่ยวกับ Configuration Qualifier ด้วยหรือป่าว?เวลาทำภาพนั้นเจ้าของบล็อกแนะนำให้ออกแบบจากหน้าจอที่มีความละเอียดสูงสุดเท่าที่ทำได้ (หรือมีอยู่บนโลกนี้) จะเป็น Mobile ที่มีหน้าจอ 2,560x1,440 px ก็ได้ แล้ว Tablet ก็ออกแบบที่ขนาด 2,560x1,600 px เมื่อเสร็จแล้วก็ส่งภาพแต่ละส่วนให้ Android Dev ไปจัดการต่ออีกที แล้ว Android Dev ก็จะเอาไปใช้ในโปรเจคโดยใช้ Android Drawable Importer เข้ามาเพื่อช่วยในการย่อรูปสำหรับ Density ต่างๆแทน
ดังนั้นสำหรับคนที่ไม่ใช่ Android Dev แล้วต้องทำภาพ เจ้าของบล็อกแนะนำว่าไม่ต้องสนใจในรายละเอียดของบทความนี้ก็ได้ครับ เน้นทำภาพขนาดใหญ่ๆเผื่อไว้ก็พอ เดี๋ยว Android Dev จะเอาไปใช้งานเอง โดยใช้ Plugin เข้ามาช่วย
สรุป
เรื่องของภาพที่จะเอามาใช้ใน Android Application ถือว่าเป็นพื้นฐานอย่างหนึ่งที่ Android Dev ควรจะรู้และจัดการกับไฟล์ภาพเหล่านั้นให้ถูกต้องตามขนาดหน้าจอ ควรดูว่าภาพที่จะใช้สามารถทำเป็น Vector Drawable หรือ Shape Drawable ได้มั้ย ถ้าทำได้ก็ควรทำ เพราะมันจะลดขนาดของไฟล์ที่ต้องใช้ให้ลดลงได้ส่วนเรื่องการเก็บไฟล์ Bitmap Drawable ก็สามารถอ้างอิงจาก Guideline ที่เจ้าของบล็อกแนะนำไว้ได้เลย แต่อย่าลืมด้วยว่าขึ้นอยู่กับโปรเจคของผู้ที่หลงเข้ามาอ่านแต่ละคนด้วยนะ ว่าต้องใช้เทคนิคอื่นๆเพิ่มเติมหรือเปล่า เพื่อให้ภาพสามารถแสดงบนแอปฯได้อย่างถูกต้อง ภาพไม่เบลอหรือแตก แต่ส่วนใหญ่ก็อิงจากวิธีที่เจ้าของบล็อกใช้นั่นแหละ ถ้าไม่ใช่ ก็ลองดูก่อนว่าวิธีที่ใช้กันอยู่นั้นถูกต้องแล้วหรือป่าว
และควรมองหา Tools มาช่วยเพื่อให้จัดการได้ง่ายขึ้น อย่างเช่นการเอา Android Drawable Importer มาใช้ เพื่อที่จะได้ไม่ต้องมานั่งทำภาพหลายๆขนาดเอง ซึ่งพวกนี้จะช่วยลดระยะเวลาในการทำงานได้เยอะพอสมควรเลยล่ะ
สุดท้าย การจัดการกับไฟล์ภาพเพื่อใช้ใน Android Application ไม่ใช่หน้าที่ของคนอื่นนะ ดังนั้นการบอกให้ Graphic Designer ไปดูเรื่อง Configuration Qualifier แล้วทำภาพหลายๆขนาดให้ด้วยนั้นเป็นการผลักภาระให้คนอื่นครับ หน้าที่ของ Android Dev คือมันควรรู้และจัดการกับภาพเหล่านั้นให้ถูกต้องครับ แล้วบอกให้คนทำภาพรู้แค่ว่าควรทำภาพขนาดใหญ่ไว้ก่อนก็พอครับ
และสุดท้ายของสุดท้ายก็ต้องขอบคุณพี่เนย NuuNeoI ที่ช่วยตรวจทานเนื้อหานี้ให้