Android实现RecyclerView边缘渐变效果

Android实现RecyclerView边缘渐变效果

1.前言：

是指在RecyclerView中实现淡入淡出效果的边缘效果。通过这种效果，可以使RecyclerView的边缘在滚动时逐渐淡出或淡入，以提升用户体验。

2.Recyclerview属性：

2.1、requiresFadingEdge：属性用来设置拉滚动条时 ，边框渐变的方向。

• none（边框颜色不变）
• horizontal（水平方向颜色变淡）
• vertical（垂直方向颜色变淡）

2.2、fadingEdgeLength：用来设置边框渐变的长度

    <androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/rv_effect"android:layout_width="0dp"android:layout_height="0dp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"android:fadingEdgeLength="40dp"android:fadingEdge="vertical"android:requiresFadingEdge="vertical"tools:listitem="@layout/item_effect"android:padding="15dp"/>

3.简单适配器：

package com.cloud.recyclervieweffectdemo.adapterimport android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import com.cloud.recyclervieweffectdemo.R
import com.cloud.recyclervieweffectdemo.bean.EffectBean/*** @author: njb* @date:   2024/12/10 23:14* @desc:   描述*/
class EffectAdapter(private val dataList: MutableList<EffectBean>) : RecyclerView.Adapter<EffectAdapter.EffectViewHolder>() {override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): EffectViewHolder {val view = LayoutInflater.from(parent.context).inflate(R.layout.item_effect,parent,false)return EffectViewHolder(view)}override fun getItemCount(): Int {return dataList.size}override fun onBindViewHolder(holder: EffectViewHolder, position: Int) {val data = dataList[position]holder.textView.text = data.name}class EffectViewHolder(itemView: View) :RecyclerView.ViewHolder(itemView){val textView:TextView = itemView.findViewById(R.id.tv_name)val ivAvatar:ImageView = itemView.findViewById(R.id.iv_avatar)}
}

4.实体类：

package com.cloud.recyclervieweffectdemo.bean/*** @author: njb* @date:   2024/12/10 23:16* @desc:   描述*/
data class EffectBean(var name:String = "",var avatar:String = ""
)

5.主界面布局：

<?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"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/main"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/rv_effect"android:layout_width="0dp"android:layout_height="0dp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"android:fadingEdgeLength="40dp"android:fadingEdge="vertical"android:requiresFadingEdge="vertical"tools:listitem="@layout/item_effect"android:padding="15dp"/></androidx.constraintlayout.widget.ConstraintLayout>

6.item布局：

<?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="wrap_content"><ImageViewandroid:id="@+id/iv_avatar"android:layout_width="wrap_content"android:layout_height="wrap_content"android:scaleType="fitCenter"android:src="@mipmap/ic_girl"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><androidx.appcompat.widget.AppCompatTextViewandroid:id="@+id/tv_name"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="天地"android:textColor="@color/black"android:textSize="24sp"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/iv_avatar" />
</androidx.constraintlayout.widget.ConstraintLayout>

7.测试代码：

竖向渐变

package com.cloud.recyclervieweffectdemoimport android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.cloud.recyclervieweffectdemo.adapter.EffectAdapter
import com.cloud.recyclervieweffectdemo.bean.EffectBeanclass MainActivity : AppCompatActivity() {private var adapter:EffectAdapter ?= nullprivate var dataList:MutableList<EffectBean> ?= nullprivate val rvEffect:RecyclerView by lazy { findViewById(R.id.rv_effect) }override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)initData()initAdapter()}private fun initData() {val effectBean = EffectBean()dataList = ArrayList()for(i in 1..15){effectBean.name = "小麦"effectBean.avatar = "222"dataList?.add(effectBean)}}private fun initAdapter() {adapter = dataList?.let { EffectAdapter(it) }rvEffect.layoutManager = LinearLayoutManager(this)rvEffect.adapter = adapter}
}

8.横向渐变：

package com.cloud.recyclervieweffectdemoimport android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import com.cloud.recyclervieweffectdemo.adapter.EffectAdapter
import com.cloud.recyclervieweffectdemo.bean.EffectBeanclass MainActivity : AppCompatActivity() {private var adapter:EffectAdapter ?= nullprivate var dataList:MutableList<EffectBean> ?= nullprivate val rvEffect:RecyclerView by lazy { findViewById(R.id.rv_effect) }override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_main)initData()initAdapter()}private fun initData() {val effectBean = EffectBean()dataList = ArrayList()for(i in 1..15){effectBean.name = "小麦"effectBean.avatar = "222"dataList?.add(effectBean)}}private fun initAdapter() {adapter = dataList?.let { EffectAdapter(it) }rvEffect.layoutManager = LinearLayoutManager(this,LinearLayoutManager.HORIZONTAL,false)rvEffect.adapter = adapter}
}

<?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"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/main"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/rv_effect"android:layout_width="0dp"android:layout_height="0dp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"android:fadingEdgeLength="40dp"android:fadingEdge="horizontal"android:requiresFadingEdge="horizontal"tools:listitem="@layout/item_effect"android:padding="15dp"/></androidx.constraintlayout.widget.ConstraintLayout>

9.实现效果：

10.demo地址：

https://gitee.com/jackning_admin/recycler-view-effect-demo