Android实现RecyclerView边缘渐变效果
1.前言：
是指在RecyclerView中实现淡入淡出效果的边缘效果。通过这种效果，可以使RecyclerView的边缘在滚动时逐渐淡出或淡入，以提升用户体验。
2.Recyclerview属性：
2.1、requiresFadingEdge：属性用来设置拉滚动条时 ，边框渐变的方向。
- none（边框颜色不变）
- horizontal（水平方向颜色变淡）
- vertical（垂直方向颜色变淡）
2.2、fadingEdgeLength：用来设置边框渐变的长度
kotlin
<androidx.recyclerview.widget.RecyclerView
android: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.简单适配器：
kotlin
package com.cloud.recyclervieweffectdemo.adapter
import 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.实体类：
kotlin
package com.cloud.recyclervieweffectdemo.bean
/**
* @author: njb
* @date: 2024/12/10 23:16
* @desc: 描述
*/
data class EffectBean(
var name:String = "",
var avatar:String = ""
)5.主界面布局：
kotlin
<?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.RecyclerView
android: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布局：
kotlin
<?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">
<ImageView
android: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.AppCompatTextView
android: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.测试代码：
竖向渐变
kotlin
package com.cloud.recyclervieweffectdemo
import 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.EffectBean
class MainActivity : AppCompatActivity() {
private var adapter:EffectAdapter ?= null
private var dataList:MutableList<EffectBean> ?= null
private 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.横向渐变：
kotlin
package com.cloud.recyclervieweffectdemo
import 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.EffectBean
class MainActivity : AppCompatActivity() {
private var adapter:EffectAdapter ?= null
private var dataList:MutableList<EffectBean> ?= null
private 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
}
}
k
<?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.RecyclerView
android: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.实现效果：
