iOS 实现类似抖音滚动效果

 更新时间:2024年06月27日 10:29:11   作者:刘小哈哈哈  
这篇文章主要介绍了iOS 实现类似抖音滚动效果,整体思路是我们将tableView 的contentinset设置为上面一个屏幕的高度,下面一个屏幕的高度,左右为0,这样保证我们滚动过去的时候
都是准备好的内容,需要的朋友可以参考下

效果图

请添加图片描述

思路

整体上我们使用tableView实现,为了预留内容的缓冲,我们将tableView 的contentinset设置为上面一个屏幕的高度,下面一个屏幕的高度,左右为0,这样保证我们滚动过去的时候
都是准备好的内容
然后就是滑动效果的实现了,主要就是我们在scrollViewWillEndDragging方法中获取到停止拖动(手指离开)时候的速度。 在scrollViewDidEndDragging 方法中
通过translationInView方法判断当前滑动的方向,
然后刚才获取到的速度就派上用场了,当我们手指离开时候的速度大于0.4的时候,我们切换页面的临界偏移量就是8 ,否则临界偏移量就是60, 同时,通过
CGPoint translatedPoint = [scrollView.panGestureRecognizer translationInView:scrollView];判断translatedPoint.y我们可以
判断滚动的方向,判断出方向之后,
使用UIView animateWithDuration动画快速翻页

代码

//
//  ViewController.m
//  LBDouyinScroll
//
//  Created by mac on 2024/6/26.
//
#import "ViewController.h"
#import "DouyinScrollTableViewCell.h"
#define kScreenWidth  [UIScreen mainScreen].bounds.size.width
#define kScreenHeight [UIScreen mainScreen].bounds.size.height
@interface ViewController ()
@property (nonatomic, strong) UITableView *tableView;
@property (nonatomic, assign) NSInteger currentIndex;
@property (nonatomic, assign) CGFloat velocity;
@property (nonatomic, strong) NSMutableArray *colorArray;
@end
@implementation ViewController
- (BOOL)prefersStatusBarHidden
{
    return YES;
}
- (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 kScreenHeight;
}
#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;
        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 --;   //向上滑动索引递减
        }
        if (self.currentIndex == 10) {
        } else {
            [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 - private
- (void)animationToIndex:(NSInteger)index
{
    [UIView animateWithDuration:0.2 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
        self.tableView.contentOffset = CGPointMake(0, kScreenHeight * index);
    } completion:^(BOOL finished) {
    }];
}
#pragma mark - lazy load
- (UITableView *)tableView
{
    if (!_tableView) {
        _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, - kScreenHeight, CGRectGetWidth(self.view.bounds), kScreenHeight * 3) style:UITableViewStylePlain];
        [_tableView registerClass:[DouyinScrollTableViewCell class] forCellReuseIdentifier:NSStringFromClass([DouyinScrollTableViewCell class])];
        _tableView.rowHeight = kScreenHeight;
        _tableView.contentInset = UIEdgeInsetsMake(kScreenHeight , 0, kScreenHeight, 0);
        _tableView.estimatedRowHeight = kScreenHeight;
        _tableView.delegate = self;
        _tableView.dataSource = self;
        _tableView.backgroundColor = [UIColor redColor];
        _tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
        _tableView.separatorInset = UIEdgeInsetsZero;
        _tableView.decelerationRate = UIScrollViewDecelerationRateFast;
    }
    return _tableView;
}
@end

其中最关键的就是下面的

- (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;
        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 --;   //向上滑动索引递减
        }
        if (self.currentIndex == 10) {
        } else {
            [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;
            }];
        }
    });
}

demo: link

到此这篇关于iOS 实现类似抖音滚动效果的文章就介绍到这了,更多相关iOS 抖音滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 基于UIControl控件实现ios点赞功能

    基于UIControl控件实现ios点赞功能

    在开发当中,可能很多时候都需要做个点赞的需求,如果用按钮实现,按钮作为一个系统复合控件,外部是一个 View--》UIControl的容器,本文给大家分享一个基于UIControl控件实现ios点赞功能,需要的朋友可以参考下
    2015-09-09
  • 关于iOS自带九宫格拼音键盘和Emoji表情之间的一些坑

    关于iOS自带九宫格拼音键盘和Emoji表情之间的一些坑

    这篇文章主要给大家介绍了关于iOS自带九宫格拼音键盘和Emoji表情之间的一些坑文中通过示例代码介绍的非常详细,对各位iOS开发者们具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-05-05
  • iOS AVCaptureSession实现视频录制功能

    iOS AVCaptureSession实现视频录制功能

    这篇文章主要为大家详细介绍了iOS AVCaptureSession实现视频录制功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • iOS使用WKWebView加载HTML5不显示屏幕宽度的问题解决

    iOS使用WKWebView加载HTML5不显示屏幕宽度的问题解决

    这篇文章主要介绍了iOS使用WKWebView加载HTML5不显示屏幕宽度的问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • iOS Crash文件分析方法汇总

    iOS Crash文件分析方法汇总

    今天跟大家一起聊聊iOSCrash文件的几种分析方法,都是平时比较常用的,有需要的小伙伴可以参考下
    2017-11-11
  • iOS高仿微信表情输入功能代码分享

    iOS高仿微信表情输入功能代码分享

    最近项目需求,要实现一个类似微信的的表情输入功能,今天小编抽空给大家分享iOS高仿微信表情输入功能代码,非常不错,感兴趣的朋友参考下吧
    2016-11-11
  • 浅谈iOS推送证书生成pem文件(详细生成过程)

    浅谈iOS推送证书生成pem文件(详细生成过程)

    这篇文章主要介绍了浅谈iOS推送证书生成pem文件(详细生成过程),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • iOS中设置view圆角化的四种方法示例

    iOS中设置view圆角化的四种方法示例

    最近因为工作的原因,遇到view圆角优化的问题,所以将实现的几种方法总结分享出来,下面这篇文章主要给大家介绍了关于iOS中设置view圆角化的四种方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2017-09-09
  • iOS Label实现文字渐变色效果

    iOS Label实现文字渐变色效果

    文字渐变色可以使整体的效果更上一个档次,最近在开发中就遇到了这个需求,所以整理出来,下面这篇文章主要给大家介绍了关于iOS Label实现文字渐变色效果的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-05-05
  • iOS使用UIKeyInput自定义密码输入框的方法示例

    iOS使用UIKeyInput自定义密码输入框的方法示例

    这篇文章主要给大家介绍了关于iOS如何使用UIKeyInput自定义密码输入框的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-02-02

最新评论