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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/64584.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言——实现找出最高分

问题描述&#xff1a;分别有6名学生的学号、姓名、性别、年龄和考试分数&#xff0c;找出这些学生当中考试成绩最高的学生姓名。 //找出最高分#include<stdio.h>struct student {char stu_num[10]; //学号 char stu_name[10]; //姓名 char sex; //性别 int age; …

Kafka Streams 在监控场景的应用与实践

作者&#xff1a;来自 vivo 互联网服务器团队- Pang Haiyun 介绍 Kafka Streams 的原理架构&#xff0c;常见配置以及在监控场景的应用。 一、背景 在当今大数据时代&#xff0c;实时数据处理变得越来越重要&#xff0c;而监控数据的实时性和可靠性是监控能力建设最重要的一环…

作业Day4: 链表函数封装 ; 思维导图

目录 作业&#xff1a;实现链表剩下的操作&#xff1a; 任意位置删除 按位置修改 按值查找返回地址 反转 销毁 运行结果 思维导图 作业&#xff1a;实现链表剩下的操作&#xff1a; 1>任意位置删除 2>按位置修改 3>按值查找返回地址 4>反转 5>销毁 任意…

省略内容在句子中间

一、使用二分查找法 每次查找时&#xff0c;将查找范围分成两半&#xff0c;并判断目标值位于哪一半&#xff0c;从而逐步缩小查找范围。 循环查找 计算中间位置 mid Math.floor((low high) / 2)。比较目标值 target 和中间位置的元素 arr[mid]&#xff1a; 如果 target ar…

IDEA中解决Edit Configurations中没有tomcat Server选项的问题

今天使用IDEA2024专业版的时候,发现Edit Configurations里面没有tomcat Server,最终找到解决方案。 一、解决办法 1、打开Settings 2、搜索tomcat插件 搜索tomcat插件之后,找到tomcat 发现tomcat插件处于未勾选状态,然后我们将其勾选保存即可。 二、结果展示 最后,再次编…

UE5中实现Billboard公告板渲染

公告板&#xff08;Billboard&#xff09;通常指永远面向摄像机的面片&#xff0c;游戏中许多技术都基于公告板&#xff0c;例如提示拾取图标、敌人血槽信息等&#xff0c;本文将使用UE5和材质节点制作一个公告板。 Gif效果&#xff1a; 网格效果&#xff1a; 1.思路 通过…

LabVIEW在电液比例控制与伺服控制中的应用

LabVIEW作为一种图形化编程环境&#xff0c;广泛应用于各类控制系统中&#xff0c;包括电液比例控制和伺服控制领域。在这些高精度、高动态要求的控制系统中&#xff0c;LabVIEW的优势尤为突出。以下从多个角度探讨其应用与优势&#xff1a; ​ 1. 灵活的控制架构 LabVIEW为电…

《深入浅出Apache Spark》系列⑤:Spark SQL的表达式优化

导读&#xff1a;随着数据量的快速增长&#xff0c;传统的数据处理方法难以满足对计算速度、资源利用率以及查询响应时间的要求。为了应对这些挑战&#xff0c;Spark SQL 引入了多种优化技术&#xff0c;以提高查询效率&#xff0c;降低计算开销。本文从表达式层面探讨了 Spark…

unity webgl部署到iis报错

Unable to parse Build/WebGLOut.framework.js.unityweb! The file is corrupt, or compression was misconfigured? (check Content-Encoding HTTP Response Header on web server) iis报错的 .unityweb application/octet-stream iis中添加 MIME类型 .data applicatio…

CXF WebService SpringBoot 添加拦截器,处理响应报文格式

描述 XFIRE升级CXF框架&#xff0c;但是对接的系统不做调整&#xff0c;这时候就要保证参数报文和响应报文和以前是一致的。但是不同的框架有不同的规则&#xff0c;想要将报文调整的一致&#xff0c;就需要用到拦截器拦截报文&#xff0c;自定义解析处理。 CXF框架本身就是支…

基于Spring Boot的雅苑小区管理系统

一、系统背景与意义 随着信息化技术的快速发展&#xff0c;传统的小区物业管理方式已经难以满足现代居民对于高效、便捷服务的需求。因此&#xff0c;开发一款基于Spring Boot的小区管理系统显得尤为重要。该系统旨在通过信息化手段&#xff0c;实现小区物业管理的智能化、自动…

Docke_常用命令详解

这篇文章分享一下笔者常用的Docker命令供各位读者参考。 为什么要用Docker? 简单来说&#xff1a;Docker通过提供轻量级、隔离且可移植的容器化环境&#xff0c;使得应用在不同平台上保持一致性、易于部署和管理&#xff0c;具体如下 环境一致性&#xff1a; Docker容器使得…

Ubuntu 20.04下Kinect2驱动环境配置与测试【稳定无坑版】

一、引言 微软Kinect2传感器作为一个包含深度传感器、RGB摄像头以及红外摄像头的多模态采集设备&#xff0c;在计算机视觉、机器人感知、人体姿态识别、3D建模等领域有着广泛应用。相比第一代Kinect&#xff0c;Kinect2拥有更好的深度分辨率和更高的数据质量。本文将详细介绍如…

Flask入门:打造简易投票系统

目录 准备工作 创建项目结构 编写HTML模板 编写Flask应用 代码解读 进一步优化 结语 Flask,这个轻量级的Python Web框架,因其简洁和易用性,成为很多开发者入门Web开发的首选。今天,我们就用Flask来做一个简单的投票系统,让你快速上手Web开发,同时理解Flask的核心概…

Cadence学习笔记 9 器件封装匹配

基于Cadence 17.4&#xff0c;四层板4路HDMI电路 更多Cadence学习笔记&#xff1a;Cadence学习笔记 1 原理图库绘制Cadence学习笔记 2 PCB封装绘制Cadence学习笔记 3 MCU主控原理图绘制Cadence学习笔记 4 单片机原理图绘制Cadence学习笔记 5 四路HDMI原理图绘制Cadence学习笔记…

2011年IMO几何预选题第5题

△ A B C \triangle ABC △ABC 内心为 I I I, 外接圆在 B B B, C C C 两点处的切线交于 P P P, D D D, E E E 分别为 B I BI BI, C I CI CI 与外接圆的交点, D E DE DE 分别交 A B AB AB, A C AC AC 于点 M M M, N N N, 过 M M M 作 B I BI BI 平行线, 过 N N …

Nginx常用配置详解(1)

Nginx常用配置详解 一、全局块&#xff08;main&#xff09;配置 在Nginx的配置文件中&#xff0c;最外层的部分是全局块。这部分配置通常会影响Nginx服务器整体的运行参数。 worker_processes 作用&#xff1a;这个配置指令用于指定Nginx工作进程的数量。工作进程是Nginx处理…

单幅图像合成 360° 3D 场景的新方法:PanoDreamer,可同时生成全景图像和相应的深度信息。

论文介绍了一种从单幅图像合成 360 3D 场景的新方法。该方法以连贯的方式生成全景图及其相应的深度&#xff0c;解决了现有最先进方法&#xff08;如 LucidDreamer 和 WonderJourney 的局限性。这些方法按照生成轨迹依次添加细节&#xff0c;通常在循环回输入图像时导致可见的接…

Linux —— 管理进程

一、查看进程 运行态&#xff08;Running&#xff09; 定义&#xff1a;处于运行态的进程正在 CPU 上执行指令。在单 CPU 系统中&#xff0c;同一时刻只有一个进程处于运行态&#xff1b;在多 CPU 或多核系统中&#xff0c;可能有多个进程同时处于运行态。示例&#xff1a; 当…

前端(组件传参案例)

父组件(商品详情页) 子组件上边放大图 底下缩小轮播图 需求分析&#xff1a;父组件获取图片数据&#xff0c;传给底下子组件进行进行轮播&#xff0c;实现父组件给子组件传参。然后底下子组件轮播后&#xff0c;把当前图片下标给父组件&#xff0c;实现子组件给父组件传参。父组…