在移动开发中，RecyclerView 是一个非常常用的控件，它可以展示大量的数据。而在展示数据时，我们通常需要通过一些装饰来提高用户体验，比如添加分割线、间距等。这时候，ItemDecoration 就派上用场了。
Material Design 是 Google 推出的一种设计语言，它的设计风格简约、扁平，色彩鲜艳、明亮，非常适合用在移动端应用中。在 RecyclerView 中，我们可以通过自定义 ItemDecoration 来实现 Material Design 风格的分割线、间距等效果。
实现 Material Design 风格的 ItemDecoration
首先，我们需要在项目中引入 Material Design 的库：
implementation 'com.google.android.material:material:1.2.0'
然后，我们可以通过继承 RecyclerView.ItemDecoration 类来自定义 ItemDecoration。在实现 Material Design 风格的分割线时，我们可以使用 DividerItemDecoration 类：
class MyItemDecoration(context: Context) : DividerItemDecoration(context, VERTICAL) {
init {
// 设置分割线的样式和颜色
setDrawable(ContextCompat.getDrawable(context, R.drawable.divider)!!)
}
}在上述代码中，我们继承了 DividerItemDecoration 类，并在构造函数中传入了上下文和方向。然后，我们通过 setDrawable() 方法设置了分割线的样式和颜色。
接下来，我们需要在 RecyclerView 中添加 ItemDecoration：
val recyclerView = findViewById<RecyclerView>(R.id.recycler_view) val layoutManager = LinearLayoutManager(this) recyclerView.layoutManager = layoutManager recyclerView.adapter = MyAdapter() recyclerView.addItemDecoration(MyItemDecoration(this))
在上述代码中，我们先设置了 RecyclerView 的布局管理器和适配器，然后通过 addItemDecoration() 方法添加了自定义的 ItemDecoration。
避免 ItemDecoration 绘制不完整的问题
在 RecyclerView 中，如果我们添加的 ItemDecoration 和 ItemView 的高度一样，那么就会出现 ItemDecoration 绘制不完整的问题，如下图所示：
这是因为 RecyclerView 的 ItemView 是在 ItemDecoration 之上绘制的，如果 ItemView 和 ItemDecoration 的高度一样，那么 ItemDecoration 就会被覆盖掉一部分。
为了避免这个问题，我们可以通过在 ItemDecoration 的 onDraw() 方法中先绘制分割线，再绘制 ItemView，这样就可以保证分割线不被 ItemView 覆盖。具体实现如下：
// www.javascriptcn.com code example
override fun onDraw(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
val childCount = parent.childCount
for (i in 0 until childCount) {
val child = parent.getChildAt(i)
val params = child.layoutParams as RecyclerView.LayoutParams
val top = child.bottom + params.bottomMargin
val bottom = top + divider.intrinsicHeight
divider.setBounds(child.left, top, child.right, bottom)
divider.draw(c)
}
super.onDraw(c, parent, state)
}在上述代码中，我们先遍历 RecyclerView 中的所有 ItemView，然后计算出分割线的位置和大小，最后通过 divider.draw() 方法绘制分割线。注意，我们在绘制分割线之后调用了 super.onDraw() 方法，这样就可以保证 ItemView 能够正常绘制。
示例代码
完整的示例代码如下：
// www.javascriptcn.com code example
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val recyclerView = findViewById<RecyclerView>(R.id.recycler_view)
val layoutManager = LinearLayoutManager(this)
recyclerView.layoutManager = layoutManager
recyclerView.adapter = MyAdapter()
recyclerView.addItemDecoration(MyItemDecoration(this))
}
class MyAdapter : RecyclerView.Adapter<MyViewHolder>() {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
val view = LayoutInflater.from(parent.context).inflate(R.layout.item_view, parent, false)
return MyViewHolder(view)
}
override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
holder.bind(position)
}
override fun getItemCount(): Int {
return 20
}
}
class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
fun bind(position: Int) {
itemView.findViewById<TextView>(R.id.text_view).text = "Item $position"
}
}
class MyItemDecoration(context: Context) : DividerItemDecoration(context, VERTICAL) {
init {
// 设置分割线的样式和颜色
setDrawable(ContextCompat.getDrawable(context, R.drawable.divider)!!)
}
override fun onDraw(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
val childCount = parent.childCount
for (i in 0 until childCount) {
val child = parent.getChildAt(i)
val params = child.layoutParams as RecyclerView.LayoutParams
val top = child.bottom + params.bottomMargin
val bottom = top + divider.intrinsicHeight
divider.setBounds(child.left, top, child.right, bottom)
divider.draw(c)
}
super.onDraw(c, parent, state)
}
}
}在上述示例代码中，我们先定义了一个 MyAdapter 类和一个 MyViewHolder 类，用于展示数据。然后，我们通过 MyItemDecoration 类实现了 Material Design 风格的分割线，并在 RecyclerView 中添加了该 ItemDecoration。最后，我们在 RecyclerView 中展示了 20 条数据，并通过 TextView 显示了每个 ItemView 中的数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d504e4a941bf713495130e