Thư viện load ảnh Glide cho ứng dụng Android

GIỚI THIỆU

Glide là một thư viện open source hỗ trợ load ảnh trên Android. Dùng Glide sẽ đơn giản hóa các công việc mà bạn cần làm khi sử dụng một bức ảnh trong Android đi rất nhiều. Chúng ta không cần quan tâm đến việc decoding, memory and disk caching mà thay vào đó chỉ cần sử dụng interface rất đơn giản từ Glide.

Glide hỗ trợ fetching, decoding và hiển thị cả ảnh tĩnh hoặc ảnh động đó là điểm nổi bật của nó so với các thư viện load ảnh khác cho android. Glide có thể được dễ dàng đưa vào bất kỳ mô hình mạng nào. Mặc định Glide sử dụng mô hình custom của HttpUrlConnection tuy nhiên chúng ta có thể dễ dàng cho nó hoạt động với Volley hoặc OkHttp

CÀI ĐẶT

Để sử dụng Glide trong project trên Android studio, chúng ta thêm dependencies sau vào build.gradle

dependencies {
  compile 'com.github.bumptech.glide:glide:3.7.0'
  compile 'com.android.support:support-v4:23.1.1'
}

Thêm các Permission vào AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Nếu ứng dụng có sử dụng proguard khi biên dịch thì chúng ta thêm đoạn sau vào file cấu hình proguard

-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public enum com.bumptech.glide.load.resource.bitmap.ImageHeaderParser$** {
  **[] $VALUES;
  public *;
}

SỬ DỤNG

Nếu trước đây bạn đã từng sử dụng thư viện load ảnh Picasso, bạn sẽ cảm thấy bất ngờ vì cách sử dụng của Glide gần như giống hệt Picasso, cũng with() cũng load() cũng into() … nhưng hãy cùng xem liệu chúng có phải “hàng nhái” giống như hộp bánh “choco-pan” giá 15k đang tràn ngập thị trường nông thôn không nhé.

Load ảnh với Picasso

Picasso.with(context)
    .load("http://anhnendep.net/wp-content/uploads/2016/02/vit-boi-roi-Psyduck.jpg")
    .into(ivImg);

Load ảnh với Glide

Glide.with(context)
    .load("http://anhnendep.net/wp-content/uploads/2016/02/vit-boi-roi-Psyduck.jpg")
    .into(ivImg);

Nhìn giống hàng nhái nhưng không phải, with đã được Glide thiết kế không chỉ sử dụng Context mà còn có thể sử dụng với Fragment, Activity, FragmentActivity … từ đó context sẽ tự động được lấy ra.

Điểm lợi thế của việc truyền Fragment, Activity vào Glide đó là việc load ảnh sẽ được thực hiện theo vòng đời của Activity, Fragment ví dụ tạm dừng load ảnh khi Activity ở trạng thái Paused và tự động resume khi Activity resume.

Kết quả

Resize ảnh

Nếu bạn muốn tự quyết định kích thước bức ảnh được load lên thì có thể dùng override(int with, int height) của Glide tương đương vói "resize()` của Picasso.

 Glide.
            with(this)
            .load("http://anhnendep.net/wp-content/uploads/2016/02/vit-boi-roi-Psyduck.jpg")
            .override(200,300)
            .into(imgv);

Center Crop

 Glide.
            with(this)
            .load("http://anhnendep.net/wp-content/uploads/2016/02/vit-boi-roi-Psyduck.jpg")
            .override(200,300)
            .centerCrop()
            .into(imgv);

Fit Center

 Glide.
            with(this)
            .load("http://anhnendep.net/wp-content/uploads/2016/02/vit-boi-roi-Psyduck.jpg")
            .override(200,300)
            .fitCenter()
            .into(imgv);

Placeholder và Error

Glide.
            with(this)
            .load("http://anhnendep.net/wp-content/uploads/2016/02/vit-boi-roi-Psyduck.jpg")
            .placeholder(R.drawable.placeholder)
            .error(R.drawable.error)
            .into(imgv);

MỞ RỘNG

Bitmap Format mặc định là RGB_565 thay vì ARGB_8888 như Picasso điều đó có nghĩa rằng mỗi pixel trên Bitmap Glide load ra chiếm 16 bytes thay vì 32 bytes như Picasso, đồng nghĩa bộ nhớ tiêu tốn cho Bitmap sẽ giảm 50%. Tuy nhiên ưu điểm đó cũng chính là nhược điểm về chất lượng ảnh, bức ảnh dùng định dạng RGB_565 sẽ kém chất lượng hơn ARGB_8888. Nói vậy chứ chất lượng ảnh RGB_565 cũng không phải là quá tệ. Còn nếu bạn vẫn muốn điều tốt nhất, tuyệt vời nhất thì hoàn toàn có thể sử dụng định dạng ARGB_8888 với Glide.

Tạo một class kế thừa từ GlideModule

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.
    }
}

Và sau đó khai báo trong AndroidManifest.xml

<meta-data android:name="com.inthecheesefactory.lab.glidepicasso.GlideConfiguration"
            android:value="GlideModule"/>

Một điểm đáng giá nữa, khi sử dụng Glide load ảnh lên ImageView nó chỉ load ảnh theo đúng kích thước của ImageView chứ không load kích thước thật của bức ảnh. Ví dụ bạn có ảnh 1920x1080 muốn load lên ImageView kích thước 192x108 thì Glide sẽ resize Bitmap lúc decode khiến cho bộ nhớ tiêu thụ giảm đi đáng kể.