RecyclerView Using GridLayoutManager Android adapter

Trong Android, RecyclerView là phiên bản nâng cao và linh hoạt của ListView và GridView. Nó là một vùng chứa được sử dụng để hiển thị số lượng lớn các tập dữ liệu có thể được cuộn rất hiệu quả bằng cách duy trì một số lượng chế độ xem giới hạn. RecyclerView đã được giới thiệu trong Material Design ở API cấp 21 (Android 5.0, tức là Lollipop).

Material Design mang đến rất nhiều tính năng mới trong Android, làm thay đổi rất nhiều mẫu thiết kế trực quan liên quan đến việc thiết kế các ứng dụng Android hiện đại. Widget mới này là một bước tiến lớn để hiển thị dữ liệu vì GridView là một trong những widget UI được sử dụng phổ biến nhất. Trong RecyclerView android cung cấp rất nhiều tính năng mới không có trong ListView hoặc GridView hiện có.

Basic RecyclerView XML code:

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

Gradle Dependency để sử dụng RecyclerView:

Tiện ích RecyclerView là một phần của thư viện riêng biệt hợp lệ cho cấp API 7 trở lên. Thêm phần phụ thuộc sau vào tệp bản dựng Gradle của bạn để sử dụng chế độ xem lại.

dependencies {
...
compile "com.android.support:recyclerview-v7:23.23.4.0"
}

RecyclerView dưới dạng GridView trong Android:

Trong bài viết này, chúng ta sẽ thảo luận về cách sử dụng RecyclerView As GridView. Để làm được điều đó, chúng ta cần hiểu thành phần LayoutManager của RecyclerView. Trình quản lý bố cục là một khái niệm rất mới được giới thiệu trong RecyclerView để xác định loại Bố cục mà RecyclerView nên sử dụng. Nó Chứa các tham chiếu cho tất cả các khung nhìn được lấp đầy bởi dữ liệu của mục nhập. Chúng ta có thể tạo Trình quản lý bố cục tùy chỉnh bằng cách mở rộng Lớp RecyclerView.LayoutManager nhưng RecyclerView Cung cấp ba loại Trình quản lý bố cục tích hợp sẵn.

1. LinearLayoutManager: Nó được sử dụng để hiển thị Danh sách Dọc hoặc Ngang. Để hiểu nó, vui lòng đọc RecyclerView dưới dạng Listview

2. GridLayoutManager: Nó được sử dụng để hiển thị các mục ở dạng Lưới.

3. StprisredGridLayoutManager: Nó được sử dụng để hiển thị các mục trong Grid so le.

Trong bài viết này, trọng tâm chính của chúng tôi là GridLayoutManager vì nó được sử dụng để hiển thị dữ liệu ở dạng lưới. Bằng cách sử dụng Trình quản lý bố cục này, chúng ta có thể dễ dàng tạo các mục lưới. Một ví dụ phổ biến về các mục dạng lưới là thư viện trên điện thoại của chúng tôi, trong đó tất cả hình ảnh được hiển thị ở dạng lưới.

GridLayoutManager được sử dụng để hiển thị các mục dữ liệu ở định dạng lưới và chúng ta có thể dễ dàng xác định hướng cho các mục. Nói một cách đơn giản, chúng ta có thể nói rằng chúng ta sử dụng GridLayoutManager để hiển thị RecyclerView dưới dạng GridView.

Hàm tạo công khai cho GridLayoutManager: Dưới đây chúng tôi xác định hàm tạo công khai cho GridLayoutManager sẽ được sử dụng để xác định hướng (dọc hoặc ngang) của RecyclerView.

1- GridLayoutManager (Context context, int spanCount): Nó được sử dụng để tạo Vertical GridLayoutManager. Trong phương thức khởi tạo này, tham số đầu tiên được sử dụng để thiết lập ngữ cảnh hiện tại và tham số thứ hai được sử dụng để đặt span Count nghĩa là số cột trong lưới.

Ví dụ: Trong đoạn mã dưới đây, chúng tôi trình bày cách sử dụng hàm tạo này trong Android.

With Default Vertical Orientation:

// get the reference of RecyclerView
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
// set a GridLayoutManager with default vertical orientation and 3 number of columns
GridLayoutManager gridLayoutManager = new GridLayoutManager(getApplicationContext(),3);
recyclerView.setLayoutManager(gridLayoutManager); // set LayoutManager to RecyclerView

With Horizontal Orientation:

// get the reference of RecyclerView

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);

// set a GridLayoutManager with 3 number of columns
GridLayoutManager gridLayoutManager = new GridLayoutManager(getApplicationContext(),3);
gridLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL); // set Horizontal Orientation
recyclerView.setLayoutManager(gridLayoutManager); // set LayoutManager to RecyclerView

2- GridLayoutManager (Context context, int spanCount, int direction, boolean reverseLayout): Trong phương thức khởi tạo này, tham số đầu tiên được sử dụng để đặt bối cảnh hiện tại, tham số thứ hai được sử dụng để đặt span Count nghĩa là số cột trong lưới, tham số thứ ba được sử dụng để đặt Định hướng bố cục phải là dọc hoặc ngang và tham số cuối cùng là một giá trị boolean khi được đặt thành bố cục đúng từ đầu đến đầu có nghĩa là các lưới được sắp xếp từ cuối đến đầu.

// get the reference of RecyclerView
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
// set a GridLayoutManager with 3 number of columns , horizontal gravity and false value for reverseLayout to show the items from start to end
GridLayoutManager gridLayoutManager = new GridLayoutManager(getApplicationContext(),3,LinearLayoutManager.HORIZONTAL,false);
recyclerView.setLayoutManager(gridLayoutManager); // set LayoutManager to RecyclerView

So sánh giữa RecyclerView và GridView

Có rất nhiều tính năng mới trong RecyclerView không có trong GridView hiện có. RecyclerView linh hoạt hơn, mạnh mẽ hơn và là một cải tiến lớn so với GridView. Tôi sẽ cố gắng cung cấp cho bạn một cái nhìn chi tiết về nó. Dưới đây chúng tôi thảo luận về một số tính năng quan trọng của RecyclerView giúp giải thích lý do tại sao RecyclerView tốt hơn GridView.

1. Bố cục mục tùy chỉnh: GridView chỉ có thể bố trí các mục lưới trong Sắp xếp theo chiều dọc, trong đó chúng tôi đặt số lượng cột và hàng được tạo tự động theo số mục. GridView không thể được tùy chỉnh theo yêu cầu của chúng tôi. Giả sử chúng ta cần hiển thị các mục theo chiều ngang, trong đó chúng ta muốn cố định số hàng và cột được tạo tự động theo số lượng mục nhưng điều đó không khả thi với GridView mặc định. Nhưng với sự ra đời của Recyclerview, chúng ta có thể dễ dàng tạo một cách sắp xếp theo chiều ngang hoặc chiều dọc cho các mục lưới. Bằng cách sử dụng thành phần GridLayoutManager của RecyclerView, chúng ta có thể dễ dàng xác định hướng của các mục lưới và spanCount được sử dụng cho số cột nếu hướng là dọc hoặc số hàng nếu hướng là ngang.

2. Sử dụng ViewHolder Pattern: GridView Adapters không yêu cầu sử dụng ViewHolder nhưng RecyclerView yêu cầu sử dụng ViewHolder được sử dụng để lưu trữ tham chiếu của View’s. Trong GridView, bạn nên sử dụng ViewHolder nhưng nó không phải là bắt buộc nhưng trong RecyclerView thì bắt buộc phải sử dụng ViewHolder, đó là sự khác biệt chính giữa RecyclerView và GridView. ViewHolder là một lớp bên trong tĩnh trong Bộ điều hợp của chúng tôi, lớp này chứa các tham chiếu đến chế độ xem có liên quan. Bằng cách sử dụng các tham chiếu này, mã của chúng tôi có thể tránh tốn thời gian cho phương thức findViewById () để cập nhật các widget với dữ liệu mới.

3. Bộ điều hợp GridView: Trong GridView, chúng tôi sử dụng nhiều Bộ điều hợp như ArrayAdapter để hiển thị dữ liệu mảng đơn giản, Base và SimpleAdapters cho các lưới tùy chỉnh với hình ảnh và văn bản. Trong RecyclerView, chúng tôi chỉ sử dụng RecyclerView.Adapter để thiết lập các mục lưới. Trong đoạn mã Dưới đây, chúng tôi cho thấy CustomAdapter của chúng tôi trông như thế nào khi chúng tôi mở rộng lớp RecyclerView.Adapter và sử dụng ViewHolder trong đó.

public class CustomAdapter extends RecyclerView.Adapter {
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
// infalte the item Layout
View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.rowlayout, parent, false);
// set the view's size, margins, paddings and layout parameters
MyViewHolder vh = new MyViewHolder(v); // pass the view to View Holder
return vh;
}
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
}
@Override
public int getItemCount() {
return 0;
}
public class MyViewHolder extends RecyclerView.ViewHolder {
TextView textView;// init the item view's
public MyViewHolder(View itemView) {
super(itemView);

// get the reference of item view's
textView = (TextView) itemView.findViewById(R.id.textView);
}
}
}

4. Item Animator: GridView thiếu sự hỗ trợ của Good Animation’s. RecyclerView mang đến một kích thước mới trong đó. Bằng cách sử dụng lớp RecycleView.ItemAnimator, chúng ta có thể dễ dàng tạo hiệu ứng cho khung nhìn.

5. Trang trí vật phẩm: Trong GridView’s Động việc trang trí các vật phẩm như Thêm dải phân cách hoặc đường viền chưa bao giờ là dễ dàng nhưng trong RecyclerView bằng cách sử dụng lớp RecycleView.ItemDecorator, chúng tôi có quyền kiểm soát rất lớn.

Kết luận: Cuối cùng, chúng ta có thể nói rằng RecyclerView có thể tùy chỉnh nhiều hơn so với GridView hiện tại và cung cấp rất nhiều quyền kiểm soát và quyền lực cho các nhà phát triển của nó.

Ví dụ về RecyclerView dưới dạng Vertical GridView trong Android Studio:

Dưới đây là ví dụ về RecyclerView As GridView trong đó chúng tôi hiển thị lưới các Tên người với hình ảnh của họ với hướng dọc mặc định bằng cách sử dụng RecyclerView. Trong ví dụ này, chúng tôi đang sử dụng GridLayoutManager với hướng dọc và giá trị đếm 2 khoảng để hiển thị các mục. Đầu tiên, chúng tôi khai báo RecyclerView trong tệp XML của chúng tôi và sau đó lấy tham chiếu của nó trong Activity của chúng tôi. Sau đó, chúng tôi tạo hai ArrayList’s cho Tên người và Hình ảnh. Sau đó, chúng tôi đặt GridLayoutManager và cuối cùng chúng tôi đặt Bộ điều hợp để hiển thị các mục lưới trong RecyclerView. Bất cứ khi nào người dùng nhấp vào một mục, hình ảnh kích thước đầy đủ sẽ được hiển thị trên màn hình tiếp theo.

Bước 1: Tạo một dự án mới và đặt tên cho nó là RecyclerViewExample.

Bước 2: Mở Gradle Scripts> build.gradle và thêm phần phụ thuộc RecyclerView Library vào đó.

apply plugin: 'com.android.application'
android {
compileSdkVersion 24
buildToolsVersion "24.0.1"
defaultConfig {
applicationId "abhiandroid.com.recyclerviewexample"
minSdkVersion 16
targetSdkVersion 24
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:24.1.1'
compile "com.android.support:recyclerview-v7:23.4.0" // dependency file for RecyclerView
}

Bước 3: Mở res -> layout -> activity_main.xml (hoặc) main.xml và thêm mã sau:

Trong bước này, chúng tôi tạo một RecyclerView trong tệp XML của chúng tôi.

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

Bước 4: Tạo một tệp XML có thể vẽ mới trong thư mục Drawable và đặt tên là custom_item_layout.xml và thêm mã sau vào đó để tạo một mục lưới tùy chỉnh.

Trong bước này, chúng tôi tạo một tệp XML có thể vẽ được, trong đó chúng tôi thêm mã để tạo các mục lưới tùy chỉnh.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<stroke
android:width="1dp"
android:color="#000" />
</shape>

Bước 5: Tạo tệp XML rowlayout.xml mới cho mục lưới của RecyclerView và dán đoạn mã sau vào đó.

Trong bước này, chúng tôi tạo một tệp xml mới cho hàng mục, trong đó chúng tôi tạo TextView và ImageView để hiển thị dữ liệu ở định dạng lưới.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="120dp"
android:background="@drawable/custom_item_layout"
android:padding="5dp">

<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="@mipmap/ic_launcher" />
<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="ABCD"
android:textSize="20sp"
android:textColor="#fff" />
</RelativeLayout>

Bước 6: Bây giờ mở ứng dụng -> java -> package-> MainActivity.java và thêm mã bên dưới

Trong bước này, trước hết chúng ta lấy tham chiếu của RecyclerView. Sau đó, chúng tôi tạo hai ArrayList’s cho Tên người và Hình ảnh. Sau đó, chúng tôi đặt GridLayoutManager và cuối cùng chúng tôi đặt Bộ điều hợp để hiển thị các mục lưới trong RecyclerView.

public class MainActivity extends AppCompatActivity {
// ArrayList for person names
ArrayList personNames = new ArrayList<>(Arrays.asList("Person 1", "Person 2", "Person 3", "Person 4", "Person 5", "Person 6", "Person 7","Person 8", "Person 9", "Person 10", "Person 11", "Person 12", "Person 13", "Person 14"));
ArrayList personImages = new ArrayList<>(Arrays.asList(R.drawable.person1, R.drawable.person2, R.drawable.person3, R.drawable.person4, R.drawable.person5, R.drawable.person6, R.drawable.person7,R.drawable.person1, R.drawable.person2, R.drawable.person3, R.drawable.person4, R.drawable.person5, R.drawable.person6, R.drawable.person7));
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// get the reference of RecyclerView
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
// set a GridLayoutManager with default vertical orientation and 2 number of columns
GridLayoutManager gridLayoutManager = new GridLayoutManager(getApplicationContext(),2);
recyclerView.setLayoutManager(gridLayoutManager); // set LayoutManager to RecyclerView
// call the constructor of CustomAdapter to send the reference and data to Adapter
CustomAdapter customAdapter = new CustomAdapter(MainActivity.this, personNames,personImages);
recyclerView.setAdapter(customAdapter); // set the Adapter to RecyclerView
}
}

Bước 7: Tạo một lớp mới CustomAdapter.java bên trong gói và thêm mã sau.

Trong bước này, chúng ta tạo một lớp CustomAdapter và mở rộng lớp RecyclerView.Adapter với Viewholder trong đó. Sau đó, chúng tôi triển khai các phương thức được ghi đè và tạo một phương thức khởi tạo để lấy dữ liệu từ Activity. Trong Bộ điều hợp tùy chỉnh này, hai phương pháp quan trọng hơn trước tiên là onCreateViewHolder, trong đó chúng tôi tăng xml mục bố cục và chuyển nó cho View Holder và phương pháp khác là onBindViewHolder, trong đó chúng tôi đặt dữ liệu trong chế độ xem với sự trợ giúp của ViewHolder. Cuối cùng, chúng tôi triển khai sự kiện setOnClickListener trên itemview và khi nhấp vào item, chúng tôi hiển thị hình ảnh đã chọn ở kích thước đầy đủ trong Activity tiếp theo.

public class CustomAdapter extends RecyclerView.Adapter {
ArrayList personNames;
ArrayList personImages;
Context context;
public CustomAdapter(Context context, ArrayList personNames, ArrayList personImages) {
this.context = context;
this.personNames = personNames;
this.personImages = personImages;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
// infalte the item Layout
View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.rowlayout, parent, false);
// set the view's size, margins, paddings and layout parameters
MyViewHolder vh = new MyViewHolder(v); // pass the view to View Holder
return vh;
}
@Override
public void onBindViewHolder(MyViewHolder holder, final int position) {
// set the data in items
holder.name.setText(personNames.get(position));
holder.image.setImageResource(personImages.get(position));
// implement setOnClickListener event on item view.
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// open another activity on item click
Intent intent = new Intent(context, SecondActivity.class);
intent.putExtra("image", personImages.get(position)); // put image data in Intent
context.startActivity(intent); // start Intent
}
});
}
@Override
public int getItemCount() {
return personNames.size();
}
public class MyViewHolder extends RecyclerView.ViewHolder {
// init the item view's
TextView name;
ImageView image;
public MyViewHolder(View itemView) {
super(itemView);
// get the reference of item view's
name = (TextView) itemView.findViewById(R.id.name);
image = (ImageView) itemView.findViewById(R.id.image);
}
}
}

Bước 8: Tạo tệp XML activity_second.xml mới và thêm mã bên dưới vào đó.

Trong bước này, chúng tôi tạo một ImageView trong tệp XML của chúng tôi để hiển thị hình ảnh đã chọn ở kích thước đầy đủ.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:background="#fff">
<ImageView
android:id="@+id/selectedImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:scaleType="fitXY" />
</RelativeLayout>

Bước 9: Tạo một Hoạt động mới và đặt tên là SecondActivity.class và thêm đoạn mã dưới đây vào đó.

Trong bước này, chúng tôi nhận được tham chiếu của ImageView và sau đó lấy Intent được đặt từ bộ điều hợp của Hoạt động trước đó và cuối cùng chúng tôi đặt hình ảnh trong ImageView.

public class SecondActivity extends AppCompatActivity {
ImageView selectedImage;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second);
selectedImage = (ImageView) findViewById(R.id.selectedImage); // init a ImageView
Intent intent = getIntent(); // get Intent which was set from adapter of Previous Activity
selectedImage.setImageResource(intent.getIntExtra("image", 0)); // get image from Intent and set it in ImageView
}
}