封装了一个仿照抖音效果的iOS评论弹窗

需求背景

开发一个类似抖音评论弹窗交互效果的弹窗,支持滑动消失,
滑动查看评论
效果如下图
请添加图片描述

思路

创建一个视图,该视图上面放置一个tableView, 该视图上添加一个滑动手势,同时设置代理,实现代理方法

  • (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
    支持同时响应手势,就是为了我们tableView滚动到顶部的时候,继续滚动父亲视图,达到连续滑动的效果,如果不是设置同时响应的话,我们滚动到tableView顶部,继续向下滑动的话,整个弹窗是不会向下滑动的,同时,滚动到顶部的时候,要设置tableView.pangesture.enabled = NO,否则反复来回滑动的时候,会造成两个视图同时滚动的效果

代码

//
//  LBCommentPopView.m
//  TEXT
//
//  Created by mac on 2024/7/7.
//  Copyright © 2024 刘博. All rights reserved.
//#import "LBCommentPopView.h"
#import "LBFunctionTestHeader.h"@interface LBCommentPopView () <UIGestureRecognizerDelegate>@property (nonatomic, strong) UITapGestureRecognizer *tapGesture;
@property (nonatomic, strong) UIPanGestureRecognizer *panGesture;@property (nonatomic, weak) UIScrollView *scrollView;
@property (nonatomic, assign) BOOL isDragScrollView;
@property (nonatomic, assign) CGFloat lastTransitionY;@end@implementation LBCommentPopView- (instancetype)initWithFrame:(CGRect)frame {if (self = [super initWithFrame:frame]) {[self createRecognizer];}return self;
}- (void)createRecognizer {[self addGestureRecognizer:self.tapGesture];[self addGestureRecognizer:self.panGesture];
}- (void)show:(void (^)(void))completion {self.hidden = NO;[UIView animateWithDuration:0.25f animations:^{CGRect frame = self.containerView.frame;frame.origin.y = self.frame.size.height - frame.size.height;self.containerView.frame = frame;} completion:^(BOOL finished) {!completion ? : completion();}];
}- (void)dismiss {[UIView animateWithDuration:0.25f animations:^{CGRect frame = self.containerView.frame;frame.origin.y = ScreenHeight;self.containerView.frame = frame;}completion:^(BOOL finished) {self.hidden = YES;}];
}#pragma mark - UIGestureRecognizerDelegate
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch {if (gestureRecognizer == self.panGesture) {UIView *touchView = touch.view;while (touchView != nil) {if ([touchView isKindOfClass:[UIScrollView class]]) {self.scrollView = (UIScrollView *)touchView;self.isDragScrollView = YES;break;}else if (touchView == self.containerView) {self.isDragScrollView = NO;break;}touchView = (UIView *)[touchView nextResponder];}}return YES;
}- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer {if (gestureRecognizer == self.tapGesture) {CGPoint point = [gestureRecognizer locationInView:self.containerView];if ([self.containerView.layer containsPoint:point] && gestureRecognizer.view == self) {return NO;}}else if (gestureRecognizer == self.panGesture) {return YES;}return YES;
}// 是否与其他手势共存
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {if (gestureRecognizer == self.panGesture) {if ([otherGestureRecognizer isKindOfClass:NSClassFromString(@"UIScrollViewPanGestureRecognizer")] || [otherGestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]]) {if ([otherGestureRecognizer.view isKindOfClass:[UIScrollView class]]) {return YES;}}}return NO;
}#pragma mark - HandleGesture
- (void)handleTapGesture:(UITapGestureRecognizer *)tapGesture {CGPoint point = [tapGesture locationInView:self.containerView];if (![self.containerView.layer containsPoint:point] && tapGesture.view == self) {[self dismiss];}
}- (void)handlePanGesture:(UIPanGestureRecognizer *)panGesture {CGPoint translation = [panGesture translationInView:self.containerView];if (self.isDragScrollView) {// 当UIScrollView在最顶部时,处理视图的滑动if (self.scrollView.contentOffset.y <= 0) {if (translation.y > 0) { // 向下拖拽self.scrollView.contentOffset = CGPointZero;self.scrollView.panGestureRecognizer.enabled = NO;self.isDragScrollView = NO;CGRect contentFrame = self.containerView.frame;contentFrame.origin.y += translation.y;self.containerView.frame = contentFrame;}}}else {CGFloat contentM = (self.frame.size.height - self.containerView.frame.size.height);if (translation.y > 0) { // 向下拖拽CGRect contentFrame = self.containerView.frame;contentFrame.origin.y += translation.y;self.containerView.frame = contentFrame;}else if (translation.y < 0 && self.containerView.frame.origin.y > contentM) { // 向上拖拽CGRect contentFrame = self.containerView.frame;contentFrame.origin.y = MAX((self.containerView.frame.origin.y + translation.y), contentM);self.containerView.frame = contentFrame;}}[panGesture setTranslation:CGPointZero inView:self.containerView];if (panGesture.state == UIGestureRecognizerStateEnded) {CGPoint velocity = [panGesture velocityInView:self.containerView];self.scrollView.panGestureRecognizer.enabled = YES;// 结束时的速度>0 滑动距离> 5 且UIScrollView滑动到最顶部NSLog(@"%f", self.lastTransitionY);if (velocity.y > 0 && self.lastTransitionY > 5 && !self.isDragScrollView) {[self dismiss];}else {[self show:^{}];}}self.lastTransitionY = translation.y;
}#pragma mark - lazy load- (UITapGestureRecognizer *)tapGesture {if (!_tapGesture) {_tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)];_tapGesture.delegate = self;}return _tapGesture;
}- (UIPanGestureRecognizer *)panGesture {if (!_panGesture) {_panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePanGesture:)];_panGesture.delegate = self;}return _panGesture;
}@end

demo link

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

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

相关文章

如何理解JavaScript代理对象(JavaScript Proxy)

JavaScript的Proxy对象是一种强大且灵活的特性&#xff0c;它允许你拦截并自定义对对象执行的操作。自ECMAScript 6&#xff08;ES6&#xff09;引入以来&#xff0c;Proxy对象为控制对象的基本操作行为提供了一种机制&#xff0c;使高级用例和改进的安全性成为可能。 代理对象…

HNTs-g-PEG-CDs-Biotin NPs;碳量子点修饰接枝生物素化的羟基磷灰石纳米管

HNTs-g-PEG-CDs-Biotin NPs&#xff0c;即碳量子点修饰接枝生物素化的羟基磷灰石纳米管&#xff0c;是一种结合了多种先进材料特性的纳米复合材料。以下是对该材料的详细分析&#xff1a; 一、组成成分及特性 羟基磷灰石纳米管&#xff08;HNTs&#xff09;&#xff1a; 羟基磷…

elasticSearch的索引库文档的增删改查

我们都知道&#xff0c;elasticsearch在进行搜索引擎的工作时&#xff0c;是会先把数据库中的信息存储一份到elasticsearch中&#xff0c;再去分词查询等之后的工作的。 elasticsearch中的文档数据会被序列化为json格式后存储在elasticsearch中。elasticsearch会对存储的数据进…

重庆交通大学数学与统计学院携手泰迪智能科技共建的“智能工作室”

2024年7月4日&#xff0c;重庆交通大学数学与统计学院与广东泰迪智能科技股份有限公司携手共建的“智能工作室”授牌仪式在南岸校区阳光会议室举行。此举标志着数统学院与广东泰迪公司校企合作新篇章的开启&#xff0c;也预示着学院在智能科技教育领域的深入探索和实践。 广东…

代发考生战报:南京考场华为售前HCSP H19-411考试通过

代发考生战报&#xff1a;南京考场华为售前HCSP H19-411考试通过&#xff0c;客服给的题库非常稳定&#xff0c;考试遇到2个新题&#xff0c;剩下全是题库里的原题&#xff0c;想考的放心考吧&#xff0c;考场服务挺好&#xff0c;管理员带着做签名和一些考试说明介绍清楚&…

科研绘图系列:R语言分组柱状图一(Grouped Bar Chart)

介绍 分组柱状图(Grouped Bar Chart)是一种数据可视化图表,用于比较不同类别(分组)内各子类别(子组)的数值。在分组柱状图中,每个分组有一组并列的柱子,每个柱子代表一个子组的数值,不同的分组用不同的列来表示。 特点: 并列柱子:每个分组内的柱子是并列的,便于…

51 单片机[7]:计时器

一、定时器 1. 定时器介绍 51单片机的定时器属于单片机的内部资源&#xff0c;其电路的连接和运转均在单片机内部完成。 定时器作用&#xff1a; &#xff08;1&#xff09;用于计时系统&#xff0c;可实现软件计时&#xff0c;或者使程序每隔一固定时间完成一项操作 &#…

运算符和表达式

运算符 运算&#xff1a;对数据进行加工和处理。 运算符&#xff1a;表示各种运算的符号。 操作数&#xff1a;参与运算的数据。 根据操作数的个数&#xff0c;可以将运算符分为单目、双目和多目运算符。单目运算符只对1个操作数运算&#xff0c;双目运算符对2个操作数运算…

k8s中port,targetPort,nodePort,containerPort的区别

一、说明 在 Kubernetes 中&#xff0c;port、targetPort、nodePort 和 containerPort 是用于定义服务&#xff08;Service&#xff09;和容器之间网络通信的不同参数。 它们各自的作用和含义如下&#xff1a; 1. port 定义&#xff1a;这是服务对外暴露的端口号。作用&#x…

linux指令练习

二、touch、vi练习&#xff1a; 1、在root家目录下创建目录A1和B1 2、进入B1下同时创建三个文件m1, m2 , n1&#xff0c;单独创建目录N1 3、进入到A1目录中分别创建一个文件t1,k2&#xff0c;同时创建目录F1&#xff0c;F2 4、删除B1下的所有1结尾的文件或者目录 5、删除A1目录…

Python基础知识——(001)

文章目录 P4——3. 程序设计语言的分类 1. 程序设计语言 2. 编译与解释 P5——4. Python语言的简介与开发工具 1. Python语言的简介 2. Python语言的发展 3. Python语言的特点 4. Python的应用领域 5. Python的开发工具 P6——5. IPO编程方式 IPO程序编写方法 P7——6. print函…

案例精选 | 聚铭综合日志分析系统为江苏省电子口岸构建高效安全的贸易生态

江苏省电子口岸有限公司&#xff0c;成立于2009年&#xff0c;由江苏省贸促会携手南京海关、江苏检验检疫局及江苏海事局等部门共同出资组建。公司承载着推动江苏乃至长三角地区国际贸易便利化的重大使命&#xff0c;致力于打造一个集先进性、创新性、高效性于一体的电子口岸综…

STM32初识HAL库(下载和使用)

初识HAL库&#xff08;了解&#xff09; ST 为了方便用户开发 STM32芯片开发提供了三种库&#xff1a; 标准外设库 (Standard Peripheral Libraries)HAL库(硬件抽象层)&#xff1a;Hardware Abstraction LayerLL库&#xff1a;Low Layer 一、获取STM32Cube固件包 方式一&…

jQuery 笔记

一、什么是jQuery 框架&#xff1a;半成品软件 Jquery就是封装好的js 本质上还是js jQuery是一个快速、简洁的JavaScript**框架**&#xff0c;是继Prototype之后又一个优秀的**JavaScript代码库**&#xff08;*或JavaScript框架*&#xff09;。 JQuery:封装好的代码库。有一…

【Proteus】按键的实现『⒉种』

&#x1f6a9; WRITE IN FRONT &#x1f6a9; &#x1f50e; 介绍&#xff1a;"謓泽"正在路上朝着"攻城狮"方向"前进四" &#x1f50e;&#x1f3c5; 荣誉&#xff1a;2021|2022年度博客之星物联网与嵌入式开发TOP5|TOP4、2021|2222年获评…

Qt 进程间通信(一)——QSharedMemory共享内存

QSharedMemory共享内存 序言环境理论—逻辑理解实战—代码读取示例写入示例 序言 讲讲Qt的共享内存吧&#xff0c;巩固下 环境 msvc2022 Qt5.15 参考文档&#xff1a;https://doc.qt.io/qt-5/qsharedmemory.html 理论—逻辑理解 看下面前&#xff0c;你需要将共享内存看成…

JS数据类型检测的方式有哪些 (常用)

typeof 其中数组、对象、null都会被判断为object&#xff0c;其他判断都正确typeof返回的类型都是字符串形式 instanceof instanceof &#xff1a;用于检测一个实例是否属于某个类&#xff0c;通过验证当前类的原型 prototype 是否出现在实例的原型链 __proto__ 上。它不能检测…

如何在Excel中对一个或多个条件求和?

在Excel中&#xff0c;基于一个或多个条件的求和值是我们大多数人的常见任务&#xff0c;SUMIF函数可以帮助我们根据一个条件快速求和&#xff0c;而SUMIFS函数可以帮助我们对多个条件求和。 本文&#xff0c;我将描述如何在Excel中对一个或多个条件求和&#xff1f; 在Excel中…

DataExcelServer局域网文件共享服务器增加两个函数

1、PFSUM合并指定路径下单元格ID的值 PFSUM("/103采购/8月采购名细","amount") 第一个参数为路径&#xff0c;第二个参数为单元格的ID 2、PFQuery 查询路径下 单元格ID值的列表 PFQuery("/103采购/8月采购名细","amount") 查询/103采…

【vue】JSON数据导出excel

前言 导出方式有很多种&#xff0c;但是若只需要数据导出成.xlsx文件并下载的话&#xff0c;只用xlsx一个插件就行 目标 1 实现数据导出excel 2 如何设置表格列宽 3 如何在文件中创建工作表 准备工作 1 安装 npm i xlsx -S 2 引入 npm i xlsx -S 二、导出excel 创建文件 con…