Android -使用Facebook的shimmer布局的最佳方法

Question

我现在在我的新应用程序中使用Shimmer layout，它真的很棒。

我已经开始使用这个图书馆来处理RecyclerView的闪烁效果。

但是，我不知道如何在静态布局中使用这种微光效果，比如一个产品的细节活动。

我需要将我所有的TextView背景设置为灰色，并在成功请求后通过编程将其设置为正常？

我真的不明白。你能帮我解决这个问题吗？

Answer 1

好的，我将向您展示代码，然后解释它：

布局文件(仅为重要部分)：

    <android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginTop="8dp"
    app:contentPadding="16dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!-- MOCK Layout (when you are still fetching data) -->
        <com.facebook.shimmer.ShimmerFrameLayout
            android:layout_width="match_parent"
            android:id="@+id/sflMockContent"
            android:layout_height="wrap_content">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="@id/llRealContent"
                android:orientation="vertical"
                android:visibility="visible">

                <View
                    android:layout_width="50dp"
                    android:layout_height="10dp"
                    android:background="#e9e9e9" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="10dp"
                    android:layout_marginTop="16dp"
                    android:background="#e9e9e9" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="10dp"
                    android:layout_marginTop="8dp"
                    android:background="#e9e9e9" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="10dp"
                    android:layout_marginTop="8dp"
                    android:background="#e9e9e9" />
            </LinearLayout>
        </com.facebook.shimmer.ShimmerFrameLayout>

        <!-- Real Layout where you set the content then -->
        <LinearLayout
            android:id="@+id/llRealContent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:visibility="gone">

            <TextView
                android:id="@+id/tvProductName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/tvProductDescription"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp" />
        </LinearLayout>
    </RelativeLayout>
</android.support.v7.widget.CardView>

Kotlin使用kotlinx进行视图绑定：

    sflMockContent.startShimmerAnimation()

    Handler().postDelayed( {
        tvProductName.setText("StackOverflow Answer")
        tvProductDescription.setText("Look at this awesome product. Produced by a programmer for helping out other programmers!")
        sflMockContent.visibility = View.GONE
        llRealContent.visibility = View.VISIBLE
    }, 10000)

代码的Java版本(没有findViewById()部分)：

sflMockContent.startShimmerAnimation();

new Handler().postDelayed(new Runnable() {
    @Override
    public void run() {
        tvProductName.setText("StackOverflow Answer");
        tvProductDescription.setText("Look at this awesome product. Produced by a programmer for helping out other programmers!");
        sflMockContent.setVisibility(View.GONE);
        llRealContent.setVisibility(View.VISIBLE);
    }
}, 10000);

好的，首先:对于这个用例，您不需要ShimmerRecyclerView库。我只使用了ShimmerLayout (build.gradle)：

    implementation 'com.facebook.shimmer:shimmer:0.1.0@aar'

我的基本想法是重叠 Mock Layout和Content Layout。据我所知，最佳实践是为此使用RelativeLayout而不是FrameLayout。为了重叠，我在android:layout_centerHorizontal="@id/llRealContent"中设置了Mock Layout (我建议您也设置layout_centerVertical )。ShimmerFrameLayout应该代表这个Mock Layout的Root-ViewGroup。

在Mock布局中，您只需创建Mock视图(意思是“灰色条纹”，指示用户在哪里期望内容)。我已经做了一个非常简单的例子，但它当然会在更复杂的布局上工作。模拟布局应尽可能接近真实布局(我建议只复制和粘贴真实布局，并将每个TextView等更改为View，并根据需要设置背景和大小)。

重要的是将Content Layout的visibility设置为gone，这样您就不会看到它，并且不会占用任何布局空间。

为了简单起见，在Kotlin/Java代码I中，只需将TextView文本设置为10秒延迟即可。作为第一步，您必须通过sflMockContent.startShimmerAnimation()激活闪烁效果。

然后获取内容(从REST-API、数据库等)。一旦成功地获取并设置了Content Layout中的所有数据，您只需将Mock布局的可见性设置为Gone，将内容布局的可见性设置为Visible即可。

沃伊拉！

(请注意，该代码的质量并不好-为了简单起见:D)