带有 StaggeredGridLayoutManager 的 RecyclerView：列数可变且可垂直滚动

Posted 2023-04-18

【中文标题】带有 StaggeredGridLayoutManager 的 RecyclerView：列数可变且可垂直滚动

【英文标题】：RecyclerView with StaggeredGridLayoutManager : variable number of columns and vertically scrollable

【发布时间】：2020-05-16 18:52:47

【问题描述】：

我想显示一个字符串列表，这个列表必须是垂直可滚动的，并且每一行都有可变数量的列，这个列将取决于字符串。所以它将是一个可垂直滚动的网格。 所以图形上我想实现这一点：

我得到的结果是一个可水平滚动的列表，有 3 行和许多列，而我想要的是相反的：不能水平滚动（很多列，取决于团队名称）但可以垂直滚动.

为了实现这一点，我在回收站视图中添加了一个 StaggeredGridLayoutManager，其中包含 3 个跨度计数（这可能是错误的），并且 StaggeredGridLayoutManager.GAP_HANDLING_NONE 可以拥有尽可能多的列。

第一个问题是是否可以使用 StaggeredGridLayoutManager 实现这一点？如果是，我该如何解决我的问题？欢迎任何建议或想法。

请注意，xml 中的项目有一个最大宽度，然后它会省略

我有以下内容： item_team.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">

<data>

    <variable
        name="title"
        type="String" />

</data>

<RelativeLayout
    android:layout_
    android:layout_
    android:layout_margin="@dimen/margin_small"
    android:background="@drawable/club_background"
    android:padding="@dimen/margin_general">

    <TextView
        android:layout_
        android:layout_
        android:layout_centerInParent="true"
        android:ellipsize="end"
        android:maxWidth="184dp"
        android:gravity="center"
        android:lines="1"
        android:text="@title"
        tools:text="Arsenal" />

</RelativeLayout>

TeamAdapter.java：

public class TeamAdapter extends ListAdapter<TeamItem, RecyclerView.ViewHolder> 
private LayoutInflater inflater;
private List<TeamItem> items = new ArrayList<>();

private static final DiffUtil.ItemCallback<TeamItem> ITEM_CALLBACK = new DiffUtil.ItemCallback<TeamItem>() 
    @Override
    public boolean areItemsTheSame(@NonNull TeamItem item1, @NonNull TeamItem item2) 
        return item1.hashCode() == item2.hashCode();
    

    @Override
    public boolean areContentsTheSame(@NonNull TeamItem item1, @NonNull TeamItem item2) 
        return item1.id.equalsIgnoreCase(item2.id);
    
;

private static final int VIEW_TYPE_TEAM = 0;

public TeamAdapter(Context context) 
    super(ITEM_CALLBACK);
    inflater = LayoutInflater.from(context);


public void setTeams(List<TeamItem> teams) 
    items = teams;
    notifyDataSetChanged();


public class TeamViewHolder extends RecyclerView.ViewHolder 

    private final ItemTeamBinding binding;

    TeamViewHolder(ItemTeamBinding binding) 
        super(binding.getRoot());
        this.binding = binding;
    

    public void bind(TeamItem team) 
        binding.setTitle(team.name);
        binding.executePendingBindings();
    


@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) 
    switch (viewType) 
        case VIEW_TYPE_TEAM:
            ItemTeamBinding itemTeamBinding = DataBindingUtil.inflate(inflater, R.layout.item_team, parent, false);
            return new TeamItemViewHolder(itemTeamBinding);
    

    throw new RuntimeException("There are invalid view types in TeamAdapter!");


@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder viewHolder, final int position) 
    switch (viewHolder.getItemViewType()) 
        case VIEW_TYPE_TEAM:
            ((TeamItemViewHolder) viewHolder).bind(items.get(position));
            break;
    


@Override
public int getItemCount() 
    if (items != null && !items.isEmpty()) 
        return items.size();
    

    return super.getItemCount();


@Override
public int getItemViewType(int position) 
    if (items != null && !items.isEmpty()) 
        return VIEW_TYPE_TEAM;
    

    return super.getItemViewType(position);
  

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">

<data>

    <variable
        name="activity"
        type="com.ziniestro.base.activity.MainActivity" />

</data>

<androidx.core.widget.NestedScrollView
    android:layout_
    android:layout_>

    <LinearLayout
        android:layout_
        android:layout_
        android:orientation="vertical">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/tlbMain"
            android:layout_
            android:layout_
            app:contentInsetLeft="0dp"
            app:contentInsetStart="0dp"
            app:navigationIcon="@null">

            <TextView
                android:layout_
                android:layout_
                android:layout_marginStart="@dimen/margin_large"
                android:paddingTop="@dimen/margin_large"
                android:paddingBottom="@dimen/margin_large"
                android:text="@string/main_title" />

        </androidx.appcompat.widget.Toolbar>

        <LinearLayout
            android:layout_
            android:layout_
            android:layout_marginStart="@dimen/margin_medium"
            android:layout_marginTop="@dimen/margin_small"
            android:layout_marginEnd="@dimen/margin_medium"
            android:layout_marginBottom="@dimen/margin_xlarge"
            android:background="@drawable/round_border_station_preference"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_
                android:layout_>

                <ImageView
                    android:id="@+id/imgMain"
                    android:layout_
                    android:layout_
                    android:layout_alignParentStart="true"
                    android:layout_alignParentTop="true"
                    android:layout_marginStart="@dimen/margin_medium"
                    android:layout_marginTop="@dimen/margin_medium"
                    android:layout_marginBottom="@dimen/margin_xlarge"
                    android:src="@drawable/ic_title" />

                <TextView
                    android:layout_
                    android:layout_
                    android:layout_alignParentTop="true"
                    android:layout_marginStart="@dimen/margin_large"
                    android:layout_marginTop="@dimen/margin_xlarge"
                    android:layout_toEndOf="@+id/imgMain"
                    android:gravity="center|start"
                    android:text="@string/main_title" />

            </RelativeLayout>

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/rcyMain"
                android:layout_
                android:layout_
                android:layoutAnimation="@anim/layout_anim_scale"
                tools:listitem="@layout/item_team" />

        </LinearLayout>

    </LinearLayout>

</androidx.core.widget.NestedScrollView>

MainActivity.java

public class MainActivity extends AppCompatActivity 

private ActivityMainBinding binding;
public TeamAdapter adapter;

@Override
public void onCreate(Bundle savedInstanceState) 
    super.onCreate(savedInstanceState);

    binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
    binding.setActivity(this);
    binding.tlbMain.setTitle(Constants.EMPTY_STRING);

    final Drawable backIcon = ContextCompat.getDrawable(this, R.drawable.ic_arrow_back);
    backIcon.setColorFilter(ContextCompat.getColor(this, R.color.secondary) + 0xFF000000, PorterDuff.Mode.SRC_ATOP);
    binding.tlbMain.setNavigationIcon(backIcon);

    setSupportActionBar(binding.tlbMain);

    adapter = new TeamAdapter(this);

    if(MainApplication.getInstance().teamFeed.items !=null && !MainApplication.getInstance().teamFeed.items.isEmpty()) 
        adapter.setTeams(MainApplication.getInstance().teamFeed.items);
        StaggeredGridLayoutManager gridLayoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.GAP_HANDLING_NONE);
        binding.rcyMain.setLayoutManager(gridLayoutManager);

        binding.rcyMain.setHasFixedSize(true);
        binding.rcyMain.setAdapter(adapter);
        binding.rcyMain.setNestedScrollingEnabled(false);
    

【参考方案1】：

我认为您想要的是 FlexboxLayoutManager https://github.com/google/flexbox-layout#flexboxlayoutmanager-within-recyclerview 在 Vertical Recyclerview 中带有 Wrap 选项。

包含您想要的字符串的“单元格”的大小可以不同，如果它不能将单元格放在行上，它会将其换行到下一行。

【讨论】：

很好@Andrew 感谢您的回复，我已经快速更换： StaggeredGridLayoutManager gridLayoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.GAP_HANDLING_NONE); binding.rcyMain.setLayoutManager(gridLayoutManager);作者：FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(getActivity()); layoutManager.setFlexDirection(FlexDirection.ROW); layoutManager.setJustifyContent(JustifyContent.CENTER); binding.rcyMain.setLayoutManager(layoutManager);并且工作完美！非常感谢！