Question

我现在在我的新应用中使用Shimmer layout，它非常棒。

我已经开始使用此library来处理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)

Code的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应代表此Root-ViewGroup的{{1}}。

在模拟布局中，您只需创建模拟视图（意思是＆＃34;灰色条纹＆＃34;表示用户期望内容的位置）。我做了一个非常简单的例子，但当然它将适用于更复杂的布局。模拟布局应尽可能接近真实布局（我建议只复制并粘贴实际布局并将每个Mock Layout等更改为TextView，并将背景和大小设置为需要）。

重要将View visibility的{{1}}设置为Root-ViewGroup，这样您就不会看到它它不会占用任何布局空间。

在Kotlin / Java代码中 - 为了简单起见 - 只需设置Content Layout文本，延迟时间为10秒。作为第一步，您必须通过gone激活闪光效果。

然后获取您的内容（来自REST-API，数据库，等等）。成功获取并在TextView中设置所有数据后，您只需将模拟布局的可见性设置为已过去，并将内容布局的可见性设置为可见

Voilah！

（请注意，此代码的质量不是很好 - 为了简单起见：D）

Answer 2

1-将此图书馆添加到gradle

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

2-以layout的名称创建一个recycler_loading并设置您的设计示例

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="88dp"
    android:layoutDirection="rtl"
    android:textDirection="rtl">

    <ImageView
        android:id="@+id/img"
        android:layout_width="100dp"
        android:layout_height="56dp"
        android:layout_centerVertical="true"
        android:src="@drawable/ic_loading"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/img"
        android:layout_centerVertical="true"
        android:layout_marginRight="20dp"
        android:layout_marginLeft="16dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="16dp"
            android:background="@color/colorTextLoading"
            android:layout_marginTop="5dp"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="14dp"
            android:background="@color/colorTextLoading"
            android:layout_marginTop="5dp"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="14dp"
            android:background="@color/colorTextLoading"
            android:layout_marginTop="5dp"/>

    </LinearLayout>

</RelativeLayout>

在layout或Fragment的{{1}}的3中添加此Activity

code

在您的<com.facebook.shimmer.ShimmerFrameLayout android:id="@+id/Loading" android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <include layout="@layout/recycler_loading" /> <include layout="@layout/recycler_loading" /> <include layout="@layout/recycler_loading" /> </LinearLayout> </com.facebook.shimmer.ShimmerFrameLayout>或Fragment中输入4 Activity

code

Android - 从Facebook使用闪光布局的最佳方式

2 个答案: