Glide: คืออะไร ไลบรารีรูปภาพและการประยุกต์ใช้ใน Android

Glide คืออะไร?

Glide เป็นไลบรารีสำหรับโหลดรูปภาพ ภาพเคลื่อนไหว GIF และเฟรมวิดีโออย่างรวดเร็วและมีประสิทธิภาพในแอปพลิเคชัน Android โปรเจกต์นี้พัฒนาโดย Bumptech ภายใต้การดูแลของ Google และถูกใช้อย่างแพร่หลายในแอปพลิเคชันทางการของ Google

สถาปัตยกรรมภายในของ Glide สร้างขึ้นบนแนวทางแบบคอมโพเนนต์: Engine จัดการการทำงานของคำขอ DecodeJob รับผิดชอบการถอดรหัส และ ResourceDecoder แปลงข้อมูลดิบเป็น Bitmap หรือ Drawable แต่ละขั้นตอนสามารถปรับแต่งได้ผ่านโมดูลและทะเบียน ทำให้ Glide เป็นไลบรารีที่ยืดหยุ่นอย่างยิ่งสำหรับรูปแบบรูปภาพที่ไม่ได้มาตรฐาน

แตกต่างจากคู่แข่งหลายราย Glide ถูกออกแบบตั้งแต่ต้นโดยคำนึงถึงลักษณะเฉพาะของ Android: วงจรชีวิตของ Activity และ Fragment การหมุนหน้าจอ การเปลี่ยนแปลงการกำหนดค่า ไลบรารีจะหยุดและเริ่มการโหลดใหม่โดยอัตโนมัติตามสถานะของคอมโพเนนต์

ตาม Android Developers Glide เป็นไลบรารีที่แนะนำสำหรับการโหลดรูปภาพในเอกสารทางการของ Google ถูกใช้ใน Google Play, Google Maps และผลิตภัณฑ์อื่นๆ ของบริษัท ซึ่งยืนยันความน่าเชื่อถือและประสิทธิภาพ

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

คุณสมบัติหลักของ Glide

Glide มีฟังก์ชันมากมายสำหรับทำงานกับรูปภาพ ครอบคลุมทั้งสถานการณ์การโหลดเนื้อหาที่ง่ายและซับซ้อน

การรองรับ GIF และ WebP แบบเคลื่อนไหว

GIF และ WebP แบบเคลื่อนไหวถูกโหลดและแสดงโดย Glide ได้ง่ายดายเท่ากับรูปภาพนิ่ง ไลบรารีจะตรวจจับรูปแบบโดยอัตโนมัติจากชนิด MIME และถอดรหัสภาพเคลื่อนไหว โดยแสดงเฟรมในเธรดพื้นหลัง มีเมธอด asGif และ asBitmap สำหรับควบคุมการเล่น

การรวมเข้ากับวงจรชีวิต

Glide ผูกเข้ากับวงจรชีวิตของ Activity, Fragment และ View โดยอัตโนมัติ เมื่อ Activity หยุดชั่วคราว การโหลดจะถูกระงับ เมื่อถูกทำลาย จะถูกยกเลิก ซึ่งป้องกันการรั่วไหลของหน่วยความจำและการโหลดรูปภาพสำหรับหน้าจอที่ปิดไปแล้ว การรวมทำงานผ่านการรองรับ LifecycleOwner

การโหลดเฟรมวิดีโอ

Glide สามารถแยกเฟรมจากวิดีโอผ่าน URL หรือพาธท้องถิ่น ใช้เมธอด asBitmap() ร่วมกับ load() สำหรับ URI วิดีโอ Glide จะเลือกเฟรมหลักหรือเฟรมที่เวลา stamp ที่ระบุโดยอัตโนมัติ ซึ่งมีประโยชน์สำหรับแสดงตัวอย่างวิดีโอ

การสร้างและกำหนดค่า GlideApp

GlideApp เป็นคลาสที่ถูกสร้างขึ้นซึ่งให้ API แบบขยายตามการกำหนดค่า AppGlideModule ช่วยให้ใช้เมธอดที่ไม่มีใน Glide.with มาตรฐาน: การโหลดด้วยตัวเลือกเริ่มต้นแบบกำหนดเอง การรวมเข้ากับไลบรารี และการแปลงที่ตั้งไว้ล่วงหน้า การสร้างต้องใช้คำอธิบายประกอบ @GlideModule ในคลาสที่สืบทอด AppGlideModule

Glide ทำงานอย่างไร?

Glide ใช้สถาปัตยกรรมหลายชั้นกับเครื่องมือ ถอดรหัส การแปลง และแคช แต่ละคำขอผ่านห่วงโซ่ตัวจัดการที่ปรับการโหลดให้เหมาะสมสำหรับ ImageView เฉพาะ

สถาปัตยกรรมและไปป์ไลน์

เมื่อเรียก into(view) Glide จะตรวจสอบแคช: ทรัพยากรที่ใช้งานอยู่ แคชในหน่วยความจำ แคชบนดิสก์ และจากนั้นเครือข่าย รูปภาพจะถูกปรับขนาดโดยอัตโนมัติให้พอดีกับขนาด ImageView เป้าหมายโดยคำนึงถึงความหนาแน่นของหน้าจอและ scaleType ซึ่งลดการใช้หน่วยความจำ — ข้อได้เปรียบหลักของ Glide

Glide.with(context)
    .load("https://example.com/image.jpg")
    .placeholder(R.drawable.loading)
    .error(R.drawable.error)
    .override(400, 300)
    .centerCrop()
    .into(imageView)

การติดตั้งและกำหนดค่า Glide

การติดตั้ง Glide ทำผ่าน Gradle ไลบรารีต้องการการกำหนดค่าผ่าน AppGlideModule สำหรับการสร้าง API เวอร์ชัน Android API ขั้นต่ำคือ 21

การเพิ่ม dependencies

ใน build.gradle ให้เพิ่ม Glide พร้อมกับ kapt annotation processor สำหรับการสร้าง GlideApp API สำหรับ Kotlin ให้ใช้ kapt แทน annotationProcessor Glide เวอร์ชัน 4.16+ ทำงานได้เสถียรกับ Android Gradle Plugin 8.x

dependencies {
    implementation "com.github.bumptech.glide:glide:4.16.0"
    annotationProcessor "com.github.bumptech.glide:compiler:4.16.0"
}

// ใช้ kapt สำหรับ Kotlin
// kapt "com.github.bumptech.glide:compiler:4.16.0"

การสร้าง AppGlideModule

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

@GlideModule
public class MyGlideModule extends AppGlideModule {
    @Override
    public void applyOptions(Context context, GlideBuilder builder) {
        int diskCacheSize = 250 * 1024 * 1024;
        builder.setDiskCache(
            new DiskLruCacheFactory(cacheDir.getPath(), diskCacheSize)
        );
    }
}

ตัวอย่างการใช้งาน Glide

ตัวอย่างด้านล่างแสดงสถานการณ์ทั่วไป: การโหลดรูปภาพ การทำงานกับ GIF และการแยกเฟรมวิดีโอ

การโหลดรูปภาพด้วย placeholder

การโหลดพื้นฐานผ่าน Glide.with().load().into() — โค้ดขั้นต่ำสำหรับแสดงรูปภาพจากเครือข่าย Glide ปรับขนาด ImageView โดยอัตโนมัติ placeholder จะแสดงระหว่างการโหลด และ error เมื่อเกิดข้อผิดพลาด

Glide.with(fragment)
    .load("https://example.com/photo.jpg")
    .placeholder(R.drawable.placeholder)
    .error(R.drawable.error)
    .skipMemoryCache(true)
    .diskCacheStrategy(DiskCacheStrategy.NONE)
    .into(imageView)

การโหลดรูปภาพ GIF

GIF ถูกโหลดเช่นเดียวกับรูปภาพนิ่ง — Glide ตรวจจับรูปแบบโดยอัตโนมัติจากชนิดเนื้อหา สำหรับการบังคับโหลดเป็นรูปภาพนิ่ง ให้ใช้ asBitmap(); สำหรับ GIF ให้ใช้ asGif() Glide ถอดรหัสเฉพาะเฟรมที่มองเห็นได้อย่างมีประสิทธิภาพ

Glide.with(context)
    .asGif()
    .load("https://example.com/animation.gif")
    .into(imageView)

// โหลดเฟรมแรกของ GIF เป็นรูปภาพนิ่ง
Glide.with(context)
    .asBitmap()
    .load("https://example.com/animation.gif")
    .into(imageView)

การโหลดเฟรมวิดีโอ

เฟรมวิดีโอ ถูกแยกโดย Glide จาก URI วิดีโอในเครื่องหรือระยะไกล โดยค่าเริ่มต้น Glide จะโหลดเฟรมหลัก หากต้องการระบุเวลา stamp ที่แน่นอน ให้ใช้ frameMillis ซึ่งสะดวกสำหรับแสดงตัวอย่างในแกลเลอรีวิดีโอ

String videoUrl = "https://example.com/video.mp4";

Glide.with(context)
    .asBitmap()
    .load(videoUrl)
    .override(200, 200)
    .into(imageView)

การปรับแต่ง Glide สำหรับรายการขนาดใหญ่

การปรับแต่ง Glide สำหรับ RecyclerView เป็นทักษะสำคัญเมื่อพัฒนาแอปพลิเคชันที่มีรูปภาพจำนวนมาก การกำหนดค่าที่เหมาะสมป้องกันอาการกระตุกและข้อผิดพลาด OOM

หนึ่งในคุณสมบัติสำคัญของ Glide คือการรวมเข้ากับ RecyclerView ผ่าน RecyclerViewPreloader คอมโพเนนต์นี้วิเคราะห์ความเร็วและทิศทางการเลื่อน โดยโหลดรูปภาพล่วงหน้าที่จะปรากฏบนหน้าจอในอีกไม่กี่รายการ ในการใช้งานพรีโหลดเดอร์ คุณต้อง implement อินเทอร์เฟซ PreloadSizeProvider และส่งต่อไปยังคอนสตรัคเตอร์พร้อมกับ ImageView เป้าหมาย

การใช้เมธอด override() ด้วยขนาด ImageView ที่แน่นอนช่วยเร่งการโหลดอย่างมาก เมื่อ Glide รู้ขนาดเป้าหมายที่แน่นอน มันสามารถถอดรหัสรูปภาพโดยตรงที่ความละเอียดที่ต้องการ โดยข้ามขั้นตอนการปรับขนาด ซึ่งลดเวลาในการถอดรหัสและการใช้หน่วยความจำสูงสุดลง 30–40%

สำหรับฟีดที่มีเนื้อหาหลากหลาย ให้ใช้ RequestOptions ที่แตกต่างกันสำหรับแต่ละประเภทของรายการ ตัวอย่างเช่น สำหรับรูปภาพแบนเนอร์ขนาดใหญ่ คุณสามารถตั้งค่า override(1200, 600) และคุณภาพ RGB_565 ในขณะที่สำหรับรูปประจำตัว — override(200, 200) และการทำให้มนผ่าน transform วิธีการนี้ใช้ทรัพยากรอย่างเหมาะสมที่สุดสำหรับเนื้อหาแต่ละประเภท

การจัดการข้อผิดพลาดในการโหลด

Glide มีตัวเลือกการจัดการข้อผิดพลาดที่ยืดหยุ่นผ่านรูปภาพข้อผิดพลาดและ RequestListener แบบกำหนดเอง RequestListener ช่วยให้ตอบสนองต่อการโหลดสำเร็จหรือล้มเหลว — บันทึกข้อผิดพลาดหรือส่งข้อมูลวิเคราะห์ คุณยังสามารถกำหนดค่า fallback — รูปภาพที่แสดงเมื่อ load() ได้รับ null แทนที่ URL

ใช้ RecyclerViewPreloader เพื่อโหลดรูปภาพล่วงหน้าก่อนที่ผู้ใช้จะเลื่อนไปถึง Glide รองรับการรวมเข้ากับ RecyclerView ผ่านพรีโหลดเดอร์ที่วิเคราะห์ความเร็วในการเลื่อนและโหลดรูปภาพล่วงหน้า

การคูณ thumbnail ช่วยให้แสดงเวอร์ชันย่อของรูปภาพก่อน จากนั้นโหลดเวอร์ชันเต็ม การเรียก thumbnail(0.25f) จะโหลดเวอร์ชัน 25% ของขนาดที่แสดงทันที ในขณะที่รูปภาพขนาดเต็มจะโหลดทีหลัง ซึ่งสร้างความรู้สึกโหลดทันที

สำหรับอะแดปเตอร์รายการ ให้ใช้ .override() ด้วยขนาด ImageView ที่แน่นอนเพื่อให้ Glide ไม่ปรับขนาดรูปภาพทุกครั้ง ซึ่งลดภาระ CPU และการใช้หน่วยความจำ ขนาดแคชถูกเลือกโดยการทดลอง แต่ 250 MB สำหรับดิสก์และ 20% ของหน่วยความจำที่มีอยู่เป็นจุดเริ่มต้นที่ดี