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

打印 上一主题 下一主题

主题 798|帖子 798|积分 2394

这里是结果图

参考抖音的滚动结果,需要我们在竣事拖动的时候,动画设置偏移量
这里有一个注意点,由于我们是在拖动竣事的时候,手动改变tableview的偏移量,
改变了tableView 自身原有的的滚动结果,所以我们
需要讲tableView 的frame的高度设置为三个cell的高度,然后,设置contentInset
的顶部和底部都是cell的高度,否则会导致我们滚动的过程中cell还没有加载出来
,展示成一片空白的结果
直接上代码
  1. //
  2. //  DouyinScrollViewController.m
  3. //  TEXT
  4. //
  5. //  Created by mac on 2024/4/28.
  6. //  Copyright © 2024 刘博. All rights reserved.
  7. //
  8. #import "DouyinScrollViewController.h"
  9. #import "DouyinScrollTableViewCell.h"
  10. static CGFloat const height = 700;
  11. @interface DouyinScrollViewController () <UITableViewDelegate, UITableViewDataSource>
  12. @property (nonatomic, strong) UITableView *tableView;
  13. @property (nonatomic, assign) NSInteger currentIndex;
  14. @property (nonatomic, assign) CGFloat velocity;
  15. @property (nonatomic, strong) NSMutableArray *colorArray;
  16. @end
  17. @implementation DouyinScrollViewController
  18. - (void)viewDidLoad {
  19.     [super viewDidLoad];
  20.     [self.view addSubview:self.tableView];
  21.     self.colorArray = [NSMutableArray array];
  22.     for (int i = 0; i < 10; i ++) {
  23.         int r = arc4random() % 255;
  24.         int g = arc4random() % 255;
  25.         int b = arc4random() % 255;
  26.         CGFloat rr = r / 255.0;
  27.         CGFloat rg = g / 255.0;
  28.         CGFloat rb = b / 255.0;
  29.         UIColor *color = [[UIColor alloc]initWithRed:rr green:rg blue:rb alpha:1];
  30.         [self.colorArray addObject:color];
  31.     }
  32.     [self.tableView reloadData];
  33.     // Do any additional setup after loading the view.
  34. }
  35. #pragma mark - UITableViewDelegate, UITableViewDataSource
  36. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
  37. {
  38.     DouyinScrollTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass([DouyinScrollTableViewCell class])];
  39.     [cell updateWithColor:self.colorArray[indexPath.row]];
  40.     //    cell.textLabel.text = [NSString stringWithFormat:@"%ld",indexPath.row];
  41.     //    cell.backgroundColor = self.colorArray[indexPath.row];
  42.     //    if (!cell.contentView.backgroundColor) {
  43.     //        cell.contentView.backgroundColor = self.colorArray[indexPath.row];
  44.     //    }
  45.     //    return cell;
  46.     return cell;
  47. }
  48. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
  49. {
  50.     return 10;
  51. }
  52. - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
  53. {
  54.     return height;
  55. }
  56. #pragma mark - scrolllVIewDelegate
  57. - (void)scrollViewDidScroll:(UIScrollView *)scrollView
  58. {
  59.    
  60. }
  61. - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
  62. {
  63.     self.velocity = velocity.y;
  64. }
  65. - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
  66. {
  67.     dispatch_async(dispatch_get_main_queue(), ^{
  68.         CGPoint translatedPoint = [scrollView.panGestureRecognizer translationInView:scrollView];
  69.         //UITableView禁止响应其他滑动手势
  70.         scrollView.panGestureRecognizer.enabled = NO;
  71.         CGFloat translateCheck = 60;
  72.         NSLog(@"哈哈哈哈获取停止拖动时候的速度%f", self.velocity);
  73.         if (fabs(self.velocity) > 0.4) {
  74.             translateCheck = 8;
  75.         }
  76.         
  77.         
  78.         if(translatedPoint.y < -translateCheck && self.currentIndex < 10) {
  79.             self.currentIndex ++;   //向下滑动索引递增
  80.         }
  81.         if(translatedPoint.y > translateCheck && self.currentIndex > 0) {
  82.             self.currentIndex --;   //向上滑动索引递减
  83.         }
  84.         [UIView animateWithDuration:0.15
  85.                               delay:0.0
  86.                             options:UIViewAnimationOptionCurveEaseOut animations:^{
  87.             //UITableView滑动到指定cell
  88.             [self.tableView scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:self.currentIndex inSection:0] atScrollPosition:UITableViewScrollPositionTop animated:NO];
  89.         } completion:^(BOOL finished) {
  90.             //UITableView可以响应其他滑动手势
  91.             scrollView.panGestureRecognizer.enabled = YES;
  92.         }];
  93.         
  94.     });
  95. }
  96. #pragma mark - lazy load
  97. - (UITableView *)tableView
  98. {
  99.     if (!_tableView) {
  100.         _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 60 - height, CGRectGetWidth(self.view.bounds), height * 3) style:UITableViewStylePlain];
  101.         [_tableView registerClass:[DouyinScrollTableViewCell class] forCellReuseIdentifier:NSStringFromClass([DouyinScrollTableViewCell class])];
  102.         _tableView.rowHeight = height;
  103.         _tableView.contentInset = UIEdgeInsetsMake(height , 0, height, 0);
  104.         _tableView.estimatedRowHeight = height;
  105.         _tableView.delegate = self;
  106.         _tableView.dataSource = self;
  107.         _tableView.backgroundColor = [UIColor redColor];
  108.         _tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
  109.         _tableView.separatorInset = UIEdgeInsetsZero;
  110.     }
  111.     return _tableView;
  112. }
  113. /*
  114. #pragma mark - Navigation
  115. // In a storyboard-based application, you will often want to do a little preparation before navigation
  116. - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
  117. // Get the new view controller using [segue destinationViewController].
  118. // Pass the selected object to the new view controller.
  119. }
  120. */
  121. @end
复制代码
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

反转基因福娃

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表