[Android from scratch single row series twenty-two] "Android View Control - GridView"

Table of contents

Preface

A basic introduction to GridView

2. How to use GridView

Three GridView common properties and methods

Four summary

---

Preface

Friends, in the above article we introduced the Android view component ExpandableListView. In this article, we continue to take stock and introduce the GridView of the view control.

A basic introduction to GridView

GridView is a commonly used layout control in Android. It can display data in a grid form, similar to a table or matrix. GridView can display data in multiple cells according to the specified number of rows and columns, so that the data appears in a regular arrangement.

GridView provides data through Adapter and can customize the layout of each cell. Users can customize the Adapter to adapt to various data sources and set different view styles and content for each cell.

GridView also supports interactive operations, such as clicking on cells to respond to events, scrolling to display large amounts of data, etc.

2. How to use GridView

1. Add GridView in XML layout file:

   <GridView
       android:id="@+id/gridView"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:numColumns="3" 
       />
   

2. Prepare the data source: Provide data for the GridView. Typically, you use an adapter to manage data.

   List<String> dataList = new ArrayList<>(); // 数据列表
   
   // 添加数据
   dataList.add("Item 1");
   dataList.add("Item 2");
   dataList.add("Item 3");
   // 添加更多数据...
   
   

3. Create an adapter (Adapter): Create an adapter class, inherit from the BaseAdapter class, and implement the necessary methods to provide data and view binding.

   public class MyGridAdapter extends BaseAdapter {
   
       private List<String> dataList;
       private Context context;
   
       public MyGridAdapter(Context context, List<String> dataList) {
           this.context = context;
           this.dataList = dataList;
       }
   
       // 实现必要的方法...
   
       @Override
       public int getCount() {
           return dataList.size();
       }
   
       @Override
       public Object getItem(int position) {
           return dataList.get(position);
       }
   
       @Override
       public long getItemId(int position) {
           return position;
       }
   
       @Override
       public View getView(int position, View convertView, ViewGroup parent) {
           ViewHolder holder;
   
           if (convertView == null) {
               LayoutInflater inflater = LayoutInflater.from(context);
               convertView = inflater.inflate(R.layout.grid_item_layout, parent, false);
   
               holder = new ViewHolder();
               holder.itemTextView = convertView.findViewById(R.id.itemTextView);
   
               convertView.setTag(holder);
           } else {
               holder = (ViewHolder) convertView.getTag();
           }
   
           String item = dataList.get(position);
           holder.itemTextView.setText(item);
   
           return convertView;
       }
   
       private static class ViewHolder {
           TextView itemTextView;
       }
   }
   

4. Create grid_item_layout.xml layout file: Create a layout file to define the style of each cell in the GridView. For example, you can place a TextView in a layout to display data.

   <!-- grid_item_layout.xml -->
   <TextView xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@+id/itemTextView"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:gravity="center"
       android:padding="10dp"
       />
   

5. Set up the adapter in code:

   // 获取 GridView
   GridView gridView = findViewById(R.id.gridView);
   
   // 创建适配器
   MyGridAdapter adapter = new MyGridAdapter(this, dataList);
   
   // 设置适配器
   gridView.setAdapter(adapter);
   
   // 设置项点击事件监听器
   gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
       @Override
       public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
           // 处理项点击事件
       }
   });
   

Three GridView common properties and methods

Common properties:

1. numColumns: Set the number of columns of GridView.
2. stretchMode: Set how to stretch to fill the blank area when all cells in the row are less than one row.
3. columnWidth: Set the width of each column.
4. horizontalSpacing: Set the spacing between cells in the horizontal direction.
5. verticalSpacing: Set the spacing between cells in the vertical direction.
6. Gravity: Sets the alignment of cell content.

Common methods:

1. setAdapter(Adapter adapter): Set the data adapter of GridView.
2. setOnItemClickListener(AdapterView.OnItemClickListener listener): Set the cell click event listener.
3. setOnItemLongClickListener(AdapterView.OnItemLongClickListener listener): Set the cell long press event listener.
4. smoothScrollToPosition(int position): Smoothly scroll the GridView to the specified position.
5. getFirstVisiblePosition(): Gets the position of the first currently visible cell.
6. getLastVisiblePosition(): Gets the position of the last cell currently visible.

Four summary

In short, GridView is a layout control commonly used in Android development for displaying data. Its characteristic is that it can display data in a grid form and supports custom layout and interactive operations.