เฮ้ 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 ก็หวังว่าจะเป็นประโยชน์นะครับ ไว้พบกันใหม่ในบทความต่อไป ปู๊น ปู๊น 🙏

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

NuuNeoI - ทำความรู้จัก Glide ไลบรารี่โหลดภาพคู่แข่ง Picasso ที่กูเกิ้ลแนะนำให้ใช้ มีดีอย่างไรมาดูก…