思路剖析：
Skeleton（骨架）UI其實是一種在網(wǎng)絡(luò)數(shù)據(jù)未加載時，一種手動設(shè)置的UI布局凛辣，在網(wǎng)絡(luò)請求完成+數(shù)據(jù)加載完成后，替換UI布局。
因此需要兩套布局layout文件框弛，并且如果采用itemBinding方式，也需要兩套itemBinding對應(yīng)捕捂。
Tips:
這個骨架布局在哪里能快速找到呢瑟枫？相對應(yīng)顏色也不好找呀，Skeleton——github庫的example參考我是直接用的這個里的布局指攒，這是個庫慷妙，但我并未直接引用，下載example看過之后了解思路就是替換adapter+item布局允悦，因此思路清晰膝擂，跟上面我說的邏輯一致，只是本文時使用的itemBinding+Kotlin語言，它是采用adapter+Java語言猿挚。但它的skeleton布局可以直接拿來用或者改改適應(yīng)布局大小咐旧，我這里并未對布局大小做修改（懶～），效果為主绩蜻，ui為輔铣墨，功能實現(xiàn)就成！因此看到跟我的數(shù)據(jù)加載完成后布局大小不匹配很正常办绝，勿杠伊约。
國際慣例看看實現(xiàn)效果：
skeleton.gif
關(guān)掉網(wǎng)絡(luò)讓我們看一下加上閃動效果怎么樣：
shimmer.gif
具體實現(xiàn)
未加載時的布局，也就是我們的skeleton布局文件：
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="130dp"
android:layout_marginBottom="8dp"
android:background="@android:color/transparent">
<View
android:layout_width="0dp"
android:layout_height="1px"
android:background="@color/colorLine"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintLeft_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="@+id/img_news"
android:layout_width="90dp"
android:layout_height="0dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
android:background="@color/light_transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="@+id/tv_title"
android:layout_width="0dp"
android:layout_height="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="50dp"
android:background="@color/light_transparent"
android:text="Google正式發(fā)布Android8.0"
app:layout_constraintLeft_toRightOf="@+id/img_news"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/img_news" />
<View
android:id="@+id/tv_content"
android:layout_width="0dp"
android:layout_height="14dp"
android:layout_marginRight="16dp"
android:background="@color/light_transparent"
app:layout_constraintBottom_toBottomOf="@+id/img_news"
app:layout_constraintLeft_toLeftOf="@+id/tv_title"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/img_news" />
<View
android:id="@+id/tv_time"
android:layout_width="0dp"
android:layout_height="12dp"
android:layout_marginRight="50dp"
android:background="@color/light_transparent"
app:layout_constraintBottom_toBottomOf="@+id/img_news"
app:layout_constraintLeft_toLeftOf="@+id/tv_title"
app:layout_constraintRight_toRightOf="parent" />
<View
android:layout_width="0dp"
android:layout_height="1px"
android:background="@color/colorLine"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintLeft_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
網(wǎng)絡(luò)數(shù)據(jù)加載后的dataBinding布局：
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:ignore="MissingDefaultResource">
<data>
<variable
name="item"
type="com.kc.home.response.DataX" />
<variable
name="viewModel"
type="com.kc.home.HomeViewModel" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/home_list_item"
android:layout_width="match_parent"
android:layout_marginHorizontal="8dp"
android:onClick="@{()->viewModel.onClickItem(item)}"
android:layout_marginVertical="2dp"
android:layout_height="wrap_content"
android:background="@drawable/shape_white_radius_4dp">
<androidx.constraintlayout.widget.Guideline
android:id="@+id/left_Guideline"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_begin="10dp" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/right_Guideline"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_end="10dp" />
<TextView
android:id="@+id/tv_share_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="@{item.author}"
tools:text="谷歌開發(fā)者"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="@id/left_Guideline"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv_share_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginRight="5dp"
tools:text="時間"
android:text="@{item.niceShareDate}"
android:textSize="13sp"
app:layout_constraintBaseline_toBaselineOf="@+id/tv_share_user"
app:layout_constraintRight_toRightOf="@id/right_Guideline" />
<TextView
android:id="@+id/tv_home_item_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="@{item.title}"
tools:text="標題標題標題標題標題標題標題標題標題標題標題標題標題標題"
android:textColor="@color/black"
android:textSize="15sp"
app:layout_constraintEnd_toStartOf="@id/right_Guideline"
app:layout_constraintStart_toEndOf="@id/left_Guideline"
app:layout_constraintTop_toBottomOf="@+id/tv_share_user" />
<TextView
android:id="@+id/tv_super_chapterName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
tools:text="公眾號/郭霖"
android:text='@{item.superChapterName+"/"+item.chapterName}'
android:textSize="13sp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintLeft_toLeftOf="@id/left_Guideline"
app:layout_constraintTop_toBottomOf="@+id/tv_home_item_title" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
怎么切換兩種布局呢孕蝉？才用標識符在網(wǎng)絡(luò)完成后賦值屡律，借助標識符狀態(tài)切換兩種布局+itemBinding
<androidx.recyclerview.widget.RecyclerView
itemBinding="@{viewModel.finishLoad?viewModel.itemBinding:viewModel.skeleton}"
items="@{viewModel.finishLoad?viewModel.items:viewModel.skeletonItem}"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white_dd"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:itemCount="3"
tools:listitem="@layout/item_home_article_layout" />
具體的網(wǎng)絡(luò)請求邏輯+標識符賦值操作在ViewModel中完成
class HomeViewModel(application: Application) :BasePageViewModel<DataX>(application) {
var finishLoad = MutableLiveData(false)
val skeleton = ItemBinding.of<String>(BR.item, R.layout.item_home_article_skeleton).bindExtra(BR.viewModel, this)
val skeletonItem = ObservableArrayList<DataX>()
init {
initSkeleton()
refresh()
}
override fun requestData(page: Int) {
NetworkPortal.getService(HomeService::class.java)?.getHomeArticles2(page)?.enqueue(
LiveDataCallback<HomeArticlesResp>(baseLiveData)
.bindLoading()
.bindSmartRefresh()
.bindStateLayout()
.doOnResponseSuccess { _, response ->
handleItemData(page, response.data.datas)
finishLoad.postValue(true)
}
.doOnAnyFail { toast("你的網(wǎng)絡(luò)似乎出了點問題喔～") }
)
}
override fun getItemLayoutId(): Int {
return R.layout.item_home_article_layout
}
fun onClickItem(item:DataX){
ARouter.getInstance().build(RouterActivityPath.WebView.WEBVIEW_ACTIVITY)
.withString("url",item.link)
.navigation()
}
fun initSkeleton(){ //創(chuàng)建空對象
val json = "[{},{},{},{},{},{},{}]"
skeletonItem.addAll(Gson().fromJson<ArrayList<DataX>>(json,object :TypeToken<ArrayList<DataX>>(){}.type))
}
}
最后：借助第三方庫完成閃動效果：
閃動框架布局github地址：https://github.com/team-supercharge/ShimmerLayout
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="130dp"
android:layout_marginBottom="8dp"
android:background="@android:color/transparent">
<io.supercharge.shimmerlayout.ShimmerLayout
android:id="@+id/shimmerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
startShimmerAnimation="@{true}"
app:shimmer_animation_duration="1200">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="0dp"
android:layout_height="1px"
android:background="@color/colorLine"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintLeft_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="@+id/img_news"
android:layout_width="90dp"
android:layout_height="0dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
android:background="@color/light_transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="@+id/tv_title"
android:layout_width="0dp"
android:layout_height="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="50dp"
android:background="@color/light_transparent"
android:text="Google正式發(fā)布Android8.0"
app:layout_constraintLeft_toRightOf="@+id/img_news"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/img_news" />
<View
android:id="@+id/tv_content"
android:layout_width="0dp"
android:layout_height="14dp"
android:layout_marginRight="16dp"
android:background="@color/light_transparent"
app:layout_constraintBottom_toBottomOf="@+id/img_news"
app:layout_constraintLeft_toLeftOf="@+id/tv_title"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/img_news" />
<View
android:id="@+id/tv_time"
android:layout_width="0dp"
android:layout_height="12dp"
android:layout_marginRight="50dp"
android:background="@color/light_transparent"
app:layout_constraintBottom_toBottomOf="@+id/img_news"
app:layout_constraintLeft_toLeftOf="@+id/tv_title"
app:layout_constraintRight_toRightOf="parent" />
<View
android:layout_width="0dp"
android:layout_height="1px"
android:background="@color/colorLine"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintLeft_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</io.supercharge.shimmerlayout.ShimmerLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
需要獲取id指定開啟閃動動畫效果，但由于我們dataBinding布局降淮，因此采用BindingAdapter方式做自定義屬性開啟
/**
* @data on 5/25/21 10:22 AM
* @auther KC
* @describe 給RecyclerView的item布局增加id指定java代碼的方式超埋，骨架閃動效果實現(xiàn)。
*/
object ShimmerBindingAdapter {
@JvmStatic
@BindingAdapter(value = ["startShimmerAnimation"],requireAll = false)
fun startAnimation(shimmerLayout: ShimmerLayout,state:Boolean){
if (state){
shimmerLayout.startShimmerAnimation()
}
}
}
之后給ShimmerLayout布局中：增加屬性:startShimmerAnimation="@{true}"佳鳖，完成霍殴！
圖示
skeleton.jpeg
