【发布时间】:2020-07-26 20:40:56
【问题描述】:
我有一个片段,上面有一个骨架视图。 Skeleton/Shimmering 视图仅在数据处于加载状态时显示一次,然后将其隐藏。我在 ViewPager2 中使用该片段。为了使 ViewPager2 的滚动更流畅,我试图优化布局。所以,我想更好地了解哪种方法更好。
- 在运行时膨胀或移除骨架?
- 将骨架保留在 XML 中并将其可见性设置为 GONE。
以下是 ShimmerLayout 的虚拟 XML,其中包含 5-7 个视图。任何想法都会很有意义。
谢谢
ShimmerLayout xml:
<com.facebook.shimmer.ShimmerFrameLayout
android:id="@+id/slEffect"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="false"
android:paddingStart="18dp"
style="@style/ShimmerCommon"
app:shimmer_highlight_color="@color/post_detail_shimmer">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="26dp"
android:layout_marginEnd="18dp"
android:layout_marginBottom="75dp">
<com.makeramen.roundedimageview.RoundedImageView
android:id="@+id/ivUserImage"
android:layout_width="45dp"
android:layout_height="45dp"
android:scaleType="centerCrop"
android:src="@color/post_detail_shimmer"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:riv_corner_radius="9dp" />
<com.makeramen.roundedimageview.RoundedImageView
android:id="@+id/tvUserName"
android:layout_width="125dp"
android:layout_height="15dp"
android:layout_marginStart="7.9dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="7.9dp"
android:scaleType="fitXY"
android:src="@color/post_detail_shimmer"
app:layout_constraintStart_toEndOf="@+id/ivUserImage"
app:layout_constraintTop_toTopOf="@+id/ivUserImage"
app:riv_corner_radius="8dp" />
<com.makeramen.roundedimageview.RoundedImageView
android:id="@+id/tvTime"
android:layout_width="100dp"
android:layout_height="15dp"
android:layout_marginStart="7.9dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="7.9dp"
android:scaleType="fitXY"
android:src="@color/post_detail_shimmer"
app:layout_constraintStart_toEndOf="@+id/ivUserImage"
app:layout_constraintTop_toBottomOf="@+id/tvUserName"
app:riv_corner_radius="8dp" />
<com.makeramen.roundedimageview.RoundedImageView
android:id="@+id/tvSuserName"
android:layout_width="125dp"
android:layout_height="15dp"
android:layout_marginBottom="8dp"
android:scaleType="fitXY"
android:visibility="gone"
android:src="@color/post_detail_shimmer"
app:layout_constraintBottom_toTopOf="@+id/tvSTime"
app:layout_constraintStart_toStartOf="parent"
app:riv_corner_radius="8dp" />
<com.makeramen.roundedimageview.RoundedImageView
android:id="@+id/tvSTime"
android:layout_width="100dp"
android:layout_height="15dp"
android:scaleType="fitXY"
android:src="@color/post_detail_shimmer"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:riv_corner_radius="8dp" />
<com.makeramen.roundedimageview.RoundedImageView
android:id="@+id/tvSTsime"
android:layout_width="100dp"
android:layout_height="15dp"
android:layout_below="@id/tvSuserName"
android:scaleType="fitXY"
android:visibility="gone"
android:src="@color/post_detail_shimmer"
app:layout_constraintBottom_toBottomOf="@+id/tvSuserName"
app:layout_constraintEnd_toEndOf="parent"
app:riv_corner_radius="8dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.facebook.shimmer.ShimmerFrameLayout>
【问题讨论】:
-
当然,通过膨胀和移除加载布局运行时是更干净的方法。有些人可能觉得这样做很难,但这是使布局层次结构清晰并优化内存的最佳方式。
-
我不确定,但我们可以在这种情况下使用视图切换器。
-
@MiniChip 我不这么认为。因为视图切换器会将两个视图都保留在内存中。
标签: android android-layout visibility layout-inflater android-inflate