Đang thực hiện
Tên đăng nhập
Mật khẩu
 
Hoặc đăng nhập bằng:
Nhập lại mật khẩu

Trang chủ Cẩm nang học viên
Cẩm nang học viên

Tạo danh sách với RecyclerView trong ứng dụng Android

Cập nhật: 28/08/2018 Lượt xem: 458
Ứng dụng Android cần hiển thị một tập hợp dữ liệu lớn trên một danh sách có thể cuộn thì ngoài ListView, GridView có thể sử dụng điều khiển mới là RecyclerView được giới thiệu từ phiên bản 22 Lollipop. RecyclerView là một nâng cấp linh hoạt hơn so với ListView / GridView.
Ứng dụng Android cần hiển thị một tập hợp dữ liệu lớn trên một danh sách có thể cuộn thì ngoài ListView, GridView có thể sử dụng điều khiển mới là RecyclerView được giới thiệu từ phiên bản 22 Lollipop.

 
tao-danh-sach-voi-recycle-view-1

Một danh sách sử dụng RecyclerView
 
RecyclerView là một nâng cấp linh hoạt hơn so với ListView / GridView. Nó có thể hiển thị bố cục dữ liệu bằng trình quản lý bố cục (layout manager).

RecyclerView có các trình quản lý bố cục sẵn có gồm: LinearLayoutManager, GridLayoutManager và StaggeredGridLayoutManager. Để tăng độ mượt khi duyệt danh sách, trước đây với ListView lập trình viên phải tự dựng static class ViewHolder. Giờ đây, đã có RecyclerView.ViewHolder đại diện cho hiển thị mỗi mục. Ví dụ, nếu danh sách hiển thị album nhạc thì mỗi mục sẽ là một bài hát.

Tương tự như người tiền nhiệm, RecyclerView cũng sử dụng adaper là RecyclerView.Adapter để quản lý các đối tượng trong danh sách. Adapter này có phương thức onBindViewHolder() có trách nhiệm đẩy dữ liệu cho đối tượng ViewHolder xác định thông qua vị trí (position, đánh số từ 0).

Để bắt đầu sử dụng RecyclerView cần:
 

1. Thêm thư viện

 
dependencies {
   implementation fileTree(dir: 'libs', include: ['*.jar'])
   implementation 'com.android.support:appcompat-v7:27.1.1'
   implementation 'com.android.support.constraint:constraint-layout:1.1.2'
   testImplementation 'junit:junit:4.12'
   androidTestImplementation 'com.android.support.test:runner:1.0.2'
   androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
   implementation 'com.android.support:recyclerview-v7:27.1.1'
   implementation 'com.android.support:cardview-v7:27.1.1'
}
 











 

2. Chèn RecyclerView lên layout

xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">   <android.support.v7.widget.RecyclerView
       android:id="@+id/rvFood"
       android:layout_width="match_parent"
       android:layout_height="match_parent"       android:layout_below="@id/control">android.support.v7.widget.RecyclerView>
RelativeLayout>
 
 

3. Tạo Apdater

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
 
import java.util.ArrayList;
 
/**
* Kế thừa lớp Adapter với Generic là MyViewHolder
*/
public class MyAdapter extends RecyclerView.Adapter {
   ArrayList mList;
   Context mContext;
 
   /**
    * Hàm khởi tạo
    * @param mList
    * @param mContext
    */
   public MyAdapter(ArrayList mList, Context mContext) {
       this.mList = mList;
       this.mContext = mContext;
   }
 
   /**
    * Hàm tạo các đối tượng ViewHolder
    * @param parent
    * @param viewType
    * @return
    */
   @NonNull
   @Override
   public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
       View v = LayoutInflater.from(mContext).inflate(R.layout.item_food, parent, false);
       MyViewHolder mvh = new MyViewHolder(v);
       return mvh;
   }
 
   /**
    * Đẩy dữ liệu vào ViewHolder
    * @param holder
    * @param position
    */
   @Override
   public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
       holder.title.setText(mList.get(position).title);
       holder.image.setImageResource(mList.get(position).imageRes);
   }
 
   /**
    * Đếm số lượng các phần tử
    * @return
    */
   @Override
   public int getItemCount() {
       return mList.size();
   }
 
 
   /**
    * Lớp static ViewHolder có tác dụng giữ các phần tử View
    */
   public static class MyViewHolder extends RecyclerView.ViewHolder {
 
       TextView title;
       ImageView image;
 
       public MyViewHolder(View v) {
           super(v);
           this.title = v.findViewById(R.id.itemLblTitle);
           this.image = v.findViewById(R.id.itemImgDesc);
       }
   }
}
 
 

4. Code trên Activity
 

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
 
import java.util.ArrayList;
 
public class MainActivity extends AppCompatActivity {
 
   RecyclerView mRv;
   ArrayList mLstFood = new ArrayList<>();
 
   private void fakeData() {
       mLstFood.add(new Food("Bánh mỳ thịt", R.drawable.img_banhmythit));
       mLstFood.add(new Food("Hoa quả", R.drawable.img_hoaqua));
       mLstFood.add(new Food("Ngô Nướng", R.drawable.img_ngonuong));
       mLstFood.add(new Food("Cá hồi Chile", R.drawable.img_cahoi_chile));
       mLstFood.add(new Food("Sandwitch", R.drawable.img_sandwitch));
       mLstFood.add(new Food("Hoa quả", R.drawable.img_hoaqua));
       mLstFood.add(new Food("Ngô Nướng", R.drawable.img_ngonuong));
       mLstFood.add(new Food("Bánh mỳ thịt", R.drawable.img_banhmythit));
       mLstFood.add(new Food("Cá hồi Chile", R.drawable.img_cahoi_chile));
       mLstFood.add(new Food("Hoa quả", R.drawable.img_hoaqua));
       mLstFood.add(new Food("Ngô Nướng", R.drawable.img_ngonuong));
       mLstFood.add(new Food("Sandwitch", R.drawable.img_sandwitch));
       mLstFood.add(new Food("Hoa quả", R.drawable.img_hoaqua));
       mLstFood.add(new Food("Ngô Nướng", R.drawable.img_ngonuong));
   }
 
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
 
       // Dữ liệu ảo
       fakeData();
 
       // Gọi RecycleView và đổ dữ liệu
       mRv = (RecyclerView) findViewById(R.id.rvFood);
 
       // tăng hiệu năng nếu thay đổi nội dung KHÔNG thay đổi kích thước layout
//        mRv.setHasFixedSize(true);
 
       // Cài đặt hiển thị kiểu Linear
       mRv.setLayoutManager(new LinearLayoutManager(this));
 
       MyAdapter adapter = new MyAdapter(mLstFood, this);
       mRv.setAdapter(adapter);
   }
 
   public void checkLinear(View view) {
       // Cài đặt hiển thị kiểu Linear
       mRv.setLayoutManager(new LinearLayoutManager(this));
   }
 
   public void checkGrid(View view) {
       // Grid 2 cột
       mRv.setLayoutManager(new GridLayoutManager(this, 2));
   }
 
   public void checkStagered(View view) {
       // Stagered 2 cột và điều chỉnh chiều dọc
       StaggeredGridLayoutManager sglm =
               new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
       mRv.setLayoutManager(sglm);
   }
 
   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
       getMenuInflater().inflate(R.menu.main_menu, menu);
       return super.onCreateOptionsMenu(menu);
   }
 
   @Override
   public boolean onOptionsItemSelected(MenuItem item) {
       int id = item.getItemId();
       switch (id){
           case R.id.menu_cardview:
               Intent intent = new Intent(this, DemoCardViewActivity.class);
               startActivity(intent);
               break;
       }
       return super.onOptionsItemSelected(item);
   }
 


Các quản lý bố cục của RecycleView có thể hiển thị như sau:
 

tao-danh-sach-voi-recycle-view-3

LinearLayoutManager

tao-danh-sach-voi-recycle-view-4


GridLayoutManager


tao-danh-sach-voi-recycle-view-5


StaggeredGridLayoutManager

 

MinhVT

Các bài viết liên quan
Tư vấn viên 1: Nguyễn Thu Huyền
Tư vấn viên 2: Thu Huyền
Tuyển sinh lập trình viên quốc tế - MMS new vision
Khóa học C&B Excel - Trần Văn Hải