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() {
	...
      }
 });
複製代碼