• 欢迎光临~

RecyclerView实现吸顶效果

开发技术 开发技术 2022-10-27 次浏览

本文主要讲述得方式是通过自定义RecyclerView.ItemDecoration来实现RecyclerView的吸顶效果

本文使用Kotlin代码

实现的方式:主要是通过重写绘制方法 onDrawOver(canvas: Canvas, parent: RecyclerView, state: RecyclerView.State)

文中吸顶的内容是通过绘制单行Text文字+背景,RecyclerView的Item是一个含有TextView的LinearLayout

涉及文字居中绘制会使用paint.drawText(),baseLine的获取采用的方式:

// 方式一
float baseline = targetRect.top + (targetRect.bottom - targetRect.top)/2f 
- (fontMetrics.bottom - fontMetrics.top)/2 - fontMetrics.top;

// 方式二
float baseline = targetRect.top + (targetRect.bottom - targetRect.top)/2f 
+ (fontMetrics.bottom - fontMetrics.top)/2 - fontMetrics.bottom;

自定义RecyclerView.ItemDecoration:

class ThisItemDecoration : RecyclerView.ItemDecoration() {

    private var mDrawable:Drawable = ColorDrawable(Color.BLACK)

    /**
     * 间隔高度
     * */
    private val dividerHeight = 30.dp2px()
   /**
   * 顶高
   * */
private val headerTopHeight = 66.dp2px() private val paintHeaderText = Paint().apply { isDither = true isAntiAlias = true color = Color.YELLOW textSize = 18.dp2px().toFloat() } private val paintHeader = Paint().apply { isDither = true isAntiAlias = true style = Paint.Style.FILL color = Color.RED }
   // 标记顶的横线
private val paint3 = Paint().apply { isDither = true isAntiAlias = true style = Paint.Style.FILL strokeWidth = 1.dp2px().toFloat() color = Color.BLACK } override fun onDrawOver(canvas: Canvas, parent: RecyclerView, state: RecyclerView.State) { canvas.save() var left = 0 var right = parent.width if (parent.clipToPadding) { left = parent.paddingLeft right = parent.width - parent.paddingRight canvas.clipRect( left, parent.paddingTop, right, parent.height - parent.paddingBottom ) } if (parent.adapter !is ThisRecyclerViewAdapter) { return } val adapter = parent.adapter as ThisRecyclerViewAdapter val position = (parent.layoutManager as LinearLayoutManager).findFirstVisibleItemPosition() val isHeader = adapter.isHeader(position + 1) if(isHeader) { val itemView = parent.findViewHolderForAdapterPosition(position + 1)?.itemView if (null != itemView) { val bottom = min(headerTopHeight * 1.0f, itemView.top - headerTopHeight - parent.paddingTop.toFloat()) val top = bottom - headerTopHeight val targetRect = RectF(left.toFloat(), top + parent.paddingTop, right.toFloat(), bottom + parent.paddingTop) canvas.drawRect(targetRect, paintHeader) val groupType = adapter.getTypeByPositionString(position) val fontMetrics = paintHeaderText.fontMetrics val baseline = targetRect.top + (targetRect.bottom - targetRect.top) / 2f - (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.top canvas.drawText( groupType, left.toFloat() + 5.dp2px(), baseline, paintHeaderText) } return } val top = parent.paddingTop.toFloat() val bottom = top + headerTopHeight val targetRect = RectF(left.toFloat(), top, right.toFloat(), bottom) canvas.drawRect(targetRect, paintHeader) val groupType = adapter.getTypeByPositionString(position) val fontMetrics = paintHeaderText.fontMetrics val baseline = targetRect.top + (targetRect.bottom - targetRect.top) / 2f - (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.top canvas.drawText( groupType, left.toFloat() + 5.dp2px(), baseline, paintHeaderText) canvas.drawLine(0f, top + headerTopHeight / 2f, right.toFloat(), top + headerTopHeight / 2f, paint3) canvas.restore() } override fun onDraw( canvas: Canvas, parent: RecyclerView, state: RecyclerView.State ) { canvas.save() var left = 0 var right = parent.width if (parent.clipToPadding) { left = parent.paddingLeft right = parent.width - parent.paddingRight canvas.clipRect( left, parent.paddingTop, right, parent.height - parent.paddingBottom ) } val childCount = parent.childCount; for (i in 0 until childCount) { val child = parent.getChildAt(i) drawHeaderText(canvas, parent, child, left, right) val lp = child.layoutParams as RecyclerView.LayoutParams val top: Int = child.bottom + lp.bottomMargin val bottom: Int = top + dividerHeight mDrawable.setBounds(left, top, right, bottom); mDrawable.draw(canvas) } canvas.restore() } private fun drawHeaderText( canvas: Canvas, parent: RecyclerView, view: View, left: Int, right: Int ): Boolean { if (parent.adapter !is ThisRecyclerViewAdapter) { return false } val adapter = parent.adapter as ThisRecyclerViewAdapter val position = parent.getChildLayoutPosition(view) if (adapter.isHeader(position)) { val targetRect = RectF(left.toFloat(), (view.top - headerTopHeight).toFloat(), right.toFloat(), view.top.toFloat()) canvas.drawRect(targetRect, paintHeader) val groupType = adapter.getTypeByPositionString(position) val fontMetrics = paintHeaderText.fontMetrics val baseline = targetRect.top + (targetRect.bottom - targetRect.top) / 2f - (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.top canvas.drawText( groupType, left.toFloat() + 5.dp2px(), baseline, paintHeaderText) return true } return false } /** * 设置预留空间 */ override fun getItemOffsets( outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State ) { if (parent.adapter is ThisRecyclerViewAdapter) { val adapter = parent.adapter as ThisRecyclerViewAdapter val position = parent.getChildLayoutPosition(view) if (adapter.isHeader(position)) { outRect.set(0, headerTopHeight, 0, dividerHeight) } else { if(adapter.isLastLine(position)) { outRect.set(0, 0, 0, 0) } else { outRect.set(0, 0, 0, dividerHeight) } } return } outRect.set(0, 0, 0, 0) } }

RecyclerView的Item的Bean:

class Carrier constructor(val type: CarrierType) {

    private var id by Delegates.notNull<Int>()
    var name by Delegates.notNull<String>()
    var detail by Delegates.notNull<String>()
    var segment: MutableList<String> = arrayListOf()

    init {
        when (type) {
            CarrierType.TYPE_TANK -> {
                id = 1
                name = "坦克"
                detail = "攻击性载具,攻城略地必备"
            }
            CarrierType.TYPE_ARMORED_CAR -> {
                id = 2
                name = "装甲车"
                detail = "运输士兵,能极大的保证运输效率和士兵安全"
            }
        }
    }

}

enum class CarrierType {
    // 坦克
    TYPE_TANK,
    // 装甲车
    TYPE_ARMORED_CAR,
    // 导弹车
}

Adapter中重要的方法:

private var list: MutableList<Carrier> = arrayListOf()

fun isHeader(position: Int): Boolean {
    return if (itemCount <= 1) {
        false
    } else {
        if (position == 0 && position + 1 < itemCount) {
            list[position].name == list[position + 1].name
        } else {
            list[position].name != list[position - 1].name
        }
    }
}

fun isLastLine(position: Int): Boolean {
    return position == itemCount - 1
}

fun getTypeByPositionString(position: Int): String {
    return when (list[position].type) {
        CarrierType.TYPE_TANK -> {
            "载具:坦克"
        }
        CarrierType.TYPE_ARMORED_CAR -> {
            "载具:装甲车辆"
        }
        else -> {
            ""
        }
    }
}

MainActivity的实现:

class MainActivity : AppCompatActivity() {

    private lateinit var bd2: LayoutTest2Binding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        test2()
    }

    private fun test2() {
        bd2 = LayoutTest2Binding.inflate(layoutInflater)
        setContentView(bd2.root)
        val list = arrayListOf<Carrier>()
        for (i in 1..5) {
            for(j in 1..20) {
                if (i % 2 == 0) {
                    list.add(Carrier(CarrierType.TYPE_TANK))
                } else {
                    list.add(Carrier(CarrierType.TYPE_ARMORED_CAR)
                    )
                }
            }
        }
        val rv = bd2.rv
        rv.layoutManager = LinearLayoutManager(this)
        rv.addItemDecoration(ThisItemDecoration())
        rv.adapter = ThisRecyclerViewAdapter(list)
    }
}

 

以上,暂时这样子

 

程序员灯塔
转载请注明原文链接:RecyclerView实现吸顶效果
喜欢 (0)