具有两列的 GridView，第一项跨越两列

Posted 2023-04-15

【中文标题】具有两列的 GridView，第一项跨越两列

【英文标题】：GridView with two columns, first item spans both columns

【发布时间】：2015-09-14 12:48:59

【问题描述】：

我有一个 Imageview 和一个 gridview..

我的布局设计在这里..

我想将这两个视图组合成一个网格视图

我的问题：

如何在两列中设置gridview的第一项跨度？

【问题讨论】：

我添加了一个答案。我建议您更改问题的标题和内容，以便其他正在搜索此解决方案的人可以找到它。可能类似于：“GridView 有两列，第一项跨越两列”。

【参考方案1】：

在研究您的问题时，我学到了一些新东西：我碰巧在GridLayoutManager 中查看了RecyclerView，我注意到您可以设置自定义SpanSizeLookup。现在，如果您垂直滚动，“跨度”只是一列，如果您水平滚动，则只是一行。因此SpanSizeLookup 允许您指定例如，项目 0 占用 2 列，项目 1 占用 1 列，等等。

事实证明，如果您将RecyclerView 与GridLayoutManager 一起使用，则解决方案很简单：

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

        // Create a grid layout with two columns
        GridLayoutManager layoutManager = new GridLayoutManager(this, 2);

        // Create a custom SpanSizeLookup where the first item spans both columns
        layoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() 
            @Override
            public int getSpanSize(int position) 
                return position == 0 ? 2 : 1;
            
        );

        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setAdapter(new MyGridAdapter());
    

我创建了一个测试项目，只是为了尝试一下，确保它达到了我的预期，而且效果很好。

---

关于适配器的说明：RecyclerView.Adapter 与 ListAdapter 不兼容。您需要从 RecyclerView.Adapter 扩展您的适配器并进行适当的更改。

这是我为我的测试项目创建的适配器：

    public static class MyViewHolder extends RecyclerView.ViewHolder 

        ImageView mImageView;
        TextView mTextView;

        public MyViewHolder(View itemView) 
            super(itemView);
            mImageView = (ImageView) itemView.findViewById(R.id.imageView);
            mTextView = (TextView) itemView.findViewById(R.id.textView);
        
    

    public static class MyGridAdapter extends RecyclerView.Adapter<MyViewHolder> 

        private int[] mDrawables;

        public MyGridAdapter() 
            this.mDrawables = new int[] 
                    R.drawable.images_01,
                    R.drawable.images_02,
                    .
                    .
                    .
            ;
        

        @Override
        public int getItemCount() 
            return mDrawables.length;
        

        @Override
        public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) 

            LayoutInflater inflater = (LayoutInflater) parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View view = inflater.inflate(R.layout.layout_grid_item, parent, false);
            MyViewHolder holder = new MyViewHolder(view);
            // set up any onClickListener you need on the view here
            return holder;
        

        @Override
        public void onBindViewHolder(MyViewHolder holder, int position) 

            holder.mImageView.setImageResource(mDrawables[position]);
            holder.mTextView.setText("Image " + position);
        
    

首先，创建一个RecyclerView.ViewHolder 子类。视图持有者模式现在是这种新的适配器视图方式的组成部分。您的 ViewHolder 将为您的视图设置所有子视图。

然后在您的 RecyclerView.Adapter 子类中，覆盖 onCreateViewHolder() 和 onBindViewHolder()。在onCreateViewHolder() 中，你膨胀了你的视图并构造了ViewHolder。在onBindViewHolder() 中，您使用position 获取适配器数据并使用ViewHolder 设置子视图。所以RecyclerView 在技术上回收了包含Views 的ViewHolders。

对适配器进行这些更改后，您应该已准备就绪。

【讨论】：

我用 recyclerview 替换了我的 imageview 和 gridview。应用你的代码之后。我在 recyclerView.setAdapter(adapter) 中遇到错误；

遗憾的是，RecyclerView.Adapter 与 ListAdapter 不兼容，因此您必须稍微重新排列适配器。我将更新我的答案以添加一些关于此的内容。

谢谢伙计..它工作得很棒..你能分享你如何找到解决方案吗？因为我搜索这个问题超过 10 天。很多谷歌搜索没有提供答案..

不太清楚。在做了这么多年之后，我认为这是一种本能。我刚开始查看GridView 和RecyclerView.GridLayoutManager 的文档，然后我看到SpanSizeLookup 并点击了一些东西。但我必须做一个测试项目，以确保我的预感是正确的。

仅适用于横向布局？如何实现垂直布局（我的意思是合并行）