Jawaban singkat
Bagi mereka yang sudah terbiasa dengan pengaturan RecyclerView
untuk membuat daftar , kabar baiknya adalah membuat kotak sebagian besar sama. Anda hanya menggunakan GridLayoutManager
bukan sebagai LinearLayoutManager
ketika Anda mengatur RecyclerView
.
recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns));
Jika Anda membutuhkan lebih banyak bantuan dari itu, lihat contoh berikut.
Contoh lengkap
Berikut ini adalah contoh minimal yang akan terlihat seperti gambar di bawah ini.
Mulailah dengan aktivitas kosong. Anda akan melakukan tugas-tugas berikut untuk menambahkan RecyclerView
kisi. Yang perlu Anda lakukan adalah menyalin dan menempelkan kode di setiap bagian. Nanti Anda dapat menyesuaikannya agar sesuai dengan kebutuhan Anda.
- Tambahkan dependensi ke gradle
- Tambahkan file tata letak xml untuk aktivitas dan untuk sel kisi
- Buat adaptor RecyclerView
- Inisialisasi RecyclerView dalam aktivitas Anda
Perbarui dependensi Gradle
Pastikan dependensi berikut ada di gradle.build
file aplikasi Anda :
compile 'com.android.support:appcompat-v7:27.1.1'
compile 'com.android.support:recyclerview-v7:27.1.1'
Anda dapat memperbarui nomor versi ke apa pun yang terbaru .
Buat tata letak aktivitas
Tambahkan RecyclerView
tata letak ke xml Anda.
activity_main.xml
<?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="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/rvNumbers"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
Buat tata letak sel jaringan
Setiap sel di RecyclerView
grid kami hanya akan memiliki satu TextView
. Buat file sumber daya tata letak baru.
recyclerview_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:padding="5dp"
android:layout_width="50dp"
android:layout_height="50dp">
<TextView
android:id="@+id/info_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="@color/colorAccent"/>
</LinearLayout>
Buat adaptor
The RecyclerView
perlu adaptor untuk mengisi pandangan dalam setiap sel dengan data Anda. Buat file java baru.
MyRecyclerViewAdapter.java
public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.ViewHolder> {
private String[] mData;
private LayoutInflater mInflater;
private ItemClickListener mClickListener;
// data is passed into the constructor
MyRecyclerViewAdapter(Context context, String[] data) {
this.mInflater = LayoutInflater.from(context);
this.mData = data;
}
// inflates the cell layout from xml when needed
@Override
@NonNull
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = mInflater.inflate(R.layout.recyclerview_item, parent, false);
return new ViewHolder(view);
}
// binds the data to the TextView in each cell
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
holder.myTextView.setText(mData[position]);
}
// total number of cells
@Override
public int getItemCount() {
return mData.length;
}
// stores and recycles views as they are scrolled off screen
public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
TextView myTextView;
ViewHolder(View itemView) {
super(itemView);
myTextView = itemView.findViewById(R.id.info_text);
itemView.setOnClickListener(this);
}
@Override
public void onClick(View view) {
if (mClickListener != null) mClickListener.onItemClick(view, getAdapterPosition());
}
}
// convenience method for getting data at click position
String getItem(int id) {
return mData[id];
}
// allows clicks events to be caught
void setClickListener(ItemClickListener itemClickListener) {
this.mClickListener = itemClickListener;
}
// parent activity will implement this method to respond to click events
public interface ItemClickListener {
void onItemClick(View view, int position);
}
}
Catatan
- Meskipun tidak sepenuhnya diperlukan, saya menyertakan fungsionalitas untuk mendengarkan acara klik pada sel. Ini tersedia di yang lama
GridView
dan merupakan kebutuhan bersama. Anda dapat menghapus kode ini jika Anda tidak membutuhkannya.
Inisialisasi RecyclerView dalam Aktivitas
Tambahkan kode berikut ke aktivitas utama Anda.
MainActivity.java
public class MainActivity extends AppCompatActivity implements MyRecyclerViewAdapter.ItemClickListener {
MyRecyclerViewAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// data to populate the RecyclerView with
String[] data = {"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"};
// set up the RecyclerView
RecyclerView recyclerView = findViewById(R.id.rvNumbers);
int numberOfColumns = 6;
recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns));
adapter = new MyRecyclerViewAdapter(this, data);
adapter.setClickListener(this);
recyclerView.setAdapter(adapter);
}
@Override
public void onItemClick(View view, int position) {
Log.i("TAG", "You clicked number " + adapter.getItem(position) + ", which is at cell position " + position);
}
}
Catatan
- Perhatikan bahwa aktivitas mengimplementasikan apa
ItemClickListener
yang kami tetapkan dalam adaptor kami. Ini memungkinkan kami untuk menangani acara klik sel di onItemClick
.
Jadi
Itu dia. Anda harus dapat menjalankan proyek Anda sekarang dan mendapatkan sesuatu yang mirip dengan gambar di atas.
Sedang terjadi
Sudut membulat
Kolom pas otomatis
Pelajaran lanjutan