骨架视图设计,直到视图加载完毕



如何实现下面提到的查看加载视图的URL类型,类似于许多使用它的应用程序,如TvShowTime。

这称为微光效果。Facebook开源了一个库,提供类似Facebook的微光效果。 https://github.com/facebook/shimmer-android 此外,还有另一个库 https://github.com/team-supercharge/ShimmerLayout

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

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

查看另一个库 https://github.com/ethanhua/Skeleton 它也使用微光效果。

最新更新