Android之MaterialDesign使用（二）—— Re
2021-08-17 本文已影响0人
乌托邦式的爱情
RecyclerView是Material Design里面非常重要的一个控件，这也是我想单独把它拿出来的原因，记得刚开始工作的时候，还是使用的ListView，但是自从Google 推出了RecyclerView之后，很多小伙伴就开始抛弃ListView转而投入到RecyclerView的怀抱了，那么，RecyclerView到底好在哪里？相比较ListView它又有哪些亮点呢？
RecyclerView与ListView对比
（1）布局效果对比：Android 默认提供的 RecyclerView 就能支持 线性布局、网格布局、瀑布流布局 三种，而且同时还能够控制横向还是纵向滚动，而ListView仅仅只能支持线性布局。
（2）基础使用：RecyclerView 中ViewHolder的编写规范化了，而且所有的复用工作已经在底层全部实现，并不再需要人为通过代码去实现了。
（3）空数据处理：ListView 提供了 setEmptyView 这个 API 来让我们处理 Adapter 中数据为空的情况，只需轻轻一 set 就能搞定一切。而RecyclerView 并没有提供，需要自己手动去实现。
（4）添加头部和尾部：ListView自动提供了添加头部和底部的API，而RecyclerView 并没有这个支持，需要自己手动去实现。
（5）局部刷新：ListView 并没有提供局部刷新刷新某个 Item 的 API 给我们，只提供了全局刷新notifyDataSetChanged()，但是RecyclerView 不仅支持全局刷新，也支持局部刷新。
（6）动画效果：RecyclerView 在做局部刷新的时候有一个渐变的动画效果，而ListView 需要自己去实现。
（7）监听事件：ListView 为我们准备了几个专门用于监听 Item 的回调接口，如单击、长按、选中某个 Item 等，而RecyclerView 系统并没有提供这样的支持，需要我们自己去手动实现。
（8）嵌套滚动：RecyclerView 配合NestedScrollView可以实现嵌套滚动，但是使用ListView则无法实现。
上面这样看太累了，用表格来整理一下：
| RecyclerView | ListView | |
|---|---|---|
| 布局效果对比 | 支持 线性布局、网格布局、瀑布流布局 三种 | 支持线性布局 |
| 基础使用 | ViewHolder编写规范化 | 需要手动去处理 |
| 空数据处理 | 自己手动去实现 | 提供了 setEmptyView |
| 添加头部和尾部 | 自己手动去实现 | 提供了添加头部和底部的API |
| 局部刷新 | 提供了API | 自己手动去实现 |
| 动画效果 | 局部刷新的时候有一个渐变的动画效果 | 自己手动去实现 |
| 监听事件 | 自己手动去实现 | 准备了几个专门用于监听 Item 的回调接口，如单击、长按、选中某个 Item 等 |
| 嵌套滚动 | RecyclerView 配合NestedScrollView可以实现嵌套滚动 | 无法实现这种效果 |
关于RecyclerView 和ListView的对比就到这里，因为这不是这次的重点，下面我们开始进入正题。
RecyclerView的使用
先来看一下效果
recyclerView.gif
1.编写布局文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".recyclerview.RecyclerViewActivity">
<LinearLayout
android:id="@+id/choose"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="@+id/linear_recycler_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="线性布局" />
<Button
android:id="@+id/grid_recycler_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="网格布局" />
<Button
android:id="@+id/staggered_recycler_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="瀑布流布局" />
<Button
android:id="@+id/multiple_recycler_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="多视图布局" />
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/choose" />
</LinearLayout>
2.编写适配器
/**
* author: zhoufan
* data: 2021/8/17 13:43
* content: RecyclerView的适配器
*/
class RecyclerViewAdapter : RecyclerView.Adapter<RecyclerViewAdapter.MyViewHolder>() {
companion object {
const val SPECIAL = 1
const val NORMAL = 2
}
private var useList: MutableList<User> = arrayListOf()
fun setUserList(list: MutableList<User>) {
if (list.size > 0) {
useList.addAll(list)
}
}
/**
* 处理多布局的情况
*/
override fun getItemViewType(position: Int): Int {
if (useList[position].userName.contains("明")) {
return SPECIAL
}
return NORMAL
}
inner class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
var recyclerImageView: ImageView = itemView.findViewById(R.id.adapter_recycler_view_image)
var recyclerName: TextView = itemView.findViewById(R.id.adapter_recycler_view_name)
var recyclerContent: TextView = itemView.findViewById(R.id.adapter_recycler_view_content)
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
var view: View? = null
if (viewType == SPECIAL) {
view = LayoutInflater.from(parent.context)
.inflate(R.layout.adapter_recycler_view, parent, false)
}else {
view = LayoutInflater.from(parent.context)
.inflate(R.layout.adapter_recycler_view_two, parent, false)
}
return MyViewHolder(view!!)
}
override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
Glide.with(holder.itemView.context).load(useList[position].userImageUrl)
.into(holder.recyclerImageView)
holder.recyclerName.text = useList[position].userName
holder.recyclerContent.text = useList[position].userInfo
}
override fun getItemCount() = useList.size
}
3.通过代码实现所有效果
class RecyclerViewActivity : AppCompatActivity() {
private var useList: MutableList<User> = arrayListOf()
private var adapter: RecyclerViewAdapter? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_recycler_view)
initUserInfo()
initRecyclerView()
initEvent()
}
private fun initEvent() {
// 切换到线性布局
linear_recycler_view.setOnClickListener {
recycler_view.layoutManager = LinearLayoutManager(this)
runLayoutAnimation(recycler_view)
}
// 切换到网格布局
grid_recycler_view.setOnClickListener {
recycler_view.layoutManager = GridLayoutManager(this, 3)
runLayoutAnimation(recycler_view)
}
// 切换到瀑布流布局
staggered_recycler_view.setOnClickListener {
recycler_view.layoutManager = StaggeredGridLayoutManager(
2,
StaggeredGridLayoutManager.VERTICAL
)
runLayoutAnimation(recycler_view)
}
}
private fun initRecyclerView() {
recycler_view.layoutManager = LinearLayoutManager(this)
adapter = RecyclerViewAdapter()
recycler_view.adapter = adapter
adapter!!.setUserList(useList)
}
private fun initUserInfo() {
val userJackie = User(
"成龙",
"中国影视男演员 [1] 、导演、制作人、编剧、歌手 [2] ，国家一级演员。",
"https://bkimg.cdn.bcebos.com/pic/2f738bd4b31c87016b20bd8e287f9e2f0608ffc0?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxNTA=,g_7,xp_5,yp_5/format,f_auto"
)
val userJet = User(
"李连杰",
"华语影视男演员、导演、制作人、武术运动员、商人。",
"https://bkimg.cdn.bcebos.com/pic/a044ad345982b2b78cb4089e3eadcbef76099b44?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxMTY=,g_7,xp_5,yp_5/format,f_auto"
)
val userChow = User(
"周润发",
"华语影视男演员、摄影家，国家一级演员。",
"https://bkimg.cdn.bcebos.com/pic/d31b0ef41bd5ad6e8d802d198bcb39dbb7fd3cc3?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5/format,f_auto"
)
val userLeon = User(
"黎明",
"中国香港男歌手、演员、导演。",
"https://bkimg.cdn.bcebos.com/pic/7dd98d1001e93901b24f585472ec54e736d1960f?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxNTA=,g_7,xp_5,yp_5/format,f_auto"
)
val userAaron = User(
"郭富城",
"华语影视男演员、歌手、舞者。",
"https://bkimg.cdn.bcebos.com/pic/adaf2edda3cc7cd98d10ad8d8d49363fb80e7bec3b04?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UyMjA=,g_7,xp_5,yp_5/format,f_auto"
)
val userRichie = User(
"任贤齐",
"华语流行乐男歌手、影视演员、词曲创作人、导演、赛车手。",
"https://bkimg.cdn.bcebos.com/pic/faedab64034f78f0915e29c973310a55b3191cb6?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5/format,f_auto"
)
val userChen = User(
"陈道明",
"中国影视男演员、国家一级演员",
"https://bkimg.cdn.bcebos.com/pic/9f2f070828381f30520de8c2a6014c086e06f041?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5/format,f_auto"
)
val userAndy = User(
"刘德华",
"华语影视男演员、歌手、制片人、作词人",
"https://bkimg.cdn.bcebos.com/pic/a08b87d6277f9e2f07089a9d537bfe24b899a9015558?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U5Mg==,g_7,xp_5,yp_5/format,f_auto"
)
val userG = User(
"古天乐",
"华语影视男演员、歌手 [1] ，香港演艺人协会会长",
"https://bkimg.cdn.bcebos.com/pic/622762d0f703918fa0ec47229771319759ee3c6d6e8c?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5/format,f_auto"
)
val userNick = User(
"张家辉",
"华语影视男演员、导演",
"https://bkimg.cdn.bcebos.com/pic/d53f8794a4c27d1ed21b5bf67f9bba6eddc451da92f9?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxNTA=,g_7,xp_5,yp_5/format,f_auto"
)
for (i in 0..2) {
useList.add(userJackie)
useList.add(userJet)
useList.add(userChow)
useList.add(userLeon)
useList.add(userAaron)
useList.add(userRichie)
useList.add(userChen)
useList.add(userAndy)
useList.add(userG)
useList.add(userNick)
}
}
/**
* 刷新数据时候的动画效果
*/
private fun runLayoutAnimation(recyclerView: RecyclerView) {
val context: Context = recyclerView.context
val controller: LayoutAnimationController =
AnimationUtils.loadLayoutAnimation(context, R.anim.layout_animation_from_bottom)
recyclerView.layoutAnimation = controller
recyclerView.adapter!!.notifyDataSetChanged()
recyclerView.scheduleLayoutAnimation()
}
}
