在 recyclerview Gridlayoutmanager 中创建总线布局时的间距问题

Posted 2023-04-13

【中文标题】在 recyclerview Gridlayoutmanager 中创建总线布局时的间距问题

【英文标题】：Spacing Issue while creating bus layout in recycler view Gridlayout manager

【发布时间】：2017-01-17 15:02:43

【问题描述】：

我正在使用带有 GirdLayout Manager 的回收器视图来创建总线布局

我的问题是间距我根据行列填充数据

这就是我获得布局的方式

这就是我想要的布局：

我想要第 3 行第 2 列的物品，位于第 2 行第 0 列的卧铺座椅旁边，如图所示 如何删除该空间，项目应根据其上部项目容纳。

 customGridAdapter = new CustomGridViewAdapter(getActivity(), busSeatModel, false, fareCategory, BusSeatLayout.this);
                        RtlGridLayoutManager gridLayoutManager = new RtlGridLayoutManager(getActivity(), busSeatModel.getMaxLowerColumn());
                        seatLayout.setLayoutManager(gridLayoutManager);
                        seatLayout.setAdapter(customGridAdapter);

这是我的 customGridAdapter onBindViewHolder

public class CustomGridViewAdapter extends RecyclerView.Adapter<CustomGridViewAdapter.MyViewHolder> 

Context context;
BusSeatModel busSeatModel;
HashMap<Integer, HashMap<Integer, BusSeatItemModel>> data = new HashMap<>();
LayoutInflater inflater;
boolean upper;
HashMap<Integer, BusSeatItemModel> seatLowerModels;
BusSeatItemModel lowerModel;
int maxColumn = 0;
int maxRow = 0;
BusSeatLayout busSeatLayout;
int fare;

public CustomGridViewAdapter(Context context, BusSeatModel busSeatModel, boolean upper, int fare, BusSeatLayout busSeatLayout) 
    this.context = context;
    this.busSeatModel = busSeatModel;
    inflater = LayoutInflater.from(context);
    this.fare = fare;
    this.busSeatLayout = busSeatLayout;
    this.upper = upper;
    if (upper) 
        data = busSeatModel.getBusSeatUpperModels();
        maxColumn = busSeatModel.getMaxUpperColumn();
        maxRow = busSeatModel.getMaxUpperRow();
     else 
        data = busSeatModel.getBusSeatLowerModels();
        maxColumn = busSeatModel.getMaxLowerColumn();
        maxRow = busSeatModel.getMaxLowerRow();
    



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

    View view = inflater.inflate(R.layout.seatrow_grid, parent, false);

    MyViewHolder myViewHolder = new MyViewHolder(view);

    return myViewHolder;


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

        int row = GetRow(position);
        int column = GetCol(position);

        Log.d(" Row Column  ", "" + row + "  " + column);

        seatLowerModels = new HashMap<>();

        if (data.containsKey(row)) 
            seatLowerModels = data.get(row);
            if (seatLowerModels.containsKey(column)) 
                lowerModel = seatLowerModels.get(column);
                Log.v(" same fare ", " model fare " + lowerModel.getBaseFare() + " category selected " + fare);
                if (fare == -1) 
                    Log.v("  fare  is all ", "++++    ");

                    holder.imageItem.setImageResource(lowerModel.getDrawableName(false));

                 else 
                    Log.v("  fare  is not all ", "");
                    if (lowerModel.getBaseFare() == fare) 
                        Log.v("  fare  is same ", "");
                        holder.imageItem.setImageResource(lowerModel.getDrawableName(false));
                     else 
                        Log.v("  fare  is diff ", "");
                        holder.imageItem.setImageResource(lowerModel.getDrawableName(true));
                    
                
                holder.imageItem.setVisibility(View.VISIBLE);
            
        
     catch (Exception e) 
        e.printStackTrace();
    



private int GetCol(int pos) 
    int col = pos % (maxColumn);
    return col;


private int GetRow(int pos) 
    int row = pos / (maxColumn);
    return row;


@Override
public int getItemCount() 
    return maxColumn * maxRow;



public class MyViewHolder extends RecyclerView.ViewHolder 

    ImageView imageItem;


    public MyViewHolder(View itemView) 
        super(itemView);


        imageItem = (ImageView) itemView.findViewById(R.id.item_image);

这是回收站视图

<RelativeLayout
            android:id="@+id/rlRecycler"
            android:layout_
            android:layout_
            android:background="#ffffff"
            android:gravity="center">

            <android.support.v7.widget.RecyclerView
                android:id="@+id/rvFareCategory"
                android:layout_
                android:layout_
                android:layout_centerHorizontal="true"
                android:background="#ffffff"
                android:paddingBottom="6dip"
                android:paddingTop="8dip"></android.support.v7.widget.RecyclerView>
        </RelativeLayout>

和座位布局xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_
android:layout_>

<ImageView
    android:id="@+id/item_image"
    android:layout_
    android:layout_
    android:background="@null"
    android:padding="4dp"
    android:visibility="invisible"></ImageView>

</RelativeLayout>

【问题讨论】：

发布您的 xml 布局 代码。

@jayroider 我已经更新了 xml 代码

这些行是动态添加的还是使用这个layout本身？

这些行是根据数据动态添加的。我已将 seatlayout.xml 传递给适配器

GridLayoutManager 无法帮助您进行该布局。您正在寻找的是一个 StaggeredGridLayoutManager，它可以很容易地适应复制布局（我在这里做了一个小例子gist.github.com/luksprog/230c97dfb00d71141e2f3b5b26699e00），另一种选择是具有不同行类型的 LinearLayoutManager（其中一行将由大座位+空间+4个小座位）。

【参考方案1】：

当然，问题在于您的元素的高度不同。您需要为元素分配不同的行跨度。我建议为较小的元素分配较高的元素（左侧的元素）的行跨度为 2 和 1。

我认为您可以通过将网格布局管理器设置为水平方向并使用GridLayoutManager.setSpanSizeLookup(..) 来控制跨度（因为您的现在是水平的，跨度将作用于行）。这可能需要您重新设计从支持数组中获取元素的逻辑。另一种选择是恐怕（据我所知）实现您自己的自定义布局管理器。

【讨论】：

抱歉，我是 GridLayout Manager 的新手，如何根据行设置跨度大小

假设位置 0 需要跨越 2 行，其余的只有 1 行： layoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() @Override public int getSpanSize(int position) if (position == 0 ) 返回 2; 返回 1; );

请检查我已更改图像以便更好地了解我想要实现的目标

再看一遍，我偶然发现了StaggeredGridLayoutManager。这应该可行，因为您可以控制图像的大小。

我尝试了 StaggeredGridLayout 但布局变得如此混乱，因为没有剩余空间，所以第 1 列将不可见

【参考方案2】：

我建议将您的回收站视图项布局实现为 TableLayout 或 GridLayout，它们在定义行/列跨度方面提供了更大的灵活性。

一些有用的链接：

http://android-pro.blogspot.com.eg/2010/02/table-layout.html https://developer.android.com/guide/topics/ui/layout/grid.html

【讨论】：

使用 TableLayout 或 GridLayout 如何删除该间距，我尝试使用 Table 和 GridLayout bt 第 3 行仅在第 2 行之后开始，我想在第 2 行上稍微重叠第 3 行，如图所示。

我不确定，但也许你可以尝试将项目的 layout_gravity 设置为顶部

我试过了，布局看起来和它一样，我分享的图片只有重力顶部