iOS?實現類似抖音滾動效果

更新時間：2024年06月27日 10:29:11 作者：劉小哈哈哈

這篇文章主要介紹了iOS?實現類似抖音滾動效果,整體思路是我們將tableView 的contentinset設置為上面一個屏幕的高度,下面一個屏幕的高度,左右為0,這樣保證我們滾動過去的時候
都是準備好的內容,需要的朋友可以參考下

效果圖

請?zhí)砑訄D片描述

思路

整體上我們使用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 抖音滾動內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: