Hướng dẫn load ảnh với thư viện Glide trong Android

2
229

Mình đã từng tổng hợp những thư viện load ảnh tốt nhất cho ứng dụng Android. Trong đó thư viện load ảnh tốt nhất là Glide. Tại sao lại như vậy? Bài viết này chúng ta cùng tìm hiểu cách load ảnh với thư viện Glide cho ứng dụng Android như nào nhé!

Glide là một thư viện open source hỗ trợ load ảnh trên Android. Điều tuyệt vời là Glide hỗ trợ cả ảnh gif.

Với Glide bạn có thể tải và load hình ảnh 1 cách dễ dàng. Glide sử dụng thư viện kết nối chuẩn HttpURLConnection để tải hình ảnh thông qua internet.

Tuy nhiên, thư viện Glide cũng cung cấp các plugin cho các thư viện kết nối mạng phổ biến khác như Volley hay OkHttp.

Hướng dẫn load ảnh với thư viện Glide trong ứng dụng Android

#Tại sao nên sử dụng thư viện Glide trong Android

Glide là thư viện được “chống lưng” bởi Google nên chất lượng thì khỏi bàn. Nó hiện là thư viện load ảnh tốt nhất hiện nay, giúp giảm thiểu tình trạng bị crash app khi chúng ta load ảnh có kích thước lớn. Đặc biệt trong Recycleview có nhiều ảnh.

Glide giúp chúng ta load ảnh trong cả fragment điều mà picaso không thể load được.

#Hướng dẫn load ảnh với thư viện Glide

Sau khi tạo project chúng ta import file vào file build.gradle

implementation "com.github.bumptech.glide:glide:4.8.0"

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

Dưới đây là một số tính năng và cách sử dụng cơ bản của Glide mà chúng ta hay dùng.

Load một ảnh bất kỳ với thư viện Glide

Glide.with(this)
        .load("https://vntalking.com/wp-content/uploads/2019/04/hoc-react-native-tu-co-ban.png")
                        .into(imageView);

Resize ảnh

Glide.with(this)
        .load("https://vntalking.com/wp-content/uploads/2019/04/hoc-react-native-tu-co-ban.png") .override(600, 200)
                        .into(imageView);

Center Crop

centerCrop(): giãn hình ảnh một cách thống nhất sao cho hình ảnh lấp đầy một vùng nhất định, với càng nhiều hình ảnh hiển thị càng tốt. Nếu cần, hình ảnh sẽ được cắt theo chiều ngang hoặc chiều dọc để cho vừa vặn.

Glide.with(this)
        .load("https://vntalking.com/wp-content/uploads/2019/04/hoc-react-native-tu-co-ban.png") .override(600, 200).centerCrop()
                        .into(imageView);

Fit Center

fitCenter() : giãn hình ảnh một cách thống nhất  sao cho hình ảnh phù hợp với khu vực nhất định. Toàn bộ hình ảnh sẽ được hiển thị, nhưng có thể có khoảng dư theo chiều dọc hoặc ngang

Glide.with(this)
        .load("https://vntalking.com/wp-content/uploads/2019/04/hoc-react-native-tu-co-ban.png") .override(600, 200) .fitCenter()
                        .into(imageView);

Hiển thị ảnh động(Gif)

Glide hỗ trợ hiển thị ảnh gif và cách load cũng tương tự như ảnh thông thường thôi.

Glide  
    .with(context)
    .load("https://media.giphy.com/media/duzpaTbCUy9Vu/giphy.gif")
    .asBitmap()
    .into(imageViewGifAsBitmap);

Hiện thị local Video

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

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

Cache trong Gilde

Để tăng tốc độ hiển thị ảnh, Glide có 2 loại hình cache: Memory Cache và Disk Cache

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

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

Xử lý Listener trong Glide

Khi chúng ta sử dụng glide cũng có thể giúp chúng ta lắng nghe Listener các yêu cầu.

Ví dụ load ảnh thành công hoặc bị lỗi, giúp chúng ta thêm các yêu cầu mong muốn.

Glide.with(this)
           .load(spacePhoto.getUrl())
           .asBitmap()
           .error(R.drawable.ic_cloud_off_red)
           .listener(new RequestListener<String, Bitmap>() {
    
               @Override
               public boolean onException(Exception e, String model, Target<Bitmap> target, boolean isFirstResource) {
                   return false;
               }
    
               @Override
               public boolean onResourceReady(Bitmap resource, String model, Target<Bitmap> target, boolean isFromMemoryCache, boolean isFirstResource) {
            
                   mImageView.setImageBitmap(resource);
                   return false;
               }

#Tạm kết

Như vậy, mình đã giới thiệu cách load ảnh với thư viện Glide rất cơ bản. Glide giúp các bạn lập trình viên không cần code nhiều và load mượt mà.

Hy vọng bài này sẽ giúp các bạn sử dụng tốt glide trong Andorid.

Đừng quên chia sẻ bài viết nếu có ích với bạn nhé.

2
Bình luận. Đặt câu hỏi cũng là một cách học

avatar
  Theo dõi bình luận  
Mới nhất Cũ nhất Nhiều voted nhất
Thông báo
Thịnh
Guest
Thịnh

Bị lỗi khi import thư viện xin trợ giúp

Sơn Dương
Admin

Hi
Bạn có thể post log error lên đây được không bạn? Vì mô tả lỗi của bạn chung chung quá, mình không biết nguyên nhân bị sao cả.