เฮ้ Glide นายเปลี่ยนไป

https://github.com/bumptech/glide/blob/master/static/glide_logo.png

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

Glide คือ

Library ที่เอาไว้สำหรับโหลดรูปภาพนั้นเองและที่สำคัญมันโหลดไฟล์ .gif ได้ด้วยนะ ซึ่งมีข้อดีที่ความรวดเร็วในการโหลดแถมยังมีการเรียกใช้งานที่แสนจะง่าย

เอาล่ะ… เข้าเรื่องเลยล่ะกัน

ขั้นตอนที่ 1 : ทำการเพิ่ม dependency ในไฟล์ build.gradle (app) ดังนี้

dependencies {
...
compile 'com.github.bumptech.glide:glide:4.0.0-RC1'
}

ขั้นตอนที่ 2 : ทำการสร้าง UI เพื่อทำการทดสอบ ดังนี้

ขั้นตอนที่ 3 : ทำการโหลดรูปภาพจาก URL ไปแสดงที่ UI ที่ทำการสร้างไว้ ดังนี้

ในที่นี้เจ้าของบล็อคเขียนด้วยภาษา Kotlin นะครับ ผลลัพธ์ก็จะได้ดังนี้

รูปจาก : https://goo.gl/7kaJ3J

ข้อสังเกต แว๊บแรกที่เราเห็นจะเป็นสีขาวซึ่งอาจจะไม่เหมาะสมทางในด้าน UX เท่าไรซึ่งควรจะมีรูปที่บอกผู้ใช้ว่าเห้ยกำลังโหลดอยู่นะ หรือถ้าโหลดไม่สำเร็จก็อาจจะมีรูป default บอกว่าเห้ย error นะ เดี๋ยวหน้าจอมันจะขาวๆ ทำให้ผู้ใช้ งง ได้

แล้วถ้าเจ้าของบล็อคต้องการที่จะใส่รูประหว่างรอโหลด หรือรูปอะไรสักอย่างถ้าหากโหลดรูปจาก URL ไม่สำเร็จล่ะโดยปกติ Glide ในเวอร์ชันตั้งแต่ 4.0.0 ลงไป จะใช้คำสั่งดังนี้

Glide.with(this)
.load("https://goo.gl/7kaJ3J")
.placeholder(android.R.color.darker_gray) //ระหว่างโหลดรูปภาพ
.error(android.R.color.darker_gray) //โหลดรูปภาพไม่สำเร็จ
.into(img_test)

แต่ในเวอร์ชันปัจจุบันคือตั้งแต่ 4.0.0-RC0 ถึง RC1 ไม่มีคำสั่ง placeholder() และ error() เป็น builder method อีกต่อไปแต่สองคำสั่งจะไปอยู่ใน RequestOptions แทน รูปร่างหน้าตาก็จะออกมาประมาณนี้

val requestOptions = RequestOptions
.placeholderOf(android.R.color.darker_gray)
.error(android.R.color.darker_gray)

Glide.with(this)
.setDefaultRequestOptions(requestOptions)
.load("https://goo.gl/7kaJ3J")
.into(img_test)

ผลลัพธ์ก็จะได้ดังนี้

รูปจาก : https://goo.gl/7kaJ3J

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

public class GlideConfiguration implements GlideModule {    @Override
public void applyOptions(Context context, GlideBuilder builder){
// Apply options to the builder here.
builder.setDecodeFormat(DecodeFormat.PREFER_ARGB_8888);
}

@Override
public void registerComponents(Context context, Glide glide) {
// register ModelLoaders here.
}
}

แล้วเอาไปแปะที่ AndroidManifest.xml เป็น meta-data ดังนี้

<meta-data android:name="ชื่อ package ที่ไฟล์ config อยู่"
android:value="GlideModule"/>

แต่ในเวอร์ชันตั้งแต่ 4.0.0 RC0 ขึ้นไปคลาส GlideModule ถูก deprecated ไปแล้วให้ไปใช้ AppGlideModule แทน และมีรูปแบบภาพ default เป็น ARGB_8888 ให้เลยไม่ต้องทำการสร้างไฟล์ Config อีกแล้ว โคตรคูล แต่ถ้าใครอยากจะเปลี่ยนให้อยู่ในรูปแบบ RGB_565 เหมือนเดิมก็ให้ไปการตั้งค่าที่ RequestOptions ที่ method ที่ชื่อว่า format ดังนี้

val requestOptions = RequestOptions
.placeholderOf(android.R.color.darker_gray)
.error(android.R.color.darker_gray)
.format(DecodeFormat.PREFER_ARGB_8888)

วันนี้เจ้าของบล็อคก็มาอัพเดทการใช้งานเจ้า Glide ให้ฟังเพียงเท่านี้แหละครับเพื่อใครที่อัพเดทไปแล้วอาจจะสงสัยว่าเห้ยคำสั่งที่เคยใช้หายไปไหน แล้วใช้คำสั่งอะไรแทนในเวอร์ชันใหม่แต่ก็ยังเป็น release-candidate (RC) ยังไม่ release ก็หวังว่าจะเป็นประโยชน์นะครับ ไว้พบกันใหม่ในบทความต่อไป ปู๊น ปู๊น 🙏

แหล่งอ้างอิง

20Scoops CNX

We exchange knowledge to enhance learning.

Thanks to . modd

Jedsada Tiwongvorakul

Written by

Developer @ Chiang Mai, Thailand

20Scoops CNX

We exchange knowledge to enhance learning.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade