Android realizes the effect of grid layout

page

RecyclerView is one of the commonly used list controls in Android development, which can be used to display large amounts of data and achieve various layout effects. This article uses RecyclerView's GridLayoutManager to implement grid layout and display the specified number of columns.
First, add a RecyclerView to your layout file:

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Child layout

Create a layout file as the layout of the child item, named item_layout, and the root node used is LinearLayout.

The layout code example is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- item_layout.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/itemTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:textSize="16sp" />

</LinearLayout>

Set android:orientation="vertical" to vertically arrange the child components in the layout. The layout contains a TextView used to display the text information of the item.
Of course, you can customize the layout according to actual needs, add and adjust the style, position and properties of components.

Activity

Then get the instance of RecyclerView in Activity or Fragment and set LayoutManager to GridLayoutManager.

val recyclerView: RecyclerView = findViewById(R.id.recyclerView)

// 设置GridLayoutManager，指定列数
// 第二个参数用于设置列数，这里是2列
val layoutManager = GridLayoutManager(this, 2)
recyclerView.layoutManager = layoutManager

Through the above code, we create a GridLayoutManager instance and specify the number of columns as 2. Then, set this instance to the LayoutManager property of RecyclerView to achieve the effect of grid layout.

// 创建数据源
val data = mutableListOf<String>()
data.add("Item 1")
data.add("Item 2")
data.add("Item 3")
data.add("Item 1")
data.add("Item 2")
data.add("Item 3")
data.add("Item 1")
data.add("Item 2")
data.add("Item 3")

// 创建适配器
val adapter = MyAdapter(data)
recyclerView.adapter = adapter

In the above code, we create a list of strings as the data source and add a few sample items. Next, a custom adapter class MyAdapter is created and the data source is passed into the adapter's constructor. Finally, set the adapter to the RecyclerView's Adapter property to display the data.

adapter

Then, create and set up an adapter to display the data in the grid layout. Create a class named MyAdapter to serve as our adapter. The code is as follows.

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class MyAdapter(private val dataList: List<String>) : RecyclerView.Adapter<MyAdapter.ViewHolder>() {
    
    

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    
    
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_layout, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    
    
        val data = dataList[position]
        holder.bindData(data)
    }

    override fun getItemCount(): Int {
    
    
        return dataList.size
    }

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    
    

        fun bindData(data: String) {
    
    
            // 在这里设置布局中的数据展示逻辑
            val itemTextView: TextView = itemView.findViewById(R.id.itemTextView)
            itemTextView.text = data
        }
    }
}

In the above code, we created an adapter class called MyAdapter and inherited from RecyclerView.Adapter. The adapter needs to pass in a data source dataList, which is a list of strings.
In the onCreateViewHolder method, we create a ViewHolder instance by loading the layout file item_layout and return the instance. item_layout is a layout file used to display a single item, which is the layout file of the sub-item we wrote in the previous section.
In the onBindViewHolder method, we bind the data to the ViewHolder based on the data at the corresponding position. Here you simply set the data into a TextView component, and you can bind it according to your specific layout file and data.
In the getItemCount method, we return the size of the data source, which is the number of items to be displayed.

Finally, the inner class ViewHolder is the view holder for each item, in which you can bind data and set click events.

This way our grid layout is ready.

operation result

Finally, we run the result and the effect is shown in the figure below.

Other articles

Android gets the LAN IP address of the current device
and the Android listening port receives messages.