07.17 控件-GridView

GridView 网格列表视图控件，显示一个可滚动的网格视图集合。

网格列表在日常软件中很常见，如手机的应用列表界面，网购软件的商品展示页面等等，可以直观的显示所需的内容，一般用于图文并存的信息列表场景中。

常用属性

• android:columnWidth：设置列的宽度
• android:gravity：组件对其方式
• android:horizontalSpacing：水平方向每个单元格的间距
• android:verticalSpacing：垂直方向每个单元格的间距
• android:numColumns：设置列数
• android:stretchMode：设置拉伸模式，（none: 不拉伸；spacingWidth：拉伸元素间的间隔空隙 columnWidth：仅仅拉伸表格元素自身；spacingWidthUniform：同时拉伸元素和元素间隙的间距）

基本使用

实现一个带有图片和标题的网格列表示例。

1. 定义一个网格列表项的布局：layout_gridview_item.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp">

    <ImageView
        android:id="@+id/iv_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:textSize="16sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/iv_icon" />
</androidx.constraintlayout.widget.ConstraintLayout>

2. xml布局使用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <!-- 具有4列内容的网格布局 -->
    <GridView
        android:id="@+id/gv_demo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="4" />

</LinearLayout>

3. 示例代码

public class DemoActivity extends AppCompatActivity {
    private static final String TAG = "DemoActivity";
    private static final int ICON_SPRING = 0;
    private static final int ICON_SUMMER = 1;
    private static final int ICON_AUTUMN = 2;
    private static final int ICON_WINTER = 3;
    private List<DataBean> mData = new ArrayList<>();
    private GridView mGridView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_demo);

        mGridView = findViewById(R.id.gv_demo);

        // 初始化数据
        for (int i = 0; i < 16; i++) {
            int count = mData.size();
            int iconType = count % 4;
            int iconRes;
            String title;
            String tips;
            switch (iconType) {
                case ICON_SPRING:
                    iconRes = R.drawable.icon_1;
                    break;
                case ICON_SUMMER:
                    iconRes = R.drawable.icon_2;
                    break;
                case ICON_AUTUMN:
                    iconRes = R.drawable.icon_3;
                    break;
                case ICON_WINTER:
                    iconRes = R.drawable.icon_4;
                    break;
                default:
                    iconRes = 0;
            }
            title = "标题" + i;
            DataBean dataBean = new DataBean(iconRes, title);
            mData.add(dataBean);
        }

        // 设置适配器
        GridAdapter gridAdapter = new GridAdapter(this, mData);
        mGridView.setAdapter(gridAdapter);

        // 设置点击事件监听器
        mGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(DemoActivity.this,
                        String.format("点击了: %s", mData.get(position).getTitle()),
                        Toast.LENGTH_SHORT).show();
            }
        });
    }

    /**
     * GridView 适配器.
     */
    private class GridAdapter extends BaseAdapter {
        private Context mContext;
        private List<DataBean> mDataBeans;

        public GridAdapter(Context context, List<DataBean> dataBeans) {
            mContext = context;
            mDataBeans = dataBeans;
        }

        @Override
        public int getCount() {
            return mData == null ? 0 : mData.size();
        }

        @Override
        public DataBean getItem(int position) {
            return mData == null ? null : mData.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            if (null == convertView) {
                convertView = LayoutInflater.from(mContext)
                        .inflate(R.layout.layout_gridview_item, parent, false);
            }

            ImageView iv = convertView.findViewById(R.id.iv_icon);
            TextView tv = convertView.findViewById(R.id.tv_title);
            DataBean item = getItem(position);
            iv.setBackgroundResource(item.getIcon());
            tv.setText(item.getTitle());

            return convertView;
        }
    }

    /**
     * 定义列表数据对象.
     */
    public class DataBean {
        // 图标
        private int icon;
        // 标题
        private String title;

        public DataBean(int icon, String title) {
            this.icon = icon;
            this.title = title;
        }

        public int getIcon() {
            return icon;
        }

        public void setIcon(int icon) {
            this.icon = icon;
        }

        public String getTitle() {
            return title;
        }

        public void setTitle(String title) {
            this.title = title;
        }
    }
}

4. 效果图

结束

本节介绍了 Android 中默认的网格列表控件（GridView）常用属性以及相关使用方法，自定义实现的布局和适配器的方法，更多属性和用法请参考：GridView (opens new window)。