使用RecyclerView實現(xiàn)點贊頭像疊加效果

更新時間：2020年08月28日 17:10:03 作者：VipPeterGee

這篇文章主要為大家詳細介紹了使用RecyclerView實現(xiàn)點贊頭像疊加效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

概要：點贊頭像效果使用的地方很多，實現(xiàn)的方式也很多，下面通過使用RecyclerView實現(xiàn)一下

1、創(chuàng)建布局文件一個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值實現(xiàn)疊加效果，通過添加數(shù)據(jù)，刷新adapter實現(xiàn)，示例代碼中默認從索引0添加的，可以根據(jù)需求自行調(diào)整，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>

5、效果圖