android scrollview 嵌套gridview

原创

mob64ca12dedda8 2024-09-08 06:25:05 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12dedda8的原创作品，请联系作者获取转载授权，否则将追究法律责任

Android ScrollView 嵌套 GridView 实现教程

在Android开发中，ScrollView嵌套GridView的实现是个常见的需求。然而，直接嵌套会造成GridView的高度无法自动适应ScrollView的高度，导致只显示第一个子项。本文将引导你通过几个简单的步骤实现这一功能。

实现流程

下面是实现ScrollView嵌套GridView的整个流程：

步骤	描述
步骤1	创建布局文件，定义ScrollView和GridView
步骤2	创建自定义GridView适配器
步骤3	在Activity中初始化GridView和适配器
步骤4	设置GridView的高度以适应ScrollView

步骤详解

步骤1：创建布局文件

首先，我们需要一个布局文件，在其中定义ScrollView和GridView。创建一个名为activity_main.xml的布局文件，内容如下：

<ScrollView xmlns:android="
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:numColumns="2"/> <!-- 设定列数为2 -->
</ScrollView>

ScrollView：使得内部的GridView可以滚动。
GridView：用于展示多列的网格布局。

步骤2：创建自定义GridView适配器

接下来，我们需要创建一个自定义适配器来填充我们的GridView。创建一个名为CustomGridAdapter.java的类：

public class CustomGridAdapter extends BaseAdapter {
    private Context context;
    private List<String> items;

    public CustomGridAdapter(Context context, List<String> items) {
        this.context = context;
        this.items = items;
    }

    @Override
    public int getCount() {
        return items.size();
    }

    @Override
    public Object getItem(int position) {
        return items.get(position);
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        TextView textView;
        if (convertView == null) {
            textView = new TextView(context);
            textView.setLayoutParams(new GridView.LayoutParams(200, 200)); // 每个格子高宽为200dp
            textView.setGravity(Gravity.CENTER);
            textView.setBackgroundColor(Color.LTGRAY);
        } else {
            textView = (TextView) convertView;
        }
        textView.setText(items.get(position)); // 显示item内容
        return textView;
    }
}

CustomGridAdapter：自定义适配器，用于将数据填充到GridView。
通过覆盖getView方法，我们可以定义每个GridView项的视觉展示。

步骤3：初始化GridView和适配器

在你的Activity中，初始化GridView和适配器。假设你的Activity名为MainActivity.java：

public class MainActivity extends AppCompatActivity {
    private GridView gridView;
    private List<String> items;

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

        gridView = findViewById(R.id.gridView);
        items = new ArrayList<>();
        for (int i = 0; i < 30; i++) { // 假设有30个item
            items.add("Item " + (i + 1));
        }

        CustomGridAdapter adapter = new CustomGridAdapter(this, items);
        gridView.setAdapter(adapter);
    
        // 设置GridView的高度
        setGridViewHeightBasedOnChildren(gridView);
    }

    private void setGridViewHeightBasedOnChildren(GridView gridView) {
        ListAdapter listAdapter = gridView.getAdapter();
        if (listAdapter == null) {
            return;
        }
        
        int totalHeight = 0;
        for (int i = 0; i < listAdapter.getCount(); i++) {
            View listItem = listAdapter.getView(i, null, gridView);
            listItem.measure(0, 0);
            totalHeight += listItem.getMeasuredHeight();
        }

        ViewGroup.LayoutParams params = gridView.getLayoutParams();
        params.height = totalHeight + (gridView.getVerticalSpacing() * (listAdapter.getCount() - 1));
        gridView.setLayoutParams(params);
        gridView.requestLayout();
    }
}

在onCreate方法中，我们初始化GridView并设置适配器。
setGridViewHeightBasedOnChildren方法动态计算GridView的高度，以适应ScrollView。

步骤4：测试功能

在模拟器或真机上运行程序，你应该可以滚动ScrollView，同时GridView内的项目都将展现并适应ScrollView的高度。

关系图

下面是ScrollView和GridView的关系图，使用mermaid语法表示：

erDiagram
    SCROLLVIEW {
        STRING id
        STRING layout_height
        STRING layout_width
    }
    GRIDVIEW {
        STRING id
        INTEGER numColumns
        STRING layout_height
        STRING layout_width
    }
    SCROLLVIEW ||--o{ GRIDVIEW : "包含"

甘特图

接下来是项目进度的甘特图：

gantt
    title ScrollView 嵌套 GridView 实现进度
    dateFormat  YYYY-MM-DD
    section 设计阶段
    创建布局文件         :a1, 2023-10-01, 1d
    section 开发阶段
    创建自定义适配器   :a2, after a1, 2d
    初始化GridView      :a3, after a2, 2d
    设置高度适应        :a4, after a3, 1d