iOS 实现类似抖音翻页滚动效果

这里是效果图
请添加图片描述

参考抖音的滚动效果,需要我们在结束拖动的时候,动画设置偏移量
这里有一个注意点,由于我们是在拖动结束的时候,手动改变tableview的偏移量,
改变了tableView 自身原有的的滚动效果,所以我们
需要讲tableView 的frame的高度设置为三个cell的高度,然后,设置contentInset
的顶部和底部都是cell的高度,否则会导致我们滚动的过程中cell还没有加载出来
,展示成一片空白的效果

直接上代码

//
//  DouyinScrollViewController.m
//  TEXT
//
//  Created by mac on 2024/4/28.
//  Copyright © 2024 刘博. All rights reserved.
//#import "DouyinScrollViewController.h"
#import "DouyinScrollTableViewCell.h"static CGFloat const height = 700;@interface DouyinScrollViewController () <UITableViewDelegate, UITableViewDataSource>@property (nonatomic, strong) UITableView *tableView;@property (nonatomic, assign) NSInteger currentIndex;@property (nonatomic, assign) CGFloat velocity;@property (nonatomic, strong) NSMutableArray *colorArray;@end@implementation DouyinScrollViewController- (void)viewDidLoad {[super viewDidLoad];[self.view addSubview:self.tableView];self.colorArray = [NSMutableArray array];for (int i = 0; i < 10; i ++) {int r = arc4random() % 255;int g = arc4random() % 255;int b = arc4random() % 255;CGFloat rr = r / 255.0;CGFloat rg = g / 255.0;CGFloat rb = b / 255.0;UIColor *color = [[UIColor alloc]initWithRed:rr green:rg blue:rb alpha:1];[self.colorArray addObject:color];}[self.tableView reloadData];// Do any additional setup after loading the view.
}#pragma mark - UITableViewDelegate, UITableViewDataSource- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{DouyinScrollTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass([DouyinScrollTableViewCell class])];[cell updateWithColor:self.colorArray[indexPath.row]];//    cell.textLabel.text = [NSString stringWithFormat:@"%ld",indexPath.row];//    cell.backgroundColor = self.colorArray[indexPath.row];//    if (!cell.contentView.backgroundColor) {//        cell.contentView.backgroundColor = self.colorArray[indexPath.row];//    }//    return cell;return cell;
}- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{return 10;
}- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{return height;
}#pragma mark - scrolllVIewDelegate- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{}- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
{self.velocity = velocity.y;
}- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{dispatch_async(dispatch_get_main_queue(), ^{CGPoint translatedPoint = [scrollView.panGestureRecognizer translationInView:scrollView];//UITableView禁止响应其他滑动手势scrollView.panGestureRecognizer.enabled = NO;CGFloat translateCheck = 60;NSLog(@"哈哈哈哈获取停止拖动时候的速度%f", self.velocity);if (fabs(self.velocity) > 0.4) {translateCheck = 8;}if(translatedPoint.y < -translateCheck && self.currentIndex < 10) {self.currentIndex ++;   //向下滑动索引递增}if(translatedPoint.y > translateCheck && self.currentIndex > 0) {self.currentIndex --;   //向上滑动索引递减}[UIView animateWithDuration:0.15delay:0.0options:UIViewAnimationOptionCurveEaseOut animations:^{//UITableView滑动到指定cell[self.tableView scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:self.currentIndex inSection:0] atScrollPosition:UITableViewScrollPositionTop animated:NO];} completion:^(BOOL finished) {//UITableView可以响应其他滑动手势scrollView.panGestureRecognizer.enabled = YES;}];});
}#pragma mark - lazy load- (UITableView *)tableView
{if (!_tableView) {_tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 60 - height, CGRectGetWidth(self.view.bounds), height * 3) style:UITableViewStylePlain];[_tableView registerClass:[DouyinScrollTableViewCell class] forCellReuseIdentifier:NSStringFromClass([DouyinScrollTableViewCell class])];_tableView.rowHeight = height;_tableView.contentInset = UIEdgeInsetsMake(height , 0, height, 0);_tableView.estimatedRowHeight = height;_tableView.delegate = self;_tableView.dataSource = self;_tableView.backgroundColor = [UIColor redColor];_tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;_tableView.separatorInset = UIEdgeInsetsZero;}return _tableView;
}/*#pragma mark - Navigation// In a storyboard-based application, you will often want to do a little preparation before navigation- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {// Get the new view controller using [segue destinationViewController].// Pass the selected object to the new view controller.}*/@end

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

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

相关文章

近几年视频取证、视频篡改检测技术发展现状及挑战

前言 本文主要搜集了视频取证各个子领域近几年的高影响因子/引用数的文章及其主要思想和做法&#xff0c;旨在分析目前视频篡改检测的发展现状与热点领域&#xff0c;文章中也融合了自己的一点看法和展望&#xff0c;欢迎感兴趣的同学和我多多沟通。 本文无论是文献搜集还是方…

Linux网络抓包工具tcpdump是如何实现抓包的,在哪个位置抓包的?

Linux网络抓包工具tcpdump是如何实现抓包的&#xff0c;在哪个位置抓包的&#xff1f; 1. tcpdump抓包架构2. BPF介绍3. 从内核层面看tcpdump抓包流程3.1. 创建socket套接字3.2. 挂载BPF程序 4. 网络收包抓取5. 网络发包抓取6. 疑问和思考6.1 tcpdump抓包跟网卡、内核之间的顺序…

【MySQL | 第八篇】在MySQL中,如何定位慢查询以及对应解决方法?

文章目录 8.在MySQL中&#xff0c;如何定位慢查询以及对应解决方法&#xff1f;8.1MySQL慢查询日志8.1.1开启慢查询&#xff08;1&#xff09;修改配置文件&#xff08;2&#xff09;设置全局变量 8.1.2日志记录在表上&#xff08;实践&#xff09;8.1.3日志记录在文件上&#…

大数据开发工作中的数仓设计(Hadoop,hive ,mysql )

1.HUE工具介绍使用 HUE是CDH提供一个hive和hdfs的操作工具&#xff0c;在hue中编写了hiveSQl也可以操作hdfs的文件 http://主机名字:端口号 hdfs的web访问端口 http://主机名字:端口号 hdfs的程序访问端口 进入后确保hdfs hive yarn 开启 在点击hue开启 在这里面也可以进行h…

Xinlinx FPGA如何降低Block RAM的功耗

FPGA中降低Block RAM的功耗有两种方式&#xff0c;分别是选择合适的写操作模式以及Block RAM的实现算法及综合设置。我们知道对于采用IP核生成对应的RAM时&#xff0c;会有最小面积算法、低功耗算法以及固定原语&#xff0c;但是采用最小功耗算法有时由于级联长度导致无法实现&…

币圈Cryptosquare论坛

Cryptosquare综合性资讯论坛汇集了币圈新闻、空投信息、社会热点以及与Web3相关的工作信息。让我们一起解锁加密世界的种种可能性&#xff0c;探索Cryptosquare论坛带来的精彩&#xff01; 币圈新闻板块&#xff1a; Cryptosquare论坛的币圈新闻板块是用户获取最新加密货币行业…

Elasticsearch中【文档查询】DSL语句以及对应的Java实现

目录 全文检索查询 精准查询 布尔查询 排序、分页查询 高亮 地理查询 复合查询 Elasticsearch提供了基于JSON的DSL&#xff08;Domain Specific Language&#xff09;来定义查询。常见的查询类型包括&#xff1a; 查询所有&#xff1a;查询出所有数据&#xff0c;一般测…

全新突破:「Paraverse平行云」实现3D/XR企业级应用全面接入Apple Vision Pro

在前不久举行的GTC开发者大会上&#xff0c;英伟达引领行业风向&#xff0c;宣布其Omniverse平台能够助力企业将3D/XR应用流畅传输至Apple Vision Pro混合现实头显。在英伟达与苹果这两大科技巨头的合作下,此举标志着3D/XR技术迈向新纪元的关键一步。「Paraverse平行云」实时云…

《HCIP-openEuler实验指导手册》1.6 Apache静态资源配置

知识点 常用用途&#xff1a; 软件仓库镜像及提供下载服务&#xff1a; 配置步骤 删除网站主目录中的文件&#xff08;本实验机目录为/home/source ip为192.168.12.137 端口为81&#xff09; cd /home/source rm -rf *在主目录中新建6个文件夹如下图 mkdir test{1..6}新建…

将本地.mp4推流成rtsp流?(windows)

概述 如何在本地机器上进行rtsp推流整个操作&#xff1f; 1.软件安装 1. 推流-ffmpeg下载 从官网下载windows版本&#xff0c;该版本已经编译好了 放到C&#xff1a;下找一个目录解压&#xff0c;我放到C:\ffmpeg-7.0-essentials_build\进入系统环境变量设置&#xff1a;将…

使用nodejs和python脚本实现爬虫程序,并将抓取数据生成词云图看板

创建项目&#xff0c;初始化目录结构。 创建项目名称为pachong。运行 npm init -y 初始化项目。修改package.json文件中的type属性为module。安装 npm 包&#xff1a;npm install puppeteer #爬虫 | 自动化UI测试首先确保你的电脑上有python3环境安装两个python包 pip instal…

c#数据库: 8.在窗体上显示学生信息

以上一章学生信息表为例&#xff0c;首先将查询的学生信息存储到数据集中&#xff0c;然后将数据集与数据显示控件绑定&#xff0c;从而实现学生信息在窗体上的显示 &#xff08;1&#xff09;创建一个名为StudentGridView的窗体应用程序&#xff0c;为窗体添加一个DataGridVi…

Stable Diffusion 模型分享:Counterfeit-V3.0(动漫)

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里&#xff0c;订阅后可阅读专栏内所有文章。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八 下载地址 模型介绍 高质量动漫风格模型。 条目内容类型大模型基础模…

Java进阶-JINQ详解与使用

本文详细介绍了JINQ&#xff08;Java Integrated Query&#xff09;&#xff0c;一种强化Java中数据查询能力的库&#xff0c;提供类SQL的查询语法和类型安全的操作。文章首先解释了JINQ的基本功能和应用&#xff0c;随后通过具体示例展示了如何使用JINQ进行数据过滤、投影、连…

Unity镂空图像做法

问题和解决方案 现在要完成一个需求&#xff0c;即镂空中间部分的image&#xff0c;外围image可以定义颜色并可选屏蔽点击&#xff0c;而中间的image需要透明且可以穿透&#xff0c;必须不能屏蔽点击。 由此拆分成了两个问题&#xff1a; 1.定义外围image颜色&#xff0c;内…

Facebook的语言学:社交媒体如何影响我们的沟通方式

1. 引言 社交媒体已经成为人们日常生活中不可或缺的一部分&#xff0c;而Facebook作为其中最具影响力的平台之一&#xff0c;不仅改变了人们之间的社交方式&#xff0c;也对我们的语言学产生了深远的影响。本文将深入探讨Facebook的语言学特点&#xff0c;以及它如何塑造和改变…

Spring6 当中 获取 Bean 的四种方式

1. Spring6 当中 获取 Bean 的四种方式 文章目录 1. Spring6 当中 获取 Bean 的四种方式每博一文案1.1 第一种方式&#xff1a;通过构造方法获取 Bean1.2 第二种方式&#xff1a;通过简单工厂模式获取 Bean1.3 第三种方式&#xff1a;通过 factory-bean 属性获取 Bean1.4 第四种…

【保姆级教程】用IDEA2023版本给RuoYi-Vue添加子模块

文章目录 前言添加子模块新建子模块新建子模块界面&#xff1f;新建子模块界面&#xff01; 修改pom依赖配置RuoYiApplication添加测试接口配置接口权限测试 前言 若依前后端分离框架能够极大方便当前开发任务&#xff0c;并且使用的技术栈也相当丰富&#xff0c;但是目前只提…

Docker 中安装单体架构 Redis 的 Shell 脚本

该脚本用于实现 root 用户在 Linux 操作系统下的 Docker 中安装单体架构 Redis Shell 脚本 Git 仓库地址 Gitee&#xff1a;https://gitee.com/tongchaowei/common-shell/tree/main/root 执行脚本 bash ./docker-redis-install-single.sh需要注意的 该脚本会先检查是否安…

数学建模--图论最短路径基础

1.图的定义 学过数据结构或者离散数学的小伙伴们应该知道图的概念&#xff0c;我在这里简单的介绍一下&#xff1a; 图的概念和我们理解的是很不一样的&#xff0c;这里的图并不是我们的生活里面的图片&#xff0c;而是一种表示不同的数据之间的关系&#xff0c;例如这里的5个…