在 FlexboxLayout 中高效地显示多个视图答案

【问题标题】：Display many views efficiently in a FlexboxLayout在 FlexboxLayout 中高效地显示多个视图
【发布时间】：2020-04-03 21:05:58
【问题描述】：

我的目标是在 FlexboxLayout（或类似的东西）中有效地显示大量 TextView（带背景）。

我想以一种“标签”布局样式显示有关电影中演员和工作人员的信息

How the layout looks like (one of the FlexboxLayouts is marked)

我通过 LayoutInflater动态将 TextViews 膨胀到 FlexboxLayout。问题当然是 大量数据（这意味着大量视图，有时在 20 多个 Flexbox-Layouts 中有 30 个或更多）我的片段的创建时间/activity 增加，activtiy 需要更长的时间才能打开。

我膨胀的 TextView：

<TextView 
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/tag_name"
      android:layout_width="wrap_content"
      android:layout_height="30dp"
      android:layout_margin="5dp"
      android:paddingStart="10dp"
      android:paddingEnd="10dp"
      android:gravity="center_vertical"
      android:background="@drawable/bg_tag"
      android:textColor="?android:textColorSecondary"
      android:text="@string/placeholder" />

我的容器布局（TextViews 膨胀到 FlexboxLayout @+id/fxl_names）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

  <TextView
    android:id="@+id/txt_names"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColor="?attr/colorOnBackground"
    android:padding="5dp"
    android:textSize="16sp"
    android:textStyle="bold"
    android:text="test" />

  //TextViews get inflated into this FlexboxLayout

  <com.google.android.flexbox.FlexboxLayout
    android:id="@+id/fxl_names"
    app:flexWrap="wrap"
    android:animateLayoutChanges="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

  <com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/view_more"
    android:visibility="gone"
    android:layout_margin="0dp"
    android:text="Show all"
    style="@style/Widget.MaterialComponents.Button.TextButton.Dialog" />

</LinearLayout>

感谢您提供有关优化此布局的任何帮助/建议！

【问题讨论】：

标签： android android-layout layout-inflater android-flexboxlayout layout-optimization

【解决方案1】：

当您必须动态扩充大量视图时，您应该使用名为 ViewHolder 的东西来确保扩充视图操作的优化。

对于您的问题，您可能不得不使用RecyclerView 而不是FlexBoxLayout，这是我认为的最佳解决方案。还有一个FlexBoxLayoutManager 来整理您的观点。

Android FlexBoxLayout repository中有一个例子

【讨论】：

ViewHolders 对创建时间没有帮助，它们有助于回收。如果有的话，它们（可以忽略不计）会减慢创建速度，因为需要创建另一个对象。
我并不是说 ViewHolders 有助于缩短创建时间，但 RecyclerView（我对这个问题的建议）是有效的，因为使用 ViewHolder 的回收操作。
鉴于问题是“我的片段/活动的创建时间增加并且活动需要更长的时间才能打开”，特别是考虑到项目都同时出现在屏幕上，我不认为回收在这里会有所帮助
感谢您的回答，它实际上提高了很多性能。在我附加的屏幕截图中，正如@RyanM 所指出的那样，来自一个 FlexboxLayout 的所有子视图确实都在屏幕上（所以我仍在处理一些延迟，这对我来说很好），但也有很多视图在屏幕上不可见，可以回收而不是添加到 LinearLayout。