การนำรูปมาใช้ในโปรเจคแอนดรอยด์นั้นมักจะทำเป็น Drawable Resource ที่จะต้องแยกขนาดภาพออกตาม DPI เพื่อให้ภาพสามารถแสดงบนหน้าจอได้ทุกขนาด ถ้าเป็นรูปที่เตรียมไว้หลายๆขนาดตั้งแต่แรกแล้วก็คงจะดี แต่ในบางครั้งก็อาจจะได้มาเป็นรูปเดียว ทำให้นักพัฒนาต้องเอาไป Resize เอง

ดังนั้นเพื่อให้ใช้ชีวิตง่ายขึ้น ในบทความนี้เจ้าของบล็อกก็จะมาแนะนำ Plugin บน Android Studio ที่จะช่วยให้การ Resize รูปเพื่อใช้เป็น Drawable Resource ในโปรเจคของนักพัฒนาเป็นเรื่องง่ายขึ้นมาทันตาเห็น โดย Plugin ตัวนี้มีชื่อว่า Android Drawable Importer

เรื่องที่ควรรู้เกี่ยวกับ Android Drawable Importer

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

ดังนั้นในบทความนี้จะไม่ได้พูดถึงการติดตั้งใช้งาน Plugin ดั้งเดิม แต่จะเป็นวิธีติดตั้งของนักพัฒนาที่นำไปทำต่อแทน

การติดตั้ง Android Drawable Importer

สำหรับ Plugin ในเวอร์ชันที่ Fork มาทำต่อจะไม่ได้เอาขึ้น Jetbrains Plugins Marketplace ดังนั้นผู้ที่หลงเข้ามาอ่านจะต้องดาวน์โหลดเป็นไฟล์ .zip แล้วนำไปติดตั้งใน Android Studio ด้วยตัวเอง

ให้เข้าไปดาวน์โหลดไฟล์ .zip ของ Plugin ได้ที่ Readme ของโปรเจคนี้บน GitHub ตามลิ้งนี้ได้เลย Android Drawable Importer - Vincent Loi [GitHub]

Vincent-Loi/android-drawable-importer-intellij-plugin
Overcome NoSuchMethodError for AndroidFacet.getAllResourceDirectories plus other problems with AS 3.5 intellij distributions. - Vincent-Loi/android-drawable-importer-intellij-plugin
GitHubVincent-Loi

จากนั้นก็ให้เปิดหน้าต่าง Plugin ของ Android Studio ขึ้นมา โดยจะอยู่ใน Preferences > Plugins

จากนั้นให้กดปุ่มรูปเฟืองที่อยู่ข้างๆแถบ Installed แล้วเลือก Installed Plugin from Disk...

เลือกไฟล์ .zip ของ Android Drawable Importer ซะ แล้ว Android Studio จะติดตั้งให้โดยทันที และจะต้อง Restart Android Studio ก่อนเพื่อใช้งาน Plugin ที่เพิ่งติดตั้งไป

การใช้งาน Android Drawable Importer

เมื่อต้องการเพิ่มภาพเข้าไปใน Drawable Resource ก็ให้คลิกขวาที่ res หรือ Directory อื่นๆที่อยู่ข้างในก็ได้ แล้วจะเห็นเมนูของ Android Drawable Importer แสดงอยู่ข้างใน New อีกที

โดยจะมีเมนูของ Plugin ตัวนี้อยู่ทั้งหมด 4 ตัวด้วยกัน

  • Icon Pack Drawable Importer
  • Vector Drawable Importer
  • Batch Drawable Importer
  • Multisource-Drawable
เจ้าของบล็อกจะพูดถึงแค่ Batch Drawable Importer เท่านั้น

เพราะ Icon Pack Drawable Importer กับ Vector Drawable Importer สามารถใช้เมนู Vector Asset ของ Android Studio แทนได้เลย ส่วน Multisource-Drawable ก็สามารถใช้ Resource Manager แทนได้เช่นกัน

Batch Drawable Importer

เป็นการเพิ่มไฟล์ภาพเข้าไปใน Drawable Resource ที่มีหน้าต่างให้นักพัฒนาสามารถกำหนดได้ว่าจะให้ Resize ภาพเป็นขนาดใดบ้าง ซึ่งเหมาะกับภาพต้นฉบับที่มีแค่ขนาดเดียว (แนะนำให้เป็นภาพขนาดใหญ่ที่สุด)

  • Source-Resolution จะเป็นการกำหนดว่ารูปภาพที่นำเข้ามาเป็นภาพสำหรับ DPI เท่าไร
  • ในกรณีที่ต้องการ Resize ขนาดรอบนึงก่อนก็สามารถกำหนดค่าใน Source-Width และ Source-Height ได้เลย
  • อยากจะให้ Resize ภาพสำหรับ DPI อะไรบ้าง ก็ติ๊กเลือกใน Target-Resolution ได้เลย ซึ่งจะมีขนาดของภาพสำหรับ DPI นั้นๆบอกอยู่ข้างหลังให้ด้วย
  • ถ้าอยากเปลี่ยนชื่อของ Drawable Resource เป็นชื่ออื่นที่ไม่ใช่ชื่อไฟล์ภาพในตอนแรก ก็กำหนดใหม่ในช่อง Target-Name
  • อยากได้เป็น JPG หรือ PNG ก็กำหนดในช่อง Format ได้เลย

เมื่อเสร็จสิ้นขั้นตอนทั้งหมดแล้ว ก็จะพบว่า Android Drawable Importer ทำการ Resize ภาพเป็นขนาดต่างๆไว้ใน Drawable Resource ตามที่กำหนดไว้อย่างสวยงาม

เทคนิคที่ควรรู้

สำหรับภาพ PNG พื้นหลังโปร่งใส่

เพื่อให้ภาพมีคุณภาพมากที่สุด ขอแนะนำให้กำหนดค่า Algorithm เป็น Thumbnailator

ขนาดภาพที่พอดีกับขนาดของ View

วิธีนี้จะเหมาะกับกรณีที่ภาพมีอัตราส่วนเท่ากับที่กำหนดไว้ใน View

โดยให้กำหนด Source-Resolution เป็น MDPI เพราะ 1 dp ของ MDPI จะมีค่าเท่ากับ 1 px พอดีเป๊ะ แล้วกำหนด Source-Width หรือ Source-Height ให้เท่ากับขนาดของ View ในหน่วย dp

ใช้เถิด ชีวิตจะได้ไม่ต้องลำบาก

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

ดังนั้น Android Drawable Importer จะเข้ามาช่วยลดระยะเวลาตรงนี้ให้กลายเป็นเรื่องง่าย เพื่อให้นักพัฒนาสามารถแยกขนาดภาพใน Drawable Resource ตาม Android Guideline นั่นเอง เพราะเรื่องนี้ก็ถือว่าเป็น Best Practice อย่างหนึ่งที่นักพัฒนาควรทำตาม

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

รอช้าอยู่ใย ไปดาวน์โหลดมาใช้สิ!