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

Làm quen với RecyclerView và CardView trên Android

by
Difficulty:IntermediateLength:LongLanguages:

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

Nếu bạn hứng thú với việc xây dựng một ứng dụng Android sử dụng các danh sách để hiển thị dữ liệu, thì Android Lollipop có hai sự lựa chọn mới để làm cho công việc của bạn dễ dàng hơn, đó là RecyclerViewCardView. Sử dụng những thành phần này, giúp cho ứng dụng của bạn có một giao diện phù hợp với các nguyên tắc được đề cập trong đặc tả Material Design của Google.

Yêu cầu

Để thực hiện theo, bạn nên sử dụng phiên bản mới nhất của Android Studio. Bạn có thể tải nó từ trang web Nhà phát triển Android.

1. Hỗ trợ các phiên bản cũ hơn

Tại thời điểm bài viết, có ít hơn 2% thiết bị Android chạy Android Lollipop. Tuy nhiên, nhờ Support Library v7, bạn có thể sử dụng các thành phần RecyclerViewCardView trên các thiết bị chạy phiên bản cũ của Android bằng cách thêm các dòng sau vào phần dependencies trong tập tin build.grade của dự án:

2. Tạo một CardView

Một CardView là một ViewGroup. Giống như bất kỳ ViewGroup nào khác, nó có thể được thêm vào Activity hoặc Fragment của bạn bằng cách sử dụng một tập tin layout XML.

Để tạo một CardView rỗng, bạn sẽ cần thêm đoạn code sau vào layout XML của bạn như ở trong đoạn code sau:

Một ví dụ thực tế hơn, bây giờ chúng ta hãy tạo ra một LinearLayout và đặt một CardView bên trong nó. CardView có thể đại diện, ví dụ, một người và chứa những thứ sau:

  • một TextView để hiển thị tên của người đó
  • một TextView để hiển thị độ tuổi
  • một ImageView để hiển thị ảnh của người đó

Tập tin XML sẽ trông giống như sau:

Nếu XML này được sử dụng như là layout của một Activity, với các trường TextViewImageView được thiết lập các giá trị có ý nghĩa, thì đây là cách nó sẽ được hiển thị trên một thiết bị Android:

A Stand-alone Card

3. Tạo một RecyclerView

Bước 1: Xác định nó trong một Layout

Sử dụng một đối tượng RecyclerView thì hơi phức tạp hơn. Tuy nhiên, định nghĩa nó trong một tập tin layout XML là khá đơn giản. Bạn có thể định nghĩa nó trong một layout như sau:

Để có được một tham chiếu cho nó trong Activity của bạn, sử dụng đoạn code sau:

Nếu bạn chắc chắn kích thước của RecyclerView sẽ không thay đổi, thì bạn có thể thêm những thứ sau đây để cải thiện hiệu suất:

Bước 2: Sử dụng một LayoutManager

Không giống như một ListView, một RecyclerView cần một LayoutManager để quản lý vị trí các phần tử của nó. Bạn có thể định nghĩa LayoutManager của riêng bạn bằng cách thừa kế lớp RecyclerView.LayoutManager. Tuy nhiên, trong hầu hết các trường hợp, bạn có thể chỉ cần sử dụng một trong các lớp con LayoutManager được định nghĩa sẵn:

  • LinearLayoutManager
  • GridLayoutManager
  • StaggeredGridLayoutManager

Trong hướng dẫn này, tôi sẽ sử dụng một LinearLayoutManager. Lớp con này của LayoutManager sẽ, theo mặc định, làm cho RecyclerView của bạn trông giống như một ListView.

Bước 3: Xác định dữ liệu

Cũng giống như một ListView, một RecyclerView cần một adapter để truy cập dữ liệu của nó. Nhưng trước khi chúng ta tạo ra một adapter, chúng ta hãy tạo ra dữ liệu mà chúng ta có thể làm việc với chúng. Hãy tạo một lớp đơn giản để đại diện cho một người và sau đó viết một phương thức khởi tạo một List của các đối tượng Person:

Bước 4: Tạo một adapter

Để tạo ra một adapter mà một RecyclerView có thể sử dụng, bạn phải thừa kế RecyclerView.Adapter. Adapter này thực hiện theo khuôn mẫu view holder, có nghĩa là bạn định nghĩa một lớp tùy biến thừa kế RecyclerView.ViewHolder. Mô hình này giúp giảm thiểu việc gọi phương thức findViewById.

Trước đó trong hướng dẫn này, chúng ta đã xác định layout XML cho một CardView đại diện cho một người. Bây giờ chúng ta sẽ sử dụng lại layout đó. Bên trong hàm xây dựng của ViewHolder tùy biến của chúng ta, khởi tạo các view thuộc về các phần tử của RecyclerView.

Tiếp theo, thêm một hàm xây dựng adapter tùy biến để nó có một tham chiếu dữ liệu mà RecyclerView hiển thị. Vì dữ liệu của chúng ta ở trong hình thức của một List của các đối tượng Person, nên hãy sử dụng code sau đây:

RecyclerView.Adapter có ba phương thức trừu tượng mà chúng ta phải override. Hãy bắt đầu với phương thức getItemCount. Phương thức này sẽ trả về số phần tử hiện diện trong dữ liệu. Vì dữ liệu của chúng ta ở trong hình thức của một List, nên chúng ta chỉ cần gọi phương thức size của đối tượng List:

Tiếp theo, override phương thức onCreateViewHolder. Giống như tên gọi của nó, phương thức này được gọi khi ViewHolder tuỳ biến cần phải được khởi tạo. Chúng ta xác định layout mà mỗi phần tử của RecyclerView sẽ sử dụng. Điều này được thực hiện bằng cách inflate layout sử dụng LayoutInflater, truyền đầu ra cho hàm xây dựng của ViewHolder tùy biến.

Override onBindViewHolder để xác định nội dung của mỗi phần tử của RecyclerView. Phương thức này rất giống với phương thức getView của một adapter của ListView. Trong ví dụ của chúng ta, đây là nơi mà bạn phải thiết lập các giá trị của các trường tên, tuổi, và hình ảnh của CardView.

Cuối cùng, bạn cần phải override phương thức onAttachedToRecyclerView. Còn bây giờ, chúng ta chỉ cần sử dụng cài đặt phương thức này của lớp cha như hình dưới đây.

Bước 5: Sử dụng Adapter

Bây giờ thì adapter đã sẵn sàng, thêm đoạn code sau vào Activity của bạn để khởi tạo và sử dụng adapter bằng cách gọi hàm xây dựng của adapter và phương thức setAdapter của RecyclerView:

Bước 6: Biên dịch và chạy

Khi bạn chạy ví dụ RecyclerView trên một thiết bị Android, bạn sẽ thấy một cái gì đó tương tự như kết quả sau đây.

Tổng kết

Trong hướng dẫn này, bạn đã học cách sử dụng các thành phần CardViewRecyclerView đã được giới thiệu trong Android Lollipop. Bạn cũng đã được xem ví dụ về cách sử dụng của các thành phần trong các ứng dụng Material Design. Lưu ý rằng mặc dù một RecyclerView có thể làm hầu như tất cả mọi thứ mà một ListView có thể làm, nhưng đối với các tập dữ liệu nhỏ, sử dụng một ListView vẫn phù hợp hơn vì nó đòi hỏi ít code.

Bạn có thể tham khảo Tài liệu Nhà phát triển Android để biết thêm thông tin về các lớp CardViewRecyclerView.


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.