使用RecyclerView實(shí)現(xiàn)點(diǎn)贊頭像疊加效果
概要:點(diǎn)贊頭像效果使用的地方很多,實(shí)現(xiàn)的方式也很多,下面通過使用RecyclerView實(shí)現(xiàn)一下
1、創(chuàng)建布局文件 一個(gè)recyclerview,一個(gè)點(diǎn)贊圖片
<?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添加了動(dòng)畫效果,動(dòng)畫文件如下
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 點(diǎn)贊頭像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) // 最后一個(gè)顯示全部 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) } }
核心代碼就是通過設(shè)置item的margin值實(shí)現(xiàn)疊加效果,通過添加數(shù)據(jù),刷新adapter實(shí)現(xiàn),示例代碼中默認(rèn)從索引0添加的,可以根據(jù)需求自行調(diào)整,RoundImageView是一個(gè)自定義的圓形圖片,此處不再贅述
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、效果圖
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android實(shí)現(xiàn)本地上傳圖片并設(shè)置為圓形頭像
- Android使用CircleImageView實(shí)現(xiàn)圓形頭像的方法
- Android根據(jù)電話號(hào)碼獲得聯(lián)系人頭像實(shí)例代碼
- Android Studio實(shí)現(xiàn)帶邊框的圓形頭像
- Android實(shí)現(xiàn)用戶頭像更換操作
- Android實(shí)現(xiàn)從本地圖庫/相機(jī)拍照后裁剪圖片并設(shè)置頭像
- Android一行代碼實(shí)現(xiàn)圓形頭像
- Android頭像上傳功能的實(shí)現(xiàn)代碼(獲取頭像加剪切)
- Android手機(jī)拍照或選取圖庫圖片作為頭像
- Android實(shí)現(xiàn)個(gè)人資料頁面頭像背景模糊顯示包(狀態(tài)欄)
相關(guān)文章
Android項(xiàng)目類似淘寶 電商 搜索功能,監(jiān)聽軟鍵盤搜索事件,延遲自動(dòng)搜索,以及時(shí)間排序的搜索歷史記錄的實(shí)現(xiàn)
本篇文章主要介紹了Android實(shí)現(xiàn)類似淘寶、電商、搜索功能(監(jiān)聽軟鍵盤搜索事件,延遲自動(dòng)搜索,以及時(shí)間排序的搜索歷史記錄),感興趣的小伙伴們可以參考一下。2016-10-10Android ScreenLockReceiver監(jiān)聽鎖屏功能示例
這篇文章主要介紹了Android ScreenLockReceiver監(jiān)聽鎖屏功能,結(jié)合實(shí)例形式分析了Android監(jiān)聽鎖屏及取消監(jiān)聽功能的具體實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-07-07Android中通過view方式獲取當(dāng)前Activity的屏幕截圖實(shí)現(xiàn)方法
這篇文章主要介紹了Android中通過view方式獲取當(dāng)前Activity的屏幕截圖實(shí)現(xiàn)方法,本文方法相對(duì)簡單,容易理解,需要的朋友可以參考下2014-09-09一個(gè)Activity中多個(gè)Fragment的切換
經(jīng)常會(huì)遇到在一個(gè)activity界面上布局多個(gè)fragment,但是如何從一個(gè)fragment跳轉(zhuǎn)到另一個(gè)fragment呢?本文主要對(duì)一個(gè)Activity中多個(gè)Fragment的切換進(jìn)行介紹,下面跟著小編一起來看下吧2017-01-01native.js獲取手機(jī)硬件基本信息實(shí)例代碼android版
本文為大家分享了native.js獲取手機(jī)硬件基本信息實(shí)例代碼android版包括手機(jī)MAC地址,手機(jī)內(nèi)存大小,手機(jī)存儲(chǔ)空間大小,手機(jī)CPU信息等手機(jī)硬件基本信息2018-09-09Android編程實(shí)現(xiàn)播放MP3功能示例
這篇文章主要介紹了Android編程實(shí)現(xiàn)播放MP3功能,結(jié)合實(shí)例形式分析了Android播放MP3功能的界面布局與功能實(shí)現(xiàn)相關(guān)操作技巧,需要的朋友可以參考下2017-02-02Android編程之DatePicker和TimePicke簡單時(shí)間監(jiān)聽用法分析
這篇文章主要介紹了Android編程之DatePicker和TimePicke簡單時(shí)間監(jiān)聽用法,結(jié)合具體實(shí)例形式分析了時(shí)間控件DatePicker和TimePicke布局與具體功能實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-02-02