10

我的问题与这个问题非常相似。我想实现使用这种风格的进度指标:

https://github.com/michalsnik/ember-content-placeholders

那就是用像这里一样动画的灰色矩形替换文本和图像等内容。

我在过去看到过很多这样的事情,例如 Facebook。我很确定 YouTube 应用程序曾经有这种风格。

问题分开

显而易见的第一个问题是关于如何在 Android 上实现这一点,特别是如果有一种惯用的、标准的或简单的方法来实现这一点,而第二个问题与此密切相关,因为这是我的

问题

我将如何实现将 a 转换TextView为这样的加载矩形。我可以用这个图像替换我的整个视图结构,但我也不知道从哪里开始动画。

4

2 回答 2

5

看看这个库 - ShimmerLayout

ShimmerLayout 可用于向您的 Android 应用程序添加微光效果(如 Facebook 或 LinkedIn 使用的效果)。

另外,如果您对如何实现动画感到好奇,请查看库

于 2018-03-13T14:04:24.847 回答
2

您需要创建骨架布局并在整个屏幕上对其进行充气。然后你可以使用不同的库来添加微光效果。

可绘制/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>

布局/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

于 2018-07-25T09:03:30.530 回答