Sử Dụng Thư Viện Glide Trên Android
Có thể bạn quan tâm
Khóa học đã chọn 
Home- Lịch khai giảng
-
Ngày 13-11-2024
Tin học văn phòng -
Ngày 13-11-2024
DevOps Engineer -
Ngày 13-11-2024
Data Analysis -
Ngày 13-11-2024
Tin học Quốc tế -
Ngày 13-11-2024
Lập trình & CSDL -
Ngày 13-11-2024
Data Science & Machine Learning -
Ngày 13-11-2024
Kiểm thử phần mềm
-
Ngày 13-11-2024
Internet Marketing -
Ngày 13-11-2024
Đồ hoạ đa truyền thông -
Ngày 13-11-2024
Thiết kế website -
Ngày 13-11-2024
Lập trình di động -
Ngày 13-11-2024
Mạng máy tính -
Ngày 05-09-2024
Khóa học cho Thiếu niên
-
- Dịch vụ
- Tin tức
- Hướng dẫn thanh toán
- Liên hệ
ngày 15-06-2022
Glide là một trong những thư viện được khuyên dùng nhiều nhất trên Android. Glide được sử dụng để tải hình ảnh từ Internet về ứng dụng Android và hiển thị lên ImageView. Ngoài tính năng chính này, thì Glide còn có nhiều tính năng rất thú vị khác mà có thể bạn chưa biết tới như biến đổi hình ảnh (center crop, circle crop…), tải ảnh động (GIF). Nhắc đến các thư viện tải hình ảnh trên Android, người ta sẽ nghĩ ngay đến thư viện Glide và Picasso, hoặc những thư viện mới ra đời hơn như Fresco, Coil. So với các thư viện khác thì Glide có kích thước gói phần mềm lớn, nhưng lại có những ưu điểm như dễ sử dụng, kích thước các tập tin cache nhỏ, hỗ trợ ảnh GIF, tải nhanh các hình ảnh lớn từ Internet về cho ListView, UI không bị treo (freeze)... Các thư viện khác cũng có tính năng tương tự, nhưng lại có một số hạn chế như: Fresco có kích thước thư viện rất lớn, kích thước tập tin cache lớn; Picasso tải chậm các hình ảnh lớn từ Internet về ListView, không hỗ trợ ảnh GIF. Coil là một thư viện rất mới và cần thời gian để kiểm chứng. Ngoài ra, Glide là một thư viện được Google khuyên dùng, nên trong bài viết này, chúng ta sẽ cùng tìm hiểu về Glide nhé. Trong minh hoạ sau đây (ứng dụng My Instagram), Glide được sử dụng để tải về và hiển thị các hình ảnh lên một RecyclerView gồm 3 cột (Photo Gallery), với biến đổi center crop; tải về, biến đổi hình ảnh thành một hình tròn (circle crop) và hiển thị lên ImageView hình ảnh đại diện (Profile Picture); tải ảnh động (GIF).
Để thực hiện các minh hoạ này, các bạn tải về source code project-start và thực hiện các bước tiếp theo sau đây để có được sản phẩm hoàn thiện project-final (được cung cấp trong glide_demo.zip): Bước 1: Cấu hình Permission và Dependencies
Để Glide có thể tải hình ảnh từ một URL, bạn cần chắc chắn đã thêm permission “INTERNET” vào file AndroidManifest.xml. Đây là một lỗi phổ biến mà ngay cả một lập trình viên có kinh nghiệm cũng gặp phải và có thể mất hàng giờ để debug. Mở file AndroidManifest.xml và thêm vào thẻ <uses-permission>, bên trên thẻ <application>:
Tiếp theo, mở file build.gradle thuộc thư mục app, thêm vào dependency sau bên trong mục dependencies: 
Sau đó, nhấn Sync Now và chờ cho đến khi Android Studio hoàn tất đồng bộ các dependencies. Bước 2: Nguồn hình ảnh
Nguồn hình ảnh trong bài viết này được lấy từ https://source.unsplash.com/random. Có thể kèm theo tham số URL là ?w= để có được hình ảnh với kích thước mong muốn, ví dụ: https://source.unsplash.com/random?w=200Bước 3: Tải về các hình ảnh cho Photo Gallery
Mở file PhotoAdapter.java của project-start, đây là một RecyclerView Adapter, sử dụng phương thức onBindViewHolder() để gán dữ liệu cho PhotoViewHolder. Trong class PhotoViewHolder, phương thức bind() được sử dụng để hiển thị hình ảnh với URL tương ứng.
Giải thích nội dung phương thức bind() như sau: // 1 – Chèn thêm URL param ?w=360 đối với trường hợp URL khác null để lấy các hình ảnh với kích thước nhỏ hơn (có chiều rộng là 360px) so với kích thước của hình ảnh gốc, giúp tải hình ảnh về thiết bị nhanh hơn, người dùng không phải đợi lâu giúp trải nghiệm người dùng tốt hơn. Ở đây lấy giá trị 360 vì giả sử kích thước ngang của màn hình thiết bị là 1080px. // 2 – Thiết lập life-cycle context cho Glide là một view, hoặc một fragment, hoặc một activity. Trong trường hợp này là một view, đại diện cho một cell trên RecyclerView. // 3 – Tải hình ảnh về thiết bị theo URL cho trước // 4 – Áp dụng biến đổi “centerCrop” để điền đầy hình ảnh trong ImageView. Các bạn có thể áp dụng hoặc không áp dụng centerCrop, rồi quan sát kết quả để biết được sự khác nhau nhé. Dưới đây là các hình ảnh không được áp dụng centerCrop: 
// 5 – Thiết lập hình ảnh chờ (placeholder) sẽ được hiển thị trước khi Glide tải hình ảnh thật sự về và hiển thị lên ImageView 
// 6 – Thiết lập hình ảnh lỗi (error placeholder) sẽ được hiển thị lên ImageView nếu Glide không load được hình ảnh (ví dụ: URL sai, hình ảnh không tồn tại) 
// 7 – Thiết lập hình ảnh fallback sẽ được hiển thị lên ImageView nếu URL là null // 8 – Hiển thị hình ảnh vào ImageView nào. Trong project này, một cell của RecyclerView chỉ có một ImageView Bước 4: Tải về hình ảnh đại diện (Profile Picture)
Mở MainActivity.java, phương thức loadProfilePic() sẽ thực hiện tải về hình ảnh từ URL https://source.unsplash.com/random, biến đổi hình ảnh thành hình tròn (circle crop) và hiển thị lên ImageView (ivProfile).
// 1 – Context của Glide bây giờ là MainActivity // 2 – Mặc định, Glide sẽ cache hình ảnh với key chính là URL https://source.unsplash.com/random trong memory và disk. Tuy nhiên, mỗi lần tải URL https://source.unsplash.com/random sẽ tự động điều hướng đến một URL khác để lấy một hình ảnh ngẫu nhiên khác. Do đó, cần cung cấp thêm tuỳ chọn skipMemoryCache(true) để hình ảnh đại diện luôn được tải lại, không còn cache ở memory nữa. Ngược lại, hình ảnh cũ sẽ hiển thị thay vì một hình ảnh ngẫu nhiên mới. // 3 – Tuỳ chỉnh để Glide không cache ở disk // 4 – Thay vì sử dụng một ImageView hình tròn, tức là phải cần đến một thư viện “circular image view” thì Glide có thể thực hiện cắt hình ảnh theo hình tròn và hiển thị lên ImageView nhờ thực hiện phương thức transform() với tham số đầu vào là một CircleCrop. Đến đây là kết thúc minh hoạ về một ứng dụng Android có sử dụng đến thư viện Glide, bạn có thể tải về source code project-final và kiểm lại kết quả. Phần tiếp theo sau đây sẽ nêu một số tính năng thông dụng khác của Glide mà bạn có thể sử dụng. Một số tính năng thông dụng của Glide
Hiển thị ảnh động GIF Với ảnh động GIF, Glide tự động xử lý và hiển thị ảnh này, nên bạn không cần lưu ý gì khi sử dụng, chỉ cần cung cấp URL của ảnh động, Glide sẽ làm phần việc còn lại cho bạn.
Resize (thay đổi kích thước hình ảnh) Lý tưởng thì kích thước hình ảnh cần phải phù hợp với kích thước của ImageView mà hình ảnh được hiển thị. Bản thân Android hỗ trợ việc resize hình ảnh này chưa tốt nên trong một số trường hợp hiển thị một hình ảnh với kích thước lớn (hình vừa chụp được từ camera chẳng hạn) trên một ImageView có kích thước nhỏ hơn có thể gây ra lỗi OutOfMemoryException. Glide đã tự động hoá resize kích thước hình ảnh trong memory trước khi hiển thị hình ảnh lên ImageView để hạn chế lỗi này. Tuy nhiên, nếu bạn muốn resize hình ảnh theo ý mình, thì có thể dùng phương thức override(width, height). Ví dụ sau resize hình ảnh về kích thước 100x200 pixels: 
Resize hình ảnh theo cách này thì có thể không giữ được tỉ lệ của hình ảnh và thường làm hình ảnh bị biến dạng, do đó cần tránh thực hiện việc này. Biến đổi centerCrop() centerCrop() giúp hình ảnh được chiếm hết khung của ImageView và cắt bỏ đi các phần thừa. Ưu điểm là ImageView được điền đầy, không có phần trống, tuy nhiên toàn bộ hình ảnh có thể không được hiển thị do đã bị cắt bớt. 
Biến đổi fitCenter() fitCenter() sẽ resize hình ảnh theo cả chiều ngang và chiều cao, giữ tỉ lệ gốc của hình ảnh. Ưu điểm là hình ảnh sẽ được hiển thị đầy đủ trong ImageView, nhưng sẽ không điền đầy ImageView. 
Một số biến đổi khác phức tạp hơn có thể được thực hiện bằng cách kết hợp Glide với thư viện Glide Transformation (https://github.com/wasabeef/glide-transformations). Đầu tiên, cấu hình các dependencies như sau: 
Biến đổi làm tròn góc hình ảnh 
Trong đó cornerRadius là bán kính của góc, cornerRadius càng lớn thì góc càng được làm tròn nhiều; cropMargin là khoảng cách mà ảnh bị cắt tính từ lề, nếu bạn không muốn cắt hình ảnh thì để cropMargin bằng 0. 
Hiệu ứng blur Hãy tưởng tượng bạn đang nhìn cảnh vật bên ngoài qua một cửa sổ kính khi trời mưa, hình ảnh dường như nhoè đi, đó chính là minh hoạ cho hiệu ứng Blur. 
Kết hợp nhiều biến đổi, hiệu ứng Glide cũng cho phép kết hợp các biến đổi và hiệu ứng với nhau, đoạn code sau thực hiện biến đổi CenterCrop kết hợp với hiệu ứng Blur. 
Một lưu ý trong quá trình sử dụng Glide là vấn đề xử lý cache. Nếu bạn muốn một hình ảnh đã tải trong quá trình sử dụng app, được lưu lại và không cần tải lại từ Internet khi gặp hình ảnh đó một lần nữa, tăng hiệu năng của ứng dụng, hãy lưu ý đến tính năng cache. - Có 2 loại cache: memory và disk. Memory cache giúp lưu hình ảnh ở RAM, ứng dụng thoát thì hình ảnh mất theo. Disk cache sẽ lưu hình ảnh ở bộ nhớ cache của ứng dụng, dù thoát ứng dụng đi thì khi mở lại vẫn có thể nạp hình ảnh từ disk cache.
- Mặc định Glide cache hình ảnh trong memory và disk với URL được dùng làm key. Nên trong trường hợp của profile image ở minh hoạ trên, nếu Glide tải về hình ảnh với URL là: https://source.unsplash.com/image_1.jpg, tức là một hình ảnh cụ thể, bạn có thể cache hình ảnh đó ở memory hay disk. Tuy nhiên, các hình ảnh này lại là ngẫu nhiên khi URL là https://source.unsplash.com/random. Do vậy, Glide sẽ cache hình ảnh random đầu tiên ứng với URL này, nên các lần tiếp theo dù hình ảnh có thay đổi nhưng Glide sẽ hiển thị hình ảnh đầu tiên từ cache lên ImageView. Minh hoạ trên bỏ qua việc cache hình ảnh ở cả memory skipMemoryCache(true) và disk diskCacheStrategy(DiskCacheStrategy.NONE).
- Trong một số trường hợp, bạn có thể chủ động xoá cache. Ví dụ như bạn cần debug, hay một lý do khác là cho phép người dùng chủ động xoá bớt không gian đĩa, thì có thể sử dụng đoạn code mẫu sau:
- Glide.get(context).clearMemory(); Lưu ý rằng chỉ có thể gọi phương thức này từ main thread (UI thread).
- Glide.get(this).clearDiskCache(); Phương thức này chỉ có thể được gọi từ background thread, do đó bạn có thể gọi nó theo cách đơn giản sau:
Source code được đính kèm tại đây Chúc các bạn thành công! Tham khảo 1.https://bumptech.github.io/glide/ 2.https://github.com/bumptech/glide Tin liên quan
Trung Tâm Tin Học Trung Tâm Tin Học Chào mừng bạn đến với Trung Tâm Tin Học. Bạn đang cần hỗ trợ thông tin gì ạ? Hãy Chat ngay với chúng tôi nhé. Tiếp tục chat Đăng ký Online 
Từ khóa » Thư Viện Picasso
-
Sử Dụng Thư Viện Picasso Trong ứng Dụng Android - Viblo
-
Sử Dụng Thư Viện Picasso để Load ảnh Trong Android - Viblo
-
Sử Dụng Picasso để Load ảnh Trong Android - Hoclaptrinh
-
Load ảnh Từ Internet Với Thư Viện Picasso
-
Demo Load Hình Dùng Thư Viện Picasso - GitHub
-
Sử Dụng Thư Viện Load ảnh Picasso Trong Lập Trình Android - DROID9X
-
ANdroid Recycleview Sử Dụng Thư Viện Picasso Trong Android
-
Thư Viện Picasso, Android: Sử Dụng Trình Xử Lý Lỗi
-
Android SDK: Làm Việc Với Picasso - Code Tutsplus
-
[Android] So Sánh ưu, Nhược điểm Của 2 Thư Viện Load ảnh Glide Và ...
-
Picasso - Square Open Source
-
[Android] Load ảnh Với Thư Viện Picasso | That2U
-
Top 4 Thư Viện Image Loading Android Tốt Nhất - VNTALKING