温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

利用RecyclerView实现一个点赞头像叠加效果

发布时间:2020-11-06 16:42:52 来源:亿速云 阅读:367 作者:Leah 栏目:开发技术

利用RecyclerView实现一个点赞头像叠加效果?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

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

<&#63;xml version="1.0" encoding="utf-8"&#63;>
<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

<&#63;xml version="1.0" encoding="utf-8"&#63;>
<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

<&#63;xml version="1.0" encoding="utf-8"&#63;>
<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布局文件

<&#63;xml version="1.0" encoding="utf-8"&#63;>
<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>

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI