温馨提示:本文翻译自stackoverflow.com,查看原文请点击:android - RecyclerView with StaggeredGridLayoutManager : variable number of columns and vertically scrollable
android android-recyclerview staggeredgridlayoutmanager

android - 具有StaggeredGridLayoutManager的RecyclerView:可变的列数和垂直滚动

发布于 2020-03-29 21:31:48

我想显示一个字符串列表,该列表必须垂直滚动,并且对于每一行,其列数都是可变的,此列与将取决于字符串。因此它将是一个可垂直滚动的网格。所以我想以图形方式实现这一目标: 在此处输入图片说明

结果,我得到的是一个水平滚动的列表,该列表具有3行和许多列,而我想要的是另一种方式:不是水平滚动的(很多列,取决于团队名称)而是垂直滚动的。

为了做到这一点,我在回收站视图中添加了一个具有3个跨度计数的StaggeredGridLayoutManager(这可能是错误的),并且向StaggeredGridLayoutManager.GAP_HANDLING_NONE添加了尽可能多的列。

第一个问题是可以通过StaggeredGridLayoutManager实现吗?如果是,我该如何解决我的问题?任何建议或想法都欢迎。

请注意,xml中的项目具有最大宽度,然后为ellipsizes

我所拥有的如下: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_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/margin_small"
    android:background="@drawable/club_background"
    android:padding="@dimen/margin_general">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        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_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/tlbMain"
            android:layout_width="match_parent"
            android:layout_height="?android:actionBarSize"
            app:contentInsetLeft="0dp"
            app:contentInsetStart="0dp"
            app:navigationIcon="@null">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                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_width="match_parent"
            android:layout_height="wrap_content"
            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_width="wrap_content"
                android:layout_height="wrap_content">

                <ImageView
                    android:id="@+id/imgMain"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    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_width="wrap_content"
                    android:layout_height="wrap_content"
                    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_width="match_parent"
                android:layout_height="wrap_content"
                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);
    }
}
}

查看更多

提问者
ziniestro
被浏览
105
Andrew 2020-01-31 19:34

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

包含所需字符串的“单元格”的大小可以变化,如果不能将单元格放在该行上,则将其包装到下一行。