GridView is very similar to ListView. Listview mainly displays data in list form, while GridView displays data in grid form. After mastering how to use ListView, you will easily master how to use GridView.
In a certain interface design, if you need many similar controls to be neatly arranged and display data similar to a square matrix, you can use the GridView control to achieve it.
Introduction to common attributes:
width: width
height: height
clip: whether to automatically crop if the area exceeds the area
cellWidth: cell width
cellHeight: cell height
model: provide data, ListModel
delegate: Design presentation style for data
currentIndex: current item index
highLight: Highlighting style
highlightFollowsCurrentItem: Whether the highlight follows the current item
highlightMoveDuration: The time required to highlight move to the next position
Additional attributes:
ScrollBar.vertical: vertical slide bar
ScrollBar.horizontal: horizontal slide bar
…
Basic usage of GridView
GridView is a control that displays content in a two-dimensional scrollable grid. Content in the grid is automatically inserted into the layout using an adapter. The following introduces the basic usage of the GridView control by implementing a simple demo that displays province names:
在布局中使用GridView控件，实现activity_main.xml
<?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="com.example.sunxiaodong.androidgridview.MainActivity">
<GridView
android:id="@+id/grid_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="90dp"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:verticalSpacing="10dp" />
</RelativeLayout>
This GridView will fill the entire screen. Instructions on using properties will be explained in the next section "Detailed explanation of the main properties of GridView".
MainActivity.java中，获取GridView控件，并进行初始化设置
public class MainActivity extends AppCompatActivity {
private GridView mGridView;
private ProvinceAdapter mProvinceAdapter;
private String[] provinceNames = new String[]{"北京", "上海", "广东", "广西", "天津", "重庆", "湖北", "湖南", "河北", "河南", "山东"};
private int[] bgColor = new int[]{R.color.color_00ff00, R.color.color_ff0000, R.color.color_ff0000, R.color.color_ffff00,
R.color.color_8e35ef, R.color.color_303F9F, R.color.color_00ff00, R.color.color_ff0000, R.color.color_ff0000,
R.color.color_ffff00, R.color.color_8e35ef};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
mGridView = (GridView) this.findViewById(R.id.grid_view);
List<ProvinceBean> provinceBeanList = new ArrayList<>();
for (int i = 0; i < provinceNames.length; i++) {
ProvinceBean provinceBean = new ProvinceBean();
provinceBean.setName(provinceNames[i]);
provinceBean.setColor(bgColor[i]);
provinceBeanList.add(provinceBean);
}
mProvinceAdapter = new ProvinceAdapter(this, provinceBeanList);
mGridView.setAdapter(mProvinceAdapter);
}
}
程序中，首先使用findViewById方法获取到了GridView控件，接下来使用setAdapter方法给它设置提供数据的适配器。程序中，引入了两份数据provinceNames 和bgColor，其中provinceNames定义了依次显示在GridView各网格中的省份名称，bgColor定义了依次显示在GridView网格中的省份名称的背景色，这些只是为了更方便读者从视觉上认识GridView。
创建ProvinceAdapter.java文件，实现数据在GridView中的展示
public class ProvinceAdapter extends BaseAdapter {
private List<ProvinceBean> provinceBeanList;
private LayoutInflater layoutInflater;
public ProvinceAdapter(Context context, List<ProvinceBean> provinceBeanList) {
this.provinceBeanList = provinceBeanList;
layoutInflater = LayoutInflater.from(context);
}
@Override
public int getCount() {
return provinceBeanList.size();
}
@Override
public Object getItem(int position) {
return provinceBeanList.get(position);
}
@Override
public long getItemId(int position) {
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
if (convertView == null) {
convertView = layoutInflater.inflate(R.layout.province_grid_view_item_layout, null);
holder = new ViewHolder();
holder.text = (TextView) convertView.findViewById(R.id.text);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
ProvinceBean provinceBean = provinceBeanList.get(position);
if (provinceBean != null) {
holder.text.setText(provinceBean.getName());
holder.text.setBackgroundResource(provinceBean.getColor());
}
return convertView;
}
class ViewHolder {
TextView text;
}
}
ProvinceAdapter inherits from BaseAdapter and has several methods that must be implemented: getCount(), getItem(int position), getItemId(int position) and getView(int position, View convertView, ViewGroup parent). Among them, getCount() returns the number of GridView items that need to be displayed. getItem(int position) returns the data object at the given position. getItemId(int position) returns the row id of the item. getView(int position, View convertView, ViewGroup parent) is a method that must be implemented. This method controls the display of data items in GridView. The convertView view in the method is a reused view. It will be judged during implementation. If it is If null, create a new view, otherwise reuse the view directly.
The execution effect of the above program is shown in the figure below:
The above is an introduction to the GridView control in flutter development. For more advanced learning of flutter technology, you can refer to "Flutter 3.0 Hybrid Development". Click to view the detailed categories.
