使用RecyclerView实现点赞头像叠加效果

概要：点赞头像效果使用的地方很多，实现的方式也很多，下面通过使用RecyclerView实现一下

1、创建布局文件 一个recyclerview，一个点赞图片

recyclerview添加了动画效果，动画文件如下

rv_slide_in_anim

slide_in_left

2、Activity逻辑代码

val headerUrl=R.drawable.dog_01
  rv_like_header.layoutManager=LinearLayoutManager(this).apply { orientation=LinearLayoutManager.HORIZONTAL }
  val headerList= arrayListOf(headerUrl)
  val mAdapter= LikeMemberHeaderAdapter(this,headerList)
  rv_like_header.adapter=mAdapter
  iv_like.setOnClickListener {
   mAdapter.addData(headerUrl)
  }

3、Adapter代码

/**
 * @date 2020/7/24
 * @author peter
 * @desc 点赞头像adapter
 */
class LikeMemberHeaderAdapter(context: Context, data: ArrayList) : RecyclerView.Adapter() {
 private var mDatas: ArrayList = data
 private val mContext = context

 override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): HeaderHolder {
  return HeaderHolder(LayoutInflater.from(parent.context).inflate(R.layout.item_member_header, parent, false))
 }

 override fun getItemCount(): Int {
  return mDatas.size
 }

 fun addData(headerUrl: Int) {
  // 从左边添加
  mDatas.add(0, headerUrl)
  notifyDataSetChanged()
 }

 override fun onBindViewHolder(holder: HeaderHolder, position: Int) {
  Glide.with(mContext).load(mDatas[position]).into(holder.ivMemberHeader)
  // 最后一个显示全部
  if (position == mDatas.size - 1) {
   setMargins(holder.headerRoot, 0, 0, 0, 0)
  } else {
   setMargins(holder.headerRoot, 0, 0, -12, 0)
  }
 }

 private fun setMargins(v: View, l: Int, t: Int, r: Int, b: Int) {
  if (v.layoutParams is MarginLayoutParams) {
   val p = v.layoutParams as MarginLayoutParams
   p.setMargins(l, t, r, b)
   v.requestLayout()
  }
 }

 class HeaderHolder(view: View) : RecyclerView.ViewHolder(view) {
  val headerRoot: FrameLayout = view.findViewById(R.id.lin_header_root)
  val ivMemberHeader: RoundImageView = view.findViewById(R.id.iv_member_header)
 }

}

核心代码就是通过设置item的margin值实现叠加效果，通过添加数据，刷新adapter实现，示例代码中默认从索引0添加的，可以根据需求自行调整，RoundImageView是一个自定义的圆形图片，此处不再赘述

4、 Adapter item布局文件

5、效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。