Tạo hiệu ứng cho layout hoặc RecyclerView khi load dữ liệu

Tram Ho

Nhiều trường hợp app của chúng ta phải tải dữ liệu từ internet hoặc bộ nhớ của thiết bị. Và trong hầu hết các trường hợp, chúng ta phải đợi một lúc để tải dữ liệu. Trong khi chờ đợi, có vẻ tốt hơn nhiều nếu chúng ta hiển thị khung giao diện cho người dùng giống như load list comment của Facebook thay vì chỉ hiển thị một màn hình trắng. Người dùng sẽ không biết app đang load hay đang không làm gì cả.

Trong bài viết này, chúng ta sẽ tìm hiều cách hiển thị khung giao diện và các hiệu ứng như Facebook hoặc LinkedIn cho Layout và recyclerView trên Android bằng thư viện AndroidVeil.

Như ví dụ bên dưới

Thêm thư viện vào Project

Trước tiên, bạn thêm AndroidVeil vào file build.gradle.

Phiên bản này có thể chưa phải phiên bản mới nhất. Nếu bạn muốn có phiên bản mới nhất, bạn có thể kiểm tra nó ở đây.

Cách dùng

Dưới đây là một ví dụ cơ bản về việc implement hiệu ứng cho View hoặc Viewgroup trong layout bằng VeilLayout.

VeilLayout có thể bao bọc bất kỳ view hoặc viewgroup nào và nó sẽ tạo ra các khung giao diện dựa trên hệ thống phân cấp view và tạo ra hiệu ứng. Nguyên tắc cơ bản là VeilLayout sẽ đi qua hệ thống phân cấp view được bao bọc sau đó tạo khung dựa trên các view và kích thước width/height của view con.

Nếu bạn muốn sử dụng VeilLayout cho một layout resource, chúng ta có thể thực hiện như sau.

Và chúng ta có thể thay đổi màu khung giao diện, màu hiệu ứng, alpha, drop Offer và bán kính của khung giao diện bằng cách sử dụng các thuộc tính có sẵn.

Veil và UnVeil

Nó thực sự dễ sử dụng. Chỉ cần gọi các hàm veil()unVeil().

Chúng ta có thể gọi phương thức veil() trước khi request server hoặc trước khi làm một công việc gì đó mất thời gian. Sau khi hoàn thành công việc đó, chúng ta nên gọi phương thức unVeil() để hiển thị giao diện thực tế.

Dưới đây là một ví dụ về việc sử dụng GlideVeilLayout trong ViewHolder (RecyclerView). Trường hợp này, mọi ViewHolder items đều có imageView nên được tải bởi Glide. Và chúng ta muốn tạo hiệu ứng trước khi tải hình ảnh.

Glide cung cấp listener success và failure khi tải hình ảnh. Vì vậy, chúng ta có thể sử dụng nó với VeilLayout. Chỉ cần gọi phương thức veil() ngay từ đầu trong phương thức onBindViewHolder. Và sau khi chúng ta có thể biết trạng thái của hình ảnh được tải (success hay failure), chúng ta gọi phương thức unVeil().

VeilRecyclerFrameView

Đây là cách dễ dàng hơn để thực hiện các hiệu ứng lung linh cho RecyclerView bằng VeilRecyclerFrameView. Nó gần như tương tự với việc sử dụng VeilLayout. Chúng ta nên sử dụng VeilRecyclerFameView thay vì RecyclerView trong XML file.

Chúng ta bind RecyclerView.AdapterLayoutManager giống như VeilRecyclerFameView bên dưới.

Kết quả RecyclerView của chúng ta sẽ như sau:

Shimmer

Thư viện này sử dụng shimmer-android của Facebook. Dưới đây là hướng dẫn chi tiết về shimmer-instruction hoặc chúng ta có thể tham khảo ví dụ dưới đây.

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo