利用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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。