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

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

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">

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" />

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" />

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

rv_slide_in_anim

android:animation="@anim/slide_in_left"

android:animationOrder="normal"

android:delay="20%" />

slide_in_left

android:duration="350"

android:fromXDelta="-100%p"

android:toXDelta="0" />

android:fromAlpha="0.8"

android:toAlpha="1.0"

android:duration="350"

/>

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布局文件

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">

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" />

5、效果图

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