在Android中实现内容占位符作为进度指示器

Question

我的问题与这个问题非常相似。我想实现使用这种样式的进度指示器:

就是用灰色矩形替换文本和图像等内容，然后做成像这里一样的动画效果。

我过去经常见到这种效果，例如 Facebook。我很确定 YouTube 应用程序也曾使用过这种样式。

问题分为两个部分

显而易见的第一个问题是如何在 Android 上实现这个功能，特别是是否有惯用的、标准的或简单的方法来实现这个功能。第二个问题与此密切相关，因为这里是我的

问题

我该如何将TextView转换为这样的加载矩形。我可以想象用这个来替换整个视图结构，但我也不知道从哪里开始动画。

- creativecreatorormaybenot

Answer 1

请看这个库 - ShimmerLayout

ShimmerLayout 可以用于将闪烁效果（类似于 Facebook 或 LinkedIn 上使用的效果）添加到您的 Android 应用程序中。

此外，如果您想了解如何实现动画，请查看源代码。

- Oleksii Denysenko

---

这非常好。这就是我在寻找的。我希望我们也能收集其他结果，但这看起来很有前途。提到原始项目：https://github.com/facebook/shimmer-android - creativecreatorormaybenot

这个东西似乎并没有真正帮助，因为它仅仅添加了闪烁效果，而没有灰色矩形。 - creativecreatorormaybenot

@creativecreatorormaybenot，你有没有想到一种简单的方法来添加这些矩形？ - Ciro Pedrini

Answer 2

你需要创建骨架布局并将其填充整个屏幕。然后，你可以使用不同的库来添加闪烁效果。

drawable/skeleton.xml:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
  <solid android:color="@color/skeleton"/>
<corners android:radius="4dp"/>
</shape>

layout/skeleton_row_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
  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="@dimen/row_layout_height">

  <View
    android:id="@+id/icon"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:layout_margin="15dp"
    android:layout_gravity="center_vertical"
    android:background="@drawable/skeleton"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

  <View
    android:id="@+id/topText"
    android:layout_width="200dp"
    app:layout_constraintTop_toTopOf="@id/icon"
    app:layout_constraintStart_toEndOf="@id/icon"
    android:layout_height="15dp"
    android:layout_marginLeft="16dp"
    android:background="@drawable/skeleton"/>

  <View
    android:id="@+id/bottomText"
    android:layout_width="250dp"
    android:layout_height="15dp"
    app:layout_constraintTop_toBottomOf="@id/topText"
    android:layout_marginTop="10dp"
    app:layout_constraintStart_toEndOf="@id/icon"
    android:layout_marginLeft="16dp"
    android:background="@drawable/skeleton"/>

  <View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@drawable/skeleton"
    app:layout_constraintTop_toBottomOf="@id/icon"
    android:layout_marginTop="10dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"/>

</android.support.constraint.ConstraintLayout>

请查看我写的这篇教程，了解如何使用它：https://medium.com/@sha17187/upgrade-progress-loading-with-a-skeleton-and-shimmer-effect-in-android-863ea4ff5b0b

这篇教程介绍了如何在Android中使用骨架和闪烁效果来升级进度加载。

- Sharone Lev