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

news2024/12/23 13:14:14

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

参考抖音的滚动效果,需要我们在结束拖动的时候,动画设置偏移量
这里有一个注意点,由于我们是在拖动结束的时候,手动改变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.15
                              delay:0.0
                            options: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.coloradmin.cn/o/1633508.html

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

相关文章

竟然还有这么省钱方便的寄快递方式?你竟然不知道!

选择闪侠惠递平台寄快递&#xff0c;这个价格来说真的很亲民了&#xff0c;而且可以多家快递进行比较&#xff0c;全国上门取件&#xff0c;这个真的很不错了。闪侠惠递是个靠谱的平台&#xff0c;售后以及取件率都必须好的。 闪侠惠递平台折扣力度非常棒的&#xff01;因为渠…

Llama3 端侧部署:算丰 SG2300x 与爱芯元智 AX650N

美国当地时间4月18日&#xff0c;Meta 开源了 Llama3 大模型&#xff0c;包括一个 8B 模型和一个 70B 模型在测试基准中&#xff0c;Llama 3 模型的表现相当出色&#xff0c;在实用性和安全性评估中&#xff0c;与那些市面上流行的闭源模型不相上下。 Llama3 性能指标&#xf…

linux jmeter ant下载并安装【2024-亲测】

环境 centos7 一、下载jmeter 在这里插入代码片wget https://dlcdn.apache.org//jmeter/binaries/apache-jmeter-5.6.3.tgz --no-check-certificate解压 tar -zxvf apache-jmeter-5.6.3.tgz复制到安装目录、设置环境变量 vim /etc/profile添加环境变量&#xff0c;路径改成…

python学习笔记----安装pycharm(1)

一、安装pycharm 1. 下载并安装pycharm https://www.jetbrains.com/pycharm/download2.汉化pycharm 安装插件并重启IDE完成汉化 二、 第一个python程序

谷歌验证码识别/谷歌识别/Google/本地库识别/图像识别

谷歌识别 做这个有两种方式&#xff0c;一种是图像分类的方式&#xff0c;标注量大&#xff0c;识别率有局限性。 另外一种是通过上面的图和下面的小图做一个相似度匹配&#xff0c;做孪生网络。 谷歌验证方式比较丰富&#xff0c;有时候上面的小图没有&#xff0c;我们可以做…

微服务启动慢,看我如何消灭这些憨憨怪!

Hello&#xff0c;我是大都督周瑜&#xff0c;最近在公司做微服务启动速度的优化&#xff0c;我们有些微服务启动要花5-6分钟&#xff08;就问你夸不夸张&#xff09;&#xff0c;直接导致打工人们有了更多的划水时间&#xff0c;领导表示不开心&#xff0c;要求我将微服务的启…

牛客NC320 装箱问题【中等 动态规划,背包问题 C++/Java/Go/PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/d195a735f05b46cf8f210c4ad250681c 几乎完全相同的题目&#xff1a; https://www.lintcode.com/problem/92/description 思路 动态规划都是递归递推而来。php答案是动态规划版本&#xff0c;递归版本有 测试用…

UE5 体积云

写好的体积材质放这里面 效果如上 Begin Object Class/Script/UnrealEd.MaterialGraphNode Name"MaterialGraphNode_4"Begin Object Class/Script/Engine.MaterialExpressionVectorParameter Name"MaterialExpressionVectorParameter_0"End ObjectBegin O…

新一代大数据平台,为什么选择中国移动梧桐数据库?

个人介绍&#xff1a;艺名司镜233&#xff0c;是中国移动梧桐数据库研发团队成员&#xff0c;从事相关的技术开发近5年了。最让我觉得自豪的不是在研发这款数据库&#xff0c;而是我们用代码&#xff0c;切实地帮助企业解决数据的困扰&#xff0c;切实地解决社会的问题。 本篇文…

二维码门楼牌管理应用平台:构建智慧社区的新引擎

文章目录 前言一、二维码门楼牌管理应用平台的建设意义二、二维码门楼牌管理应用平台的功能特点三、二维码门楼牌管理应用平台在社区治理中的重要作用 前言 随着信息技术的飞速发展&#xff0c;二维码门楼牌管理应用平台正成为智慧城市建设的重要组成部分。通过该平台&#xf…

每日OJ题_贪心算法一⑥_力扣334. 递增的三元子序列

目录 力扣334. 递增的三元子序列 解析代码 力扣334. 递增的三元子序列 334. 递增的三元子序列 难度 中等 给你一个整数数组 nums &#xff0c;判断这个数组中是否存在长度为 3 的递增子序列。 如果存在这样的三元组下标 (i, j, k) 且满足 i < j < k &#xff0c;使…

Virtualbox7.0.10--在虚拟机中安装Ubuntu20.04

前言 下载Virtualbox7.0.10&#xff0c;可参考《Virtualbox–下载指定版本》 Virtualbox7.0.10具体安装步骤&#xff0c;可参考《Virtualbox7.0.10的安装步骤》 Virtualbox7.0.10创建虚拟机&#xff0c;可参考《Virtualbox7.0.10–创建虚拟机》 Virtualbox7.0.10安装Ubuntu20.0…

docker容器---docker-compose容器集群的快速编排

一、Docker-compose简介 Docker-Compose项目是基于Python开发的Docker官方开源项目&#xff0c;负责实现对Docker容器集群的快速编排。 Docker-Compose将所管理的容器分为三层&#xff0c;分别是 工程&#xff08;project&#xff09;&#xff0c;服务&#xff08;service&am…

MyBatis(环境配置+基本CRUD)

文章目录 1.基本介绍1.为什么需要MyBatis&#xff1f;2.MyBatis介绍3.MyBatis工作示意图4.MyBatis的优势 2.快速入门文件目录1.需求分析2.数据库表设计3.父子模块环境配置1.创建maven父项目2.删除父项目的src目录3.pom.xml文件文件解释 4.创建子模块1.新建一个Module2.创建一个…

ffmpeg与sdl的个人笔记

说明 这里的ffmpeg基础知识和sdl基础知识仅提及与示例代码相关的知识点, 进阶可学习雷神的博客。 https://blog.csdn.net/leixiaohua1020 当然&#xff0c;如代码写的有问题或有更好的见解&#xff0c;欢迎指正&#xff01; 音视频基础知识 在学习音视频理论知识时&#xff…

学数据结构之前是否该把c语言吃透?

在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「数据结构的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; 我见过的第一个版本的数据…

vue+elementui(笔记)

vueelementui 表格 <div class"tableStyle"><el-table :data"pointsSettingsTableData" style"width: 70%" :stripe"true" size"mini"header-cell-class-name"headerClassName" :cell-style"{ tex…

合规基线:让安全大检查更顺利

前言 说起安全检查&#xff0c;安全从业人员可能都非常熟悉“安全标准”概念。所有企事业单位网络安全建设都需要满足来自于国家或监管单位的安全标准&#xff0c;如等保2.0、CIS安全标准等。安全标准&#xff0c;还有一个叫法就是“安全基线”。字典上对“基线”的解释是&…

AI视频教程下载:用ChatGPT做SEO的终极教程

ChatGPT是由OpenAI开发的一款尖端人工智能&#xff0c;它已经彻底改变了我们进行搜索引擎优化&#xff08;SEO&#xff09;的方式。其先进的语言处理能力使其成为增强网站内容、提高搜索引擎排名和显著提升在线可见性的宝贵工具。 这个全面的课程旨在为你提供使用ChatGPT进行SE…

算法必备数学基础:图论方法由浅入深实践与应用

作者介绍&#xff1a;10年大厂数据\经营分析经验&#xff0c;现任大厂数据部门负责人。 会一些的技术&#xff1a;数据分析、算法、SQL、大数据相关、python 欢迎加入社区&#xff1a;码上找工作 作者专栏每日更新&#xff1a; LeetCode解锁1000题: 打怪升级之旅 python数据分析…