封装了一个iOS滚动厨窗效果

效果图

请添加图片描述

背景

我们要实现如图的厨窗效果,不能通过在tableView底部添加一个背景图片的方式,因为这需要修改整个tableView的背景色为透明,影响到的范围太大,只能将这个效果局限在这个cell 中,然后通过监听tableView的滚动的方式来实现

思路

以顶部为基准,在cell距离顶部为0 的时候,
展示图片的最顶部部分,在cell距离顶部的距离大于图片高度- cell高度的时候
展示图片的最底部的部分, 在滑动的过程中改变图片的frame,达到厨窗镂空展示的视觉效果

简单来说就是,当cell 从屏幕顶部到屏幕底部移动的过程中, image 同步的 相对于cell向上偏移,直到
偏移到图片的底部位置 (因为再偏移的话,就不能撑满整个cell的高度了)

注意:我们通常指考虑图片小于整个tableView展示高度的情况, 就是说我们cell展示到tabelView底部的时候(完全展示),已经展示到图片底部了,如果有大于 tableView展示高度的情况,因为我们有限展示图片顶部的,
所以,仍然是和前面同样的逻辑.由于图片高度大于tableView展示高度,则我们cell刚好展示在底部的时候,
还没有滚动到图片的底部,我们仍让可以让图片按照原来的逻辑继续修改偏移量,直到图片完全展示在cell的底部。
这种情况也是没有任何问题的。

思路:为了达到这个效果,我们不能讲tableView的背景色修改为透明背景,因为这会影响到整个列表。

这个时候,就想到,在cell中添加一个高度和图片相同的imageView, cell的clipToBounds 设置为YES,

然后随着tableView 的滚动,修改imageView的frame, 达到厨窗镂空的效果。

我们通过仔细观看这个效果可以得知,图片的frame 是和 tableView的偏移量有关系的, 更具体的说,是和cell 在屏幕中的
距离有关系的,当cell 在屏幕顶部的时候,展示的是图片的顶部,也就是这个时候图片的的frame.origin.y = 0, 然后就是在cell在屏幕中移动的过程,图片和cell的移动是同步的, cell 到屏幕的距离变大,image的frame.origin.y 就变小(因为要向上移动), 直到图片移动到cell的底部。

通过这个过程,我们得知有两个临界值, 一个就是 cell在顶部的时候,一个就是cell距离顶部的距离和高度产(图片的高度 - cell高度)相等的时候,中间的过程,origin.y = cell距离顶部的距离

这样的话就有了下面的代码逻辑

//
//  LBShowCaseCell.m
//  LBShowCase
//
//  Created by mac on 2024/6/29.
//#import "LBShowCaseCell.h" 
#define kScreenWidth \
([[UIScreen mainScreen] respondsToSelector:@selector(nativeBounds)] ? [UIScreen mainScreen].nativeBounds.size.width/[UIScreen mainScreen].nativeScale : [UIScreen mainScreen].bounds.size.width)
#define kScreenHeight \
([[UIScreen mainScreen] respondsToSelector:@selector(nativeBounds)] ? [UIScreen mainScreen].nativeBounds.size.height/[UIScreen mainScreen].nativeScale : [UIScreen mainScreen].bounds.size.height)
#define kScreenSize \
([[UIScreen mainScreen] respondsToSelector:@selector(nativeBounds)] ? CGSizeMake([UIScreen mainScreen].nativeBounds.size.width/[UIScreen mainScreen].nativeScale,[UIScreen mainScreen].nativeBounds.size.height/[UIScreen mainScreen].nativeScale) : [UIScreen mainScreen].bounds.size)@interface LBShowCaseCell ()@property (nonatomic, strong) UIImageView *imgView;@end@implementation LBShowCaseCell- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {self.contentView.clipsToBounds = YES;[self.contentView addSubview:self.imgView];}return self;
}- (void)cellOnTableView:(UITableView *)tableView didScrollView:(UIView *)view
{CGFloat topSpace = tableView.frame.origin.y;CGRect  rect = [self convertRect:self.contentView.frame toView:view];//旧的图片FrameCGRect imageRect = self.imgView.frame;//移动if (rect.origin.y > topSpace && rect.origin.y<imageRect.size.height-self.contentView.frame.size.height + topSpace) {imageRect.origin.y = - CGRectGetMinY(rect) + topSpace;}else if (rect.origin.y>imageRect.size.height-self.contentView.frame.size.height + topSpace){imageRect.origin.y = -(imageRect.size.height - self.contentView.frame.size.height);}else if(rect.origin.y< topSpace){imageRect.origin.y = 0;}//新的图片Frameself.imgView.frame = imageRect;}- (void)awakeFromNib {[super awakeFromNib];// Initialization code
}- (void)setSelected:(BOOL)selected animated:(BOOL)animated {[super setSelected:selected animated:animated];// Configure the view for the selected state
}- (UIImageView *)imgView
{if (!_imgView) {_imgView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0,kScreenWidth , 0)];UIImage *image = [UIImage imageNamed:@"lgx"];CGFloat height = kScreenWidth * image.size.height / image.size.width;_imgView.image = image;_imgView.frame = CGRectMake(0, 0, kScreenWidth, height);}return _imgView;
}@end

链接: link

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

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

相关文章

追觅科技25届校招校招24年社招科技北森题库商业推理综合测评答题攻略、通关技巧

一、追觅科技这家公司怎么样&#xff1f; 追觅科技是一家在智能清洁家电领域表现出色的企业。 二、追觅科技待遇怎么样 追觅科技的待遇在业内具有竞争力&#xff0c;具体信息如下&#xff1a; 1. **薪酬结构**&#xff1a;根据对外经济贸易大学招生就业处发布的2023届校园招…

虹科技术丨跨越距离障碍:PCAN系列网关在远程CAN网络通信的应用潜力

来源&#xff1a;虹科技术丨跨越距离障碍&#xff1a;PCAN系列网关在远程CAN网络通信的应用潜力 原文链接&#xff1a;虹科技术 | 跨越距离障碍&#xff1a;PCAN系列网关在远程CAN网络通信的应用潜力 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; #PCAN #网关 #CA…

Flask之电子邮件

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 目录 一、使用Flask-Mail发送电子邮件 1.1、配置Flask-Mail 1.2、构建邮件数据 1.3、发送邮件 二、使用事务邮件服务SendGrid 2.1、注册SendGr…

最新源支付系统源码 V7版全开源 免授权 附搭建教程

最新源支付系统源码_V7版全开源_免授权_附详细搭建教程_站长亲测 YPay是专为个人站长打造的聚合免签系统&#xff0c;拥有卓越的性能和丰富的功能。它采用全新轻量化的界面UI&#xff0c;让您能更方便快捷地解决知识付费和运营赞助的难题。同时&#xff0c;它基于高性能的thin…

TypeScript学习笔记(全)

文章目录 TypeScript入门2.编译并运行TS代码2.1.简化运行ts步骤 3.TS中的常用类型3.1.TS中的类型注解3.2.TS中的原始类型3.3.TS中的数组类型3.4.TS中的联合类型3.5.类型别名3.6.函数类型3.6.1.单独执行参数、返回值类型3.6.2.同时指定参数&#xff0c;返回值类型3.6.3.函数的vo…

广东省钟表行业协会第十二届会员大会暨2024年钟表行业发展交流会

6月25日广东省钟表行业协会第十二届会员大会暨2024年钟表行业发展交流会在广州万富希尔顿酒店隆重召开。大会选举沙胜昔为广东省钟表行业协会第十二届理事会会长。 领导发言 新任会长 沙胜昔 首席荣誉会长 吴伟阳 新老会长交接仪式 本次大会&#xff0c;全国钟表大伽齐参与…

前端Web开发HTML5+CSS3+移动web视频教程 Day3 CSS 第1天

P29 - P43 从此开始进入 CSS 的学习。前面都是 HTML 的学习。 CSS 的作用&#xff1a;美化。 HTML 只是规定了网页内容有哪些&#xff0c;在网页中显示的位置默认是从上到下显示&#xff0c;还带有默认效果&#xff0c;比如超链接有颜色有下划线&#xff0c;无序列表有小圆点…

CSS Flex弹性布局

一、传统布局与flex布局 1、传统布局 2、flex布局 二、flex布局原理 1、布局原理 2、flex布局体验 三、flex布局父项常见属性 1、常见的父项属性 2、flex-direction设置主轴的方向 3、justify-content 设置主轴上的子元素排列方式 4、flex-wrap 设置子元素是否换行 …

二叉树从根节点出发的所有路径

二叉树从根节点出发的所有路径 看上图中 二叉树结构 从根节点出发的所有路径 如下 6->4->2->1 6->4->2->3 6->4->5 6->8->7 6->8->9 逻辑思路&#xff1a; 按照先序遍历 加 回溯法 实现 代码如下 // 调用此方法&#xff0c;将根节点传递…

上位机图像处理和嵌入式模块部署(mcu 项目1:上位机编写)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面&#xff0c;我们说过要做一个报警器。如果只是简单做一个报警器呢&#xff0c;这个基本上没有什么难度。这里&#xff0c;我们就适当提高一下…

Navicat上新啦

前言 Navicat&#xff0c;在数据库界&#xff0c;几乎是一个神奇的存在&#xff0c;似乎统治了数据库开发工具的“一片天”。且看下图&#xff1a; 红的蓝的绿的橙的…&#xff0c;可以说&#xff0c;留给它的color不多了。 那么商业BI到服务监控、从云托管到云协作&#xff…

短剧App开发的全攻略

短剧App开发的全攻略可以概括为以下几个关键步骤&#xff1a; 1、市场调研与需求分析 进行市场调研&#xff0c;研究目标用户群体&#xff0c;了解他们的需求和偏好。 观察竞争对手的App&#xff0c;分析他们的优点和缺点&#xff0c;以此为基础来制定自己的开发计划。 确定App…

Zookeeper节点ACL权限设置—digest模式

ACL全称为Access Control List&#xff08;访问控制列表&#xff09;&#xff0c;用于控制资源的访问权限。ZooKeeper使用ACL来控制对其znode&#xff08;ZooKeeper数据树的数据节点&#xff09;的访问。 zk利用ACL策略控制节点的访问权限: CREATE c 可以创建子节点 DELETE …

3D打印随形水路在注塑生产中的显著优势

3D打印技术在模具制造中已崭露头角&#xff0c;特别是在注塑生产中&#xff0c;3D打印随形水路的应用正变得日益普遍。 首先&#xff0c;该技术能精准优化模具温度。3D打印随形水路随形冷却的设计让模具温度更加均匀&#xff0c;水路更贴近产品&#xff0c;有效提升产品品质和缩…

k8s如何使用 HPA 实现自动扩展

使用Horizontal Pod Autoscaler (HPA) 实验目标&#xff1a; 学习如何使用 HPA 实现自动扩展。 实验步骤&#xff1a; 创建一个 Deployment&#xff0c;并设置 CPU 或内存的资源请求。创建一个 HPA&#xff0c;设置扩展策略。生成负载&#xff0c;观察 HPA 如何自动扩展 Pod…

redis实战-缓存穿透问题及解决方案

定义理解 缓存穿透&#xff1a;缓存穿透是指客户端请求的数据在缓存中和数据库中都不存在&#xff0c;这样缓存永远都不会生效&#xff08;只有数据库查到了&#xff0c;才会让redis缓存&#xff0c;但现在的问题是查不到&#xff09;&#xff0c;会频繁的去访问数据库。 解决…

系统运维面试总结(系统权限)

系统运维面试总结&#xff08;系统权限&#xff09; 一、权限优化简述Linux权限划分原则二、备份策略三、Raid四、资源查看五、Linux启动流程 一、权限优化简述Linux权限划分原则 ckhunter也是一款常用的Linux杀毒软件 不可修改但可删除 二、备份策略 供参考较为全面的备份方案…

【Redis】SpringBoot连接Redis

1. 创建项目并配置文件 勾选NoSQL中的 Spring Data Redis。当然,把 Web 中的 SpringWeb 也勾选一下.方便写接口进行后续测试。 在 application.yml 中配置 2. 不同数据类型使用Demo 在SpringBoot中&#xff0c;为我们提供了StringRedisTemplate类&#xff0c;供我们处理一些文…

期末重现题型--错题集

看书里的定义&#xff1a;链表是一种常见而重要的动态存储分布的数据结构。它由若干个同一结构类型的“结点”依次串联而成的。

keil软件的一些使用技巧

1.MDK 的 TAB 键支持块操作 也就是可以让一片代码整体右移固定的几个位&#xff0c;也可以通过 SHIFTTAB 键整体左移固定的几个位。 2.快速注释与快速消注释 就是先选中你要注释的代码区&#xff0c;然后右键&#xff0c;选择Advanced→Comment Selection 就可以了。 3.快速打…