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

2023-07-17 21:19:03 88

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

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

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

rv_slide_in_anim

slide_in_left

2、Activity逻辑代码

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

3、Adapter代码

/**
*@date2020/7/24
*@authorpeter
*@desc点赞头像adapter
*/
classLikeMemberHeaderAdapter(context:Context,data:ArrayList):RecyclerView.Adapter(){
privatevarmDatas:ArrayList=data
privatevalmContext=context

overridefunonCreateViewHolder(parent:ViewGroup,viewType:Int):HeaderHolder{
returnHeaderHolder(LayoutInflater.from(parent.context).inflate(R.layout.item_member_header,parent,false))
}

overridefungetItemCount():Int{
returnmDatas.size
}

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

overridefunonBindViewHolder(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)
}
}

privatefunsetMargins(v:View,l:Int,t:Int,r:Int,b:Int){
if(v.layoutParamsisMarginLayoutParams){
valp=v.layoutParamsasMarginLayoutParams
p.setMargins(l,t,r,b)
v.requestLayout()
}
}

classHeaderHolder(view:View):RecyclerView.ViewHolder(view){
valheaderRoot:FrameLayout=view.findViewById(R.id.lin_header_root)
valivMemberHeader:RoundImageView=view.findViewById(R.id.iv_member_header)
}

}

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

4、Adapteritem布局文件

5、效果图

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐