Sử Dụng Thư Viện Glide Trên Android

Trang chủ » Thư Viện Glide Android » Sử Dụng Thư Viện Glide Trên Android

Có thể bạn quan tâm

Khóa học đã chọn
  • Home Home
  • Lịch khai giảng

    • Ngày 18-12-2024

      Tin học văn phòng

    • Ngày 18-12-2024

      DevOps Engineer

    • Ngày 18-12-2024

      Data Analysis

    • Ngày 18-12-2024

      Tin học Quốc tế

    • Ngày 18-12-2024

      Lập trình & CSDL

    • Ngày 18-12-2024

      Data Science & Machine Learning

    • Ngày 18-12-2024

      Kiểm thử phần mềm

    • Ngày 18-12-2024

      Internet Marketing

    • Ngày 18-12-2024

      Đồ hoạ đa truyền thông

    • Ngày 18-12-2024

      Thiết kế website

    • Ngày 18-12-2024

      Lập trình di động

    • Ngày 18-12-2024

      Mạng máy tính

    • Ngày 05-09-2024

      Khóa học cho Thiếu niên
  • Chương trình đào tạo
    • Chương trình đào tạo
    • Data Analysis - Microsoft Platform
    • Data Analysis - Google Platform
    • Chuyên Đề Data Science & Machine Learning
    • Data Science and Machine Learning - Version 2024
    • Lập trình ứng dụng
    • Kiểm thử phần mềm
    • Master DevOps Engineer
    • Mạng máy tính
    • Tin học văn phòng
    • Đồ hoạ đa truyền thông
    • Tin học Quốc tế
    • Digital Painting
    • 3D & Xử lý phim
    • Thiết kế website
    • Internet Marketing
    • Lập trình di động
    • Khóa học cho Thiếu niên
    • Xem tất cả các khóa học
    Khóa học nổi bật
    • Data Science and Machine Learning Certificate
    • Data Analytics Certificate
    • Lập trình viên .NET
    • Kỹ thuật viên thiết kế đồ họa 2D
    • Kỹ năng thiết kế đồ họa
    • Ứng dụng CNTT cơ bản
    • Ứng dụng CNTT nâng cao
    • Data Analysis with Power BI & Azure ML
    • Data Analysis Certificate (Excel & PowerBI)
    • Data Analysis & Visualization with Power BI (Basic to Advanced)
    • Data Analysis & Visualization with Power BI (Basic)
    • Advanced Data Analysis with Power BI & SQL
    • Data Processing & Analysis with Excel
    • Excel Fundamentals for Data Analysis
    • Data Preprocessing with VBA
    • Data Analysis & Visualization with Excel
    • Machine Learning with Azure
    • Kể chuyện bằng dữ liệu - Data Storytelling
    • Data Analytics Certificate
    • SQL for Data Analytics
    • Python for Data Analytics
    • Data Visualization
    • Machine Learning for Data Analytics
    • Kể chuyện bằng dữ liệu - Data Storytelling
    • Data Science and Machine Learning Certificate Online
    • Kể chuyện bằng dữ liệu - Data Storytelling
    • Artificial Intelligence and Applications for Business
    • Mathematics and Statistics for Data Science
    • Computer Vision with Deep Learning
    • R Programming for Data Science
    • Deep Learning with Python
    • Natural Language Processing with Deep Learning
    • Data Science and Machine Learning Certificate
    • Fundamentals of Python (Python cơ bản)
    • Data Manipulation and Visualization with Python
    • Fundamentals of Python + Data Manipulation and Visualization with Python
    • Database SQL and Data Collection for Data Science
    • Data Pre-processing and Analysis
    • Machine Learning with Python
    • Big Data in Machine Learning
    • Đồ án tốt nghiệp Data Science
    • Lập trình viên Python
    • Lập trình viên mã nguồn mở PHP
    • Lập trình viên JavaScript
    • Lập trình viên cơ bản Java
    • Lập trình viên Java
    • Lập trình viên .NET
    • Lập trình Python cơ bản
    • Lập trình Python nâng cao
    • Lập trình Python cơ bản và nâng cao
    • Nền tảng & Lập trình hướng đối tượng với C#
    • Lập trình C & Cấu trúc dữ liệu
    • Lập trình C căn bản
    • Lập trình Cấu trúc dữ liệu
    • Kỹ thuật lập trình hướng đối tượng với C++
    • Lập trình Web HTML5, CSS3, jQuery, Bootstrap
    • Lập trình Ứng dụng IoT
    • Chuyên viên kiểm thử phần mềm quốc tế
    • ISTQB Foundation
    • Selenium Automation with Python
    • Kiểm thử phần mềm cơ bản
    • Master DevOps Engineer
    • Automating Linux System Administration
    • AWS Essentials for DevOps Engineers
    • DevOps Containerization
    • Nhập môn Quản trị và An ninh mạng
    • Quản trị Hạ tầng mạng (Infrastructure Administrator)
    • Quản trị Hệ thống mạng (System Administrator)
    • An ninh mạng (Network Security)
    • Chứng chỉ Ứng dụng CNTT Cơ bản
    • Chứng chỉ Ứng dụng CNTT nâng cao
    • Luyện thi Chứng chỉ Ứng dụng CNTT Cơ bản
    • Thi tự do Ứng dụng CNTT
    • Chuyên viên thiết kế Đồ hoạ & Web
    • Chuyên viên thiết kế Đồ hoạ & Digital painting
    • Chuyên viên thiết kế Đồ hoạ & Motion graphic
    • Chuyên viên thiết kế Đồ hoạ & Nội thất
    • Đồ án tốt nghiệp Chuyên viên Đồ Họa ĐTT
    • Kỹ thuật viên thiết kế Đồ hoạ 2D
    • Kỹ thuật viên thiết kế Đồ hoạ chuyên nghiệp
    • Kỹ thuật viên thiết kế hệ thống nhận dạng thương hiệu
    • Kỹ năng thiết kế Đồ hoạ
    • Kỹ năng thiết kế nâng cao
    • Kỹ năng thiết kế sản phẩm (Adobe Illustrator)
    • Xử lý ảnh (Adobe Photoshop cơ bản)
    • Kỹ năng thiết kế tạp chí điện tử E-Magazine (Adobe Indesign)
    • Art Direction (Định hướng sáng tạo)
    • Design for Marketing
    • Nhiếp ảnh cơ bản
    • Thiết kế poster C4D (Cinema 4D)
    • Combo Thiết kế truyền thông: Canva & Capcut Masterclass
    • Thiết kế truyền thông với Canva (Canva for Social Media)
    • Biên tập video nhanh với Capcut (Capcut - All in one video editor)
    • Ứng dụng A.I trong thiết kế đồ họa (A.I in Graphic Design)
    • THVP chuẩn quốc tế MOS-Word
    • THVP chuẩn Quốc Tế MOS-Excel
    • THVP chuẩn quốc tế MOS- Powerpoint
    • Tin học Quốc tế IC3 Spark (Full Level)
    • Tin học Quốc tế IC3 Spark - Computing Fundamentals (Lv1)
    • Tin học Quốc tế IC3 Spark - Key Applications (Lv2)
    • Tin học Quốc tế IC3 Spark - Living online (Lv3)
    • Kỹ thuật viên Digital painting
    • Digital painting nhập môn
    • Digital painting chuyên nghiệp
    • Minh hoạ ứng dụng Illustration
    • Kỹ thuật Đồ hoạ chuyển động 2D (Motion graphic 2D)
    • Kỹ thuật viên thiết kế 3D nội thất
    • Kỹ năng Đồ hoạ 3D nội thất
    • Kỹ năng vẽ kỹ thuật AutoCAD 2D & 3D
    • Kỹ năng 3Ds Max cơ bản
    • Kỹ năng 3Ds Max nâng cao (nội thất)
    • Vẽ kỹ thuật AutoCAD 2D
    • Vẽ kỹ thuật AutoCAD 3D
    • Kỹ năng xử lý & hiệu ứng phim (After Effect & Premiere Pro)
    • Kỹ thuật viên thiết kế Website
    • Thiết kế giao diện Website toàn phần (Layout Figma + HTML,CSS, JQuery)
    • Combo thiết kế Website (HTML-CSS-JQuery, CSS nâng cao, Responsive)
    • App mobile design
    • Thiết kế giao diện Website với Figma
    • Thiết kế Website chuẩn SEO với Wordpress CB
    • Chuyên đề SASS+SCSS+CSS Nâng cao và Responsive Web
    • Tối ưu hóa công cụ tìm kiếm - SEO
    • Lập trình di động đa nền tảng với Flutter
    • Lập trình di động đa nền tảng với React Native cơ bản
    • Lập trình di động đa nền tảng với React Native nâng cao
    • Lập trình Android
    • Lập Trình Game AI - Trải Nghiệm Sáng Tạo với Pygame
    • Đồ Họa trẻ em (Design for Kid)
    • Kỹ năng Thiết kế & Thuyết trình cho Thiếu Niên (Design & Presentation skills for Teens)
    • Thiết kế nhân vật game Pixel Art cho Thiếu niên (Pixel Art Character for Younger)
    • Chuyên đề thiết kế: Canva & Capcut Masterclass
    • Chuyên đề thiết kế: Canva for Social Media
    • Chuyên đề chỉnh sửa video nhanh với Capcut
    • Thiết kế video animation
    • Tin học quốc tế IC3 Spark - Computing Fudamentals (Level 1)
    • Tin học quốc tế IC3 Spark - Key Applications (Level 2)
    • Tin học quốc tế IC3 Spark - Living online (Level 3)
  • Dịch vụ
    • Phát triển phần mềm
    • Đào tạo theo yêu cầu
    • Tư vấn quản lý dự án
    • Cung cấp thiết bị - phần mềm
    • Quản lý hệ thống mạng tự động - NetMD
    • Hệ thống hội nghị truyền hình MobiMeeting
  • Tin tức
    • Blog chia sẻ
    • Hội thảo - Workshop
    • Thông báo - Quy định
    • Sản phẩm Môn học
  • Hướng dẫn thanh toán
  • Liên hệ
  1. Trang chủ
  2. Lập trình di động
  3. Tin công nghệ LTDĐ
  4. Sử dụng thư viện Glide trên Android
Sử dụng thư viện Glide trên Android

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=200

Bướ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

  • Logo Batman – Biểu tượng huyền thoại trong lịch sử Thiết kế Đồ họa (08/10/2024)
  • Tự học Deep Learning – Bài 2: Deep Learning với Tensorflow và Keras (27/09/2024)
  • Khởi nghiệp với Nghề Thiết kế: Lộ trình toàn diện cho người mới bắt đầu (19/08/2024)
  • Học tập và Nghề nghiệp trong Khoa học Dữ liệu và AI (30/05/2024)
  • Phân biệt Khoa học dữ liệu và Khoa học máy tính (13/03/2024)
  • Data Science và Machine Learning - biến dữ liệu thành điều vi diệu (20/12/2023)
  • Thông báo nghỉ Lễ (25/04/2017)
  • [Thiết Kế Đồ Họa] 21 công cụ thiết kế miễn phí dành cho Marketer (27/03/2017)
  • [Thiết Kế Đồ Họa] Phân biệt hệ màu trong Thiết kế (09/11/2016)
  • Bài dự thi "Kỷ niệm T3H" - Nhớ lắm ngôi nhà T3H thân thương (30/08/2016)

Trụ sở chính: 227 Nguyễn Văn Cừ, P4, Quận 5, Tp HCM (028) 38 351 056 (số máy nhánh 111) Cơ sở: 21-23 Nguyễn Biểu, P1, Quận 5, Tp HCM (028) 38 351 056 (số máy nhánh 222) Chính sách và quy định chung Điều khoản dịch vụ Chính sách bảo mật Số ĐKKD 4109000014 cấp ngày 31/08/2010 Copyright © Trung Tâm Tin Học Trường Đại học khoa học Tự nhiên ai Trung Tâm Tin Học ai 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 Glide Android