Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Viết Một Ứng dụng Gallery Cho Android Với Glide

by
Difficulty:IntermediateLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Final product image
What You'll Be Creating

1. Glide Là Gì?

Glide là một thư viện mã nguồn mở phổ biến cho Android, dùng để tải hình ảnh, video và GIF động. Với Glide bạn có thể tải và hiển thị media từ nhiều nguồn khác nhau, chẳng hạn như máy chủ từ xa hoặc hệ thống tập tin cục bộ.

Mặc định, Glide sử dụng một cài đặt tùy biến của HttpURLConnection để tải hình ảnh thông qua internet. Tuy nhiê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.

2. Vậy, Tại sao Sử dụng Glide?

Phát triển tính năng tải và hiển thị media của bạn trong Java có thể là một khó khăn thật sự: bạn phải lo về bộ nhớ đệm, giải mã, quản lý kết nối mạng, luồng, xử lý ngoại lệ và vân vân. Glide là một thư viện dễ sử dụng, được cân nhắc kỹ lưỡng, có tài liệu hướng dẫn đầy đủ, và được kiểm thử một cách kỹ lưỡng, có thể giúp bạn tiết kiệm rất nhiều thời gian quý báu và bạn khỏi phải nhức ốc để tự mình làm.

Trong hướng dẫn này, chúng ta sẽ tìm hiểu về Glide 3 bằng cách xây dựng một ứng dụng gallery (thư viện hình ảnh) đơn giản. Nó sẽ tải hình ảnh thông qua Internet và hiển thị chúng dưới dạng hình thumbnail (thu nhỏ) trong RecyclerView và khi người dùng nhấp vào bất kỳ hình ảnh nào, nó sẽ mở ra một activity chi tiết có chứa hình ảnh lớn hơn.

3. Tạo Một Dự án Studio Android

Khởi động Studio Android của bạn và tạo một dự án mới với activity rỗng gọi là MainActivity.

Android Studio new project screenshot

4. Khai báo Các Phụ thuộc

Sau khi tạo một dự án mới, chỉ định các phụ thuộc sau đây trong build.gradle của bạn.

Hoặc với Maven:

Hãy đảm bảo rằng bạn đồng bộ dự án của bạn sau khi bổ sung các phụ thuộc cho Glide.

Thư viện Tích hợp

Nếu bạn muốn sử dụng một thư viện kết nối mạng như OkHttp hoặc Volley trong dự án của mình để thực hiện các hoạt động kết nối mạng, thì bạn nên chỉ định cụ thể thư viện bạn đang sử dụng cho Glide (thay vì thư viện mặc định là HttpURLConnection).

Volley

OkHttp

Bạn có thể truy cập hướng dẫn chính thức về tích hợp thư viện với Glide để biết thêm thông tin.

5. Thêm Quyền Internet

Vì Glide sẽ thực hiện một yêu cầu kết nối mạng để tải hình ảnh thông qua internet, nên chúng ta cần bao gồm quyền INTERNET trong AndroidManifest.xml của chúng ta.

6. Tạo Layout

Chúng ta sẽ bắt đầu bằng cách tạo ra RecyclerView của chúng ta.

Tạo Layout Cho Phần tử Tuỳ biến

Tiếp theo, hãy tạo layout XML sẽ được sử dụng cho mỗi phần tử (ImageView) bên trong RecyclerView.

Bây giờ thì chúng ta đã tạo layout, bước tiếp theo là tạo adapter RecyclerView để nạp dữ liệu. Trước khi chúng ta làm điều đó, hãy tạo ra mô hình dữ liệu đơn giản của chúng ta.

7. Tạo một Mô hình Dữ liệu

Chúng ta sẽ định nghĩa một mô hình dữ liệu đơn giản cho RecyclerView của chúng ta. Mô hình này cài đặt Parcelable để vận chuyển dữ liệu với hiệu quả cao từ thành phần này sang thành phần khác. Trong trường hợp của chúng ta, dữ liệu sẽ được vận chuyển từ SpaceGalleryActivity đến SpacePhotoActivity.

8. Tạo Adapter

Chúng ta sẽ tạo một adapter để đưa dữ liệu vào RecyclerView. Chúng ta cũng sẽ cài đặt một listener để lắng nghe sự kiện nhấp chuột để mở activity chi tiết—SpacePhotoActivity—truyền vào nó một đối tượng của SpacePhoto. Activity chi tiết sẽ hiển thị hình ảnh đầy đủ. Chúng ta sẽ tạo nó trong phần sau.

9. Tải Hình ảnh Từ Một URL

Đây là nơi chúng ta cần Glide thực hiện công việc của nó—để kéo về các hình ảnh từ internet và hiển thị chúng trong từng ImageView, sử dụng phương thức onBindViewHolder() của RecyclerView khi người dùng cuộn ứng dụng.

Từng bước một, đây là những gì các cuộc gọi đến Glide đang thực hiện:

  • with(Context context): chúng ta bắt đầu quá trình tải bằng cách trước tiên truyền context của chúng ta vào phương thức with().
  • load(String string): nguồn hình ảnh được chỉ định như là một đường dẫn thư mục, một URI hay một URL.
  • placeholder(int resourceId): một id tài nguyên ứng dụng cục bộ, thường được gọi là drawable, đó sẽ là một placeholder (hình giữ chỗ) cho đến khi hình ảnh được tải và hiển thị.
  • into(ImageView imageView): ImageVeiw đích mà hình ảnh sẽ được đặt ở đó.

Lưu ý rằng Glide cũng có thể tải hình ảnh cục bộ, chỉ cần truyền id của tài nguyên Android, đường dẫn tập tin hoặc Uri như là một đối số vào phương thức load().

Thay đổi Kích thước Và Biến đổi Hình ảnh

Bạn có thể thay đổi kích thước hình ảnh trước khi nó được hiển thị trong ImageView với phương thức .override(int width, int height) của Glide. Điều này giúp ích cho việc tạo hình thumbnail trong ứng dụng của bạn khi tải một kích thước hình ảnh khác nhau từ máy chủ. Lưu ý rằng các tham số được tính bằng pixel chứ không phải là dp.

Có sẵn các phép biến đổi hình ảnh sau:

  • fitCenter(): giãn hình ảnh một cách thống nhất (duy trì tỷ lệ của hình ảnh) 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.
  • centerCrop(): giãn hình ảnh một cách thống nhất (duy trì tỷ lệ của hình ảnh) 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.

10. Khởi tạo Adapter

Ở đây chúng ta tạo ra RecyclerView với GridLayoutManager như là trình quản lý layout, khởi tạo adapter của chúng ta, và ràng buộc nó vào RecyclerView.

11. Tạo Activity Chi tiết

Tạo một activity mới và đặt tên nó là SpacePhotoActivity. Chúng ta lấy extra SpacePhoto và tải hình ảnh với Glide như chúng ta đã làm trước đây. Ở đây chúng ta mong muốn tập tin hoặc URL là một Bitmap, vì vậy chúng ta sẽ sử dụng asBitmap() để làm cho Glide nhận một Bitmap. Nếu không việc tải sẽ không thành công và callback .error() sẽ được kích hoạt—làm cho tài nguyên drawable trả về từ callback error được hiển thị. Bạn cũng có thể sử dụng asGif() nếu bạn muốn đảm bảo rằng hình ảnh đã được nạp của bạn là một ảnh GIF. (Tôi sẽ sớm giải thích cách GIF hoạt động trong Glide.)

Lưu ý rằng chúng ta cũng khởi tạo một bộ nhớ đệm duy nhất cho các hình ảnh được tải: DiskCacheStrategy.SOURCE. Tôi sẽ giải thích thêm về bộ nhớ đệm trong phần sau.

Layout Chi tiết

Đây là một layout để hiển thị activity chi tiết. Nó chỉ hiển thị một ImageView có thể cuộn sẽ hiển thị phiên bản đầy đủ của hình ảnh được tải.

12. Bộ nhớ đệm Trong Glide

Nếu bạn theo dõi kỹ, bạn sẽ thấy rằng khi bạn xem lại hình ảnh đã được tải trước đó, nó sẽ tải nhanh hơn trước. Điều gì làm cho nó nhanh hơn? Hệ thống bộ nhớ đệm của Glide, đó là những gì.

Sau khi một hình ảnh đã được tải một lần từ internet, Glide sẽ lưu nó trong bộ nhớ đệm và trên đĩa, tiết kiệm được các yêu cầu mạng lặp đi lặp lại và cho phép truy vấn hình ảnh nhanh hơn. Vì vậy, Glide trước tiên sẽ kiểm tra xem một hình ảnh có sẵn trong bộ nhớ hoặc trên đĩa hay không trước khi tải nó từ mạng.

Tuy nhiên, tùy thuộc vào ứng dụng của bạn, bạn có thể cần tránh bộ nhớ đệm—ví dụ: nếu những hình ảnh được hiển thị có thể thay đổi thường xuyên và không được tải lại.

Vậy Làm thế nào Bạn Vô hiệu hoá Bộ nhớ đệm?

Bạn có thể tránh bộ nhớ đệm bằng cách gọi .skipMemoryCache(true). Nhưng hãy lưu ý rằng hình ảnh vẫn sẽ được lưu trữ trong đĩa—để ngăn chặn điều đó, bạn sử dụng phương thức .diskCacheStrategy(DiskCacheStrategy strategy), nó nhận một trong những giá trị enum sau đây:

  • DiskCacheStrategy.NONE: không có dữ liệu nào được lưu vào bộ nhớ đệm.
  • DiskCacheStrategy.SOURCE: dữ liệu ban đầu được lưu vào bộ nhớ đệm.
  • DiskCacheStrategy.RESULT: lưu kết quả của dữ liệu sau khi chuyển đổi vào bộ nhớ đệm.
  • DiskCacheStrategy.ALL: lưu trữ cả dữ liệu ban đầu và dữ liệu đã chuyển đổi.

Để tránh lưu vào bộ nhớ và bộ nhớ đệm của ổ đĩa, chỉ cần lần lượt gọi cả hai phương thức:

13. Các Listener Cho Yêu cầu

Trong Glide, bạn có thể cài đặt một RequestListener để theo dõi trạng thái của yêu cầu mà bạn thực hiện khi tải hình ảnh. Chỉ một trong những phương thức này sẽ được gọi.

  • onException(): được kích hoạt bất cứ khi nào một ngoại lệ xuất hiện để bạn có thể xử lý ngoại lệ trong phương thức này.
  • onResourceReady(): được kích hoạt khi hình ảnh được tải thành công.

Quay trở lại ứng dụng gallery của chúng ta, hãy sửa đổi màn hình một chút bằng cách sử dụng đối tượng RequestListener giúp đặt bitmap vào ImageView và đồng thời thay đổi màu nền của layout bằng cách chiết xuất màu tối và nổi của hình ảnh bằng cách sử dụng Android Palette API

Ở đây bạn cũng có thể ẩn một hộp tiến độ nếu có. Với sự thay đổi cuối cùng này, hãy đảm bảo bao gồm phụ thuộc Palette trong build.gradle của bạn:

14. Thử nghiệm Ứng dụng

Cuối cùng, bạn đã có thể chạy ứng dụng! Nhấp vào một hình thumbnail để xem một phiên bản đầy đủ của hình ảnh.

Emulator running the application screenshots

15. Hiệu ứng động

Nếu bạn chạy ứng dụng, bạn sẽ nhận thấy một hiệu ứng cắt ngang đang xảy ra khi hình ảnh đang được hiển thị. Glide kích hoạt hiệu ứng này mặc định, nhưng bạn có thể vô hiệu hóa nó bằng cách gọi dontAnimate(), điều này sẽ chỉ làm cho hình ảnh được hiển thị mà không có bất kỳ hiệu ứng nào. Bạn còn có thể tùy biến hiệu ứng cắt ngang bằng cách gọi crossFade(int duration), truyền vào duration (khoảng thời gian) bằng mili giây để tăng tốc hoặc làm chậm nó xuống—300 mili giây là mặc định.

Hình GIF Động

Rất dễ để hiển thị ảnh GIF động trong ứng dụng của bạn bằng Glide. Nó hoạt động giống như hiển thị hình ảnh bình thường.

Nếu bạn kỳ vọng hình ảnh đó là GIF, hãy gọi asGif()—điều này đảm bảo rằng Glide nhận một GIF, nếu không việc tải sẽ không thành công và Drawable được truyền vào phương thức .error() sẽ được hiển thị.

Phát Video

Không may, Glide không hỗ trợ tải và hiển thị video thông qua URL. Thay vào đó, nó chỉ có thể tải và hiển thị video đã được lưu trữ trên điện thoại. Hiển thị một video bằng cách truyền URI của nó vào phương thức load().

Tóm tắt

Làm tốt lắm! Trong hướng dẫn này, bạn đã xây dựng một ứng dụng gallery hoàn chỉnh với Glide và song song đó học được cách làm việc của thư viện và cách bạn có thể tích hợp nó vào dự án của riêng bạn. Bạn cũng đã học được cách hiển thị cả hình ảnh cục bộ và từ xa, cách hiển thị ảnh GIF động và video, cách để áp dụng các phép biến đổi hình ảnh như thay đổi kích thước. Không chỉ vậy, bạn còn thấy nó dễ dàng thế nào để kích hoạt bộ nhớ đệm, xử lý lỗi và tuỳ biến các listener.

Để tìm hiểu thêm về Glide, bạn có thể tham khảo tài liệu chính thức của nó. Để tìm hiểu thêm về viết ứng dụng Android, hãy kiểm tra một số các khóa học và hướng dẫn khác của chúng tôi ở đây trên Envato Tuts+!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.