Android 提高用户体验之骨架屏

repositories {
    jcenter()
    maven { url "https://jitpack.io" }
}

dependencies {
    implementation 'com.github.sharish:ShimmerRecyclerView:v1.3'
}
复制代码

使用

<com.cooltechworks.views.shimmer.ShimmerRecyclerView xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/shimmer_recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" app:shimmer_demo_child_count="10" app:shimmer_demo_grid_child_count="2" app:shimmer_demo_layout="@layout/layout_demo_grid" app:shimmer_demo_layout_manager_type="grid" app:shimmer_demo_angle="20" />
复制代码

调用对应的显示隐藏方法性能

shimmerRecycler.showShimmerAdapter();

shimmerRecycler.hideShimmerAdapter();
复制代码

Skeleton+布局

github.com/ethanhua/Sk…

这种方法比较自由，除了RecyclerView之外还能用在其余布局上

接入

repositories {
    jcenter()
    maven { url "https://jitpack.io" }
}

dependencies {
    implementation 'com.github.sharish:ShimmerRecyclerView:v1.3'
}
复制代码

使用
RecyclerView:

skeletonScreen = Skeleton.bind(recyclerView)
                              .adapter(adapter)
                              .load(R.layout.item_skeleton_news)
                              .show();
复制代码

其余View:

skeletonScreen = Skeleton.bind(rootView)
                              .load(R.layout.layout_img_skeleton)
                              .show();
复制代码

提供的方法

.shimmer(true)      // whether show shimmer animation.                      default is true
.count(10)          // the recycler view item count.                        default is 10
.color(color)       // the shimmer color.                                   default is #a2878787
.angle(20)          // the shimmer angle.                                   default is 20;
.duration(1000)     // the shimmer animation duration.                      default is 1000;
.frozen(false)      // whether frozen recyclerView during skeleton showing  default is true; 
复制代码

消失时调用

skeletonScreen.hide()
复制代码

遮罩控件

上面的方法都要写一个布局，若是不想写多一个布局的可使用遮罩控件

github.com/elye/loader…

在setText或者给src设值时自动去除遮罩。能够设置默认遮罩的百分比长度还能够设置带一点点的闪烁动画等等。可是只有文本跟图片控件可用，以及不能根据文本长度来设置遮罩，由于setText以后会自动消失，因此在某些比较复杂的布局里若是没有设计师提供尺寸图是作不出效果的。

接入

dependencies {
    implementation 'com.elyeproj.libraries:loaderviewlibrary:1.5.0'
}
复制代码

使用

<com.elyeproj.loaderviewlibrary.LoaderImageView
     android:layout_width="100dp"
     android:layout_height="100dp" />
复制代码

<com.elyeproj.loaderviewlibrary.LoaderTextView
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:width_weight="0.4" 
     app:height_weight="0.8"
     app:use_gradient="true"
      app:corners="16"
       app:custom_color="@android:color/holo_green_dark" />
复制代码

若是须要从新加载

myLoaderTextView.resetLoader();
复制代码

2.github.com/rasoulmiri/…

除了上图的效果外还支持其余效果，而且支持任意布局，由于它的使用方法是在原有布局上包裹一层。这种方式的好处是，能够不用设计师出遮罩图，套一层布局在外面后设置包裹内容便可，只是会比较耗费一点渲染性能。

接入

allprojects {
    repositories {
	    ...
	    maven { url 'https://jitpack.io' }
    }
}
复制代码

dependencies {
      compile 'com.github.rasoulmiri:Skeleton:v1.0.9'
}
复制代码

使用

<io.rmiri.skeleton.SkeletonGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

         <io.rmiri.skeleton.SkeletonView ...>
            <View ... />
        </io.rmiri.skeleton.SkeletonView>

        <io.rmiri.skeleton.SkeletonView ...>
            <View ... />
        </io.rmiri.skeleton.SkeletonView>

</io.rmiri.skeleton.SkeletonGroup>
复制代码

支持动画监听

skeletonGroup.setSkeletonListener(new SkeletonGroup.SkeletonListener() {
      @Override
      public void onStartAnimation() {
	...
      }

      @Override
      public void onFinishAnimation() {
	...
      }
 });
复制代码

建议阅读

骨架屏 (Skeleton Screen) 在 Android 中的应用

最开始坚持的地方，记录学习与生活的点点滴滴