📜  列表视图中的gridview (1)

📅  最后修改于: 2023-12-03 14:50:13.848000             🧑  作者: Mango

列表视图中的 GridView

GridView 是 Android 中常用的布局控件之一,特别适合用于展示数据。它提供了类似表格一样的排列方式,使得数据更加清晰、直观。在列表视图中,GridView 可以非常方便地用于展示多个图片或者项目。

基本使用

在布局文件中添加 GridView 控件:

<GridView
    android:id="@+id/gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="3"
    android:horizontalSpacing="10dp"
    android:verticalSpacing="10dp"
    android:gravity="center_horizontal" />

其中,numColumns 属性设置了每行显示的项目数量,horizontalSpacing 属性和 verticalSpacing 属性分别设置了水平和竖直方向的间距,gravity 属性设置了项目在控件中的水平对齐方式。添加好布局文件后,需要在代码中找到该控件并设置 adapter:

GridView gridView = findViewById(R.id.gridview);  // 找到控件
MyAdapter adapter = new MyAdapter(this, dataList);  // 创建数据适配器
gridView.setAdapter(adapter);  // 设置适配器

其中,MyAdapter 是根据数据自定义的 adapter 类,数据源 dataList 是一个包含具体数据的列表。

自定义 adapter

自定义 adapter 可以通过修改每个项目的布局文件和绑定数据的方法来实现。在本例中,一个项目包含了一张图片和一段文字,因此需要一个包含这两个元素的布局文件和对应的绑定方法。

布局文件

首先,在 layout/ 文件夹下新建一个布局文件 grid_item.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/grid_item_imageview"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:scaleType="centerCrop"
        android:src="@drawable/default_image" />

    <TextView
        android:id="@+id/grid_item_textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Default Text"
        android:textSize="16sp" />

</LinearLayout>

其中,ImageView 显示图片,TextView 显示文字。需要注意的是,ImageView 设置了 scaleType 属性为 centerCrop,对于不同大小的图片,能够保持等比缩放并居中显示。

绑定方法

在 adapter 中,需要覆盖 getView() 方法来绑定每个项目的数据。这个方法作用是将数据源中的一个对象绑定到一个 View 上,并返回这个 View。下面是完整的 adapter 类代码:

public class MyAdapter extends BaseAdapter {

    private List<DataItem> dataList;
    private LayoutInflater inflater;

    public MyAdapter(Context context, List<DataItem> dataList) {
        inflater = LayoutInflater.from(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 viewHolder;
        if (convertView == null) {
            convertView = inflater.inflate(R.layout.grid_item, parent, false);
            viewHolder = new ViewHolder();
            viewHolder.imageView = convertView.findViewById(R.id.grid_item_imageview);
            viewHolder.textView = convertView.findViewById(R.id.grid_item_textview);
            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }
        DataItem dataItem = dataList.get(position);
        viewHolder.imageView.setImageResource(dataItem.getImageResId());
        viewHolder.textView.setText(dataItem.getText());
        return convertView;
    }

    static class ViewHolder {
        ImageView imageView;
        TextView textView;
    }
}

其中,ViewHolder 类用于缓存每个项目中 ImageView 和 TextView 控件的实例,以提高效率。在 getView() 方法中,首先通过 convertView 来复用已经创建好的 View,如果没有可以复用的,则新建一个 grid_item 布局文件的实例,并创建 ViewHolder 对象并把其关联到该实例上。接下来,通过 ViewHolder 对象直接设置 ImageView 和 TextView 的属性值,以达到绑定数据源的目的。

总结

以上便是在列表视图中使用 GridView 的一个示例。通过自定义 adapter 中的布局文件和绑定方法,可以实现不同样式的显示效果,提高用户体验。同时,使用 ViewHolder 类缓存界面元素,能够避免系统频繁地创建和销毁对象,从而使得系统更加流畅、高效。