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

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

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

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="50dp"
        android:orientation="horizontal">
        
    <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rv_like_header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="15dp"
            android:layoutAnimation="@anim/rv_slide_in_anim"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    <ImageView
            android:id="@+id/iv_like"
            android:layout_width="16dp"
            android:layout_height="16dp"
            android:layout_marginTop="15dp"
            android:layout_marginEnd="15dp"
            android:src="@drawable/img_explore_like"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_goneMarginEnd="15dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

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

• rv_slide_in_anim

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/slide_in_left"
    android:animationOrder="normal"
    android:delay="20%" />

• slide_in_left

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="350"
        android:fromXDelta="-100%p"
        android:toXDelta="0" />

    <alpha 
        android:fromAlpha="0.8"
        android:toAlpha="1.0"
        android:duration="350"
        />

</set>

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<Int>) : RecyclerView.Adapter<LikeMemberHeaderAdapter.HeaderHolder>() {
    private var mDatas: ArrayList<Int> = 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布局文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:id="@+id/lin_header_root"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <com.example.myapplication.likeHeader.RoundImageView
        android:id="@+id/iv_member_header"
        android:layout_width="17dp"
        android:layout_height="17dp"
        android:scaleType="centerCrop"
        app:maskDrawable="@drawable/circle_mask"
        tools:src="@drawable/member_default_header" />
</FrameLayout>

5、效果图