利用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>看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
