iOS 实现类似抖音滚动效果

禾口王王口禾 發表於 2024-6-27 10:29:11

<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li>效果图</li><li>思路</li><li>代码</li></ul></div><p class="maodian"></p><h2>效果图</h2>
<p style="text-align:center"><img alt="请添加图片描述" src="https://img.jbzj.com/file_images/article/202406/202406271014557.gif" /></p>
<p class="maodian"></p><h2>思路</h2>
<p>整体上我们使用tableView实现，为了预留内容的缓冲，我们将tableView 的contentinset设置为上面一个屏幕的高度，下面一个屏幕的高度，左右为0，这样保证我们滚动过去的时候<br />都是准备好的内容<br />然后就是滑动效果的实现了,主要就是我们在scrollViewWillEndDragging方法中获取到停止拖动（手指离开）时候的速度。在scrollViewDidEndDragging 方法中<br />通过translationInView方法判断当前滑动的方向，<br />然后刚才获取到的速度就派上用场了，当我们手指离开时候的速度大于0.4的时候，我们切换页面的临界偏移量就是8 ，否则临界偏移量就是60，同时，通过<br />CGPoint translatedPoint = ;判断translatedPoint.y我们可以<br />判断滚动的方向，判断出方向之后，<br />使用UIView animateWithDuration动画快速翻页</p>
<p class="maodian"></p><h2>代码</h2>
<div class="jb51code"><pre class="brush:java;">//
//ViewController.m
//LBDouyinScroll
//
//Created by mac on 2024/6/26.
//
#import "ViewController.h"
#import "DouyinScrollTableViewCell.h"
#define kScreenWidth.bounds.size.width
#define kScreenHeight .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 {
;
;
self.colorArray = ;
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 = [initWithRed:rr green:rg blue:rb alpha:1];
   ;
}
;
// Do any additional setup after loading the view.
}
#pragma mark - UITableViewDelegate, UITableViewDataSource
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
DouyinScrollTableViewCell *cell = )];
];
// cell.textLabel.text = ;
// cell.backgroundColor = self.colorArray;
// if (!cell.contentView.backgroundColor) {
//    cell.contentView.backgroundColor = self.colorArray;
// }
// 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 = ;
   //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
            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 = [ initWithFrame:CGRectMake(0, - kScreenHeight, CGRectGetWidth(self.view.bounds), kScreenHeight * 3) style:UITableViewStylePlain];
   forCellReuseIdentifier:NSStringFromClass()];
   _tableView.rowHeight = kScreenHeight;
   _tableView.contentInset = UIEdgeInsetsMake(kScreenHeight , 0, kScreenHeight, 0);
   _tableView.estimatedRowHeight = kScreenHeight;
   _tableView.delegate = self;
   _tableView.dataSource = self;
   _tableView.backgroundColor = ;
   _tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
   _tableView.separatorInset = UIEdgeInsetsZero;
   _tableView.decelerationRate = UIScrollViewDecelerationRateFast;
}
return _tableView;
}
@end</pre></div>
<p>其中最关键的就是下面的</p>
<div class="jb51code"><pre class="brush:java;">- (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 = ;
   //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
            atScrollPosition:UITableViewScrollPositionTop animated:NO];
         } completion:^(BOOL finished) {
            //UITableView可以响应其他滑动手势
            scrollView.panGestureRecognizer.enabled = YES;
         }];
   }
});
}</pre></div>
<p>demo: link</p>
<p>到此这篇关于iOS 实现类似抖音滚动效果的文章就介绍到这了,更多相关iOS 抖音滚动内容请搜索琼殿技术社区以前的文章或继续浏览下面的相关文章希望大家以后多多支持琼殿技术社区！</p>

                        <div class="art_xg">
                           <b>您可能感兴趣的文章:</b><ul><li>iOS实现卡片式滚动效果 iOS实现电影选片效果</li><li>iOS ScrollView嵌套tableView联动滚动的思路与最佳实践</li><li>iOS使用UICollectionView实现横向滚动照片效果</li><li>iOS自定义时间滚动选择控件</li><li>iOS自定义水平滚动条、进度条</li><li>iOS自定义可展示、交互的scrollView滚动条</li><li>iOS仿网易新闻滚动导航条效果</li><li>iOS Swift UICollectionView横向分页滚动，cell左右排版问题详解</li></ul>
                        </div>

                     </div>

頁: [1]

琼殿技术论坛's Archiver

iOS 实现类似抖音滚动效果