Sử dụng thư viện load ảnh Glide trong android

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

2. CÀI ĐẶT

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

Default
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"/>

3. 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é. 😉

3.1 Load ảnh với Picasso

Picasso.with(context)
    .load("http://androidcoban.com/wp-content/uploads/2016/07/hoc_lap_trinh_android.png")
    .into(ivImg);

3.2 Load ảnh với Glide

Glide.with(context)
    .load("http://androidcoban.com/wp-content/uploads/2016/07/hoc_lap_trinh_android.png")
    .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.

3.3 Resize ảnh:

Glide.with(context)
    .load("http://androidcoban.com/wp-content/uploads/2016/07/hoc_lap_trinh_android.png")
    .override(600, 200)
    .into(ivImg);

3.4 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);

3.5 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);

3.6 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);

3.7 Display Gif as Bitmap:

Glide  
    .with( context )
    .load( gifUrl )
    .asBitmap()
    .into( imageViewGifAsBitmap );

3.8 Display of Local Videos

String filePath = "/storage/emulated/0/Pictures/example_video.mp4";

Glide  
    .with( context )
    .load( Uri.fromFile( new File( filePath ) ) )
    .into( imageViewGifAsBitmap );

Lưu trữ bộ nhớ đệm

3.9 Memory Cache

Glide  
    .with( context )
    .load( "url" )
    .skipMemoryCache( true )
    .into( imageViewInternet );

3.10 Skipping Disk Cache

Glide  
    .with( context )
    .load( eatFoodyImages[0] )
    .diskCacheStrategy( DiskCacheStrategy.NONE )
    .into( imageViewInternet );

Sử lý độ ưu tiên:

3.11 Prioritizing Image Requests

Priority.LOW
Priority.NORMAL
Priority.HIGH
Priority.IMMEDIATE

private void loadImageWithHighPriority() {  
    Glide
        .with( context )
        .load( UsageExampleListViewAdapter.eatFoodyImages[0] )
        .priority( Priority.HIGH )
        .into( imageViewHero );
}

private void loadImagesWithLowPriority() {  
    Glide
        .with( context )
        .load( UsageExampleListViewAdapter.eatFoodyImages[1] )
        .priority( Priority.LOW )
        .into( imageViewLowPrioLeft );

    Glide
        .with( context )
        .load( UsageExampleListViewAdapter.eatFoodyImages[2] )
        .priority( Priority.LOW )
        .into( imageViewLowPrioRight );
}

3.12 Callbacks in Glide: Targets

Phần này các bạn click tại đây để xem rõ hơn.

KẾT LUẬN

Cách Glide tải một hình ảnh vào bộ nhớ và làm bộ nhớ đệm là tốt hơn so với Picasso mà để cho một hình ảnh được tải nhanh hơn. Ngoài ra, nó cũng giúp ngăn chặn một ứng dụng bị OutOfMemoryError liên tục. Tải GIF Animation là một tính năng được cung cấp bởi Glide.

Các bạn có thể xem thêm cái bài viết về Glide tại các link mình tổng hợp:

https://viblo.asia/pham.xuan.lu/posts/jaqG0QlevEKw

https://futurestud.io/tutorials/glide-image-resizing-scaling

https://github.com/bumptech/glide