思路剖析：
Skeleton（骨架）UI其实是一种在网络数据未加载时，一种手动设置的UI布局，在网络请求完成+数据加载完成后，替换UI布局。
因此需要两套布局layout文件，并且如果采用itemBinding方式，也需要两套itemBinding对应。
Tips:
这个骨架布局在哪里能快速找到呢？相对应颜色也不好找呀，Skeleton——github库的example参考我是直接用的这个里的布局，这是个库，但我并未直接引用，下载example看过之后了解思路就是替换adapter+item布局，因此思路清晰，跟上面我说的逻辑一致，只是本文时使用的itemBinding+Kotlin语言，它是采用adapter+Java语言。但它的skeleton布局可以直接拿来用或者改改适应布局大小，我这里并未对布局大小做修改（懒～），效果为主，ui为辅，功能实现就成！因此看到跟我的数据加载完成后布局大小不匹配很正常，勿杠。
国际惯例看看实现效果：
skeleton.gif
关掉网络让我们看一下加上闪动效果怎么样：
shimmer.gif
具体实现
未加载时的布局，也就是我们的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正式发布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>
网络数据加载后的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="谷歌开发者"
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>
怎么切换两种布局呢？才用标识符在网络完成后赋值，借助标识符状态切换两种布局+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" />
具体的网络请求逻辑+标识符赋值操作在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("你的网络似乎出了点问题喔～") }
)
}
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(){ //创建空对象
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正式发布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代码的方式，骨架闪动效果实现。
*/
object ShimmerBindingAdapter {
@JvmStatic
@BindingAdapter(value = ["startShimmerAnimation"],requireAll = false)
fun startAnimation(shimmerLayout: ShimmerLayout,state:Boolean){
if (state){
shimmerLayout.startShimmerAnimation()
}
}
}
之后给ShimmerLayout布局中：增加属性:startShimmerAnimation="@{true}"，完成！
图示
skeleton.jpeg
网友评论