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

Question

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

我想以一种'tag'-布局样式

显示电影中演员和剧组成员的信息

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

我通过 LayoutInflater 动态地 将 TextView 膨胀到 FlexboxLayout 中。问题当然是大量数据（这意味着大量视图，有时在 20 多个 Flexbox 布局中有 30 个或更多）我的 fragment/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>

感谢您help/advice优化此布局！

Answer 1

当你不得不动态地膨胀很多视图时，你应该使用一种叫做ViewHolder的东西来确保膨胀视图动作的优化。

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

Android FlexBoxLayout repository

中有例子

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

Display many views efficiently in a FlexboxLayout

android

android-layout

layout-optimization

layout-inflater

android-flexboxlayout