iOS短视频app搭建，仿抖音的上下滑实现

2023-10-11 20:45:40

正所谓“取其精华去其糟粕”，在抖音app中短视频上下滑动展示的效果受到了很多人的喜爱，所以我们在短视频app搭建时，也可以利用这一优势，接下来就一起来看看在在iOS短视频app搭建时，仿抖音的上下滑是如何实现的吧。

技术实现原理

UITableView

其实就是一个UITableView改变上下显示范围. talk is cheap show me the code

我说话不绕弯子,代码如下实现起来非常简单

_tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, -SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT * 5)];
_tableView.contentInset = UIEdgeInsetsMake(SCREEN_HEIGHT, 0, SCREEN_HEIGHT * 3, 0);

1、初始化的时候,TableView放在屏幕外边.
2、contentInset 显示内容的内边距, 以此是上, 左, 下, 右, 上边距距离整好屏幕高度,底部是顶部边距(屏幕高度的 3倍) 方便滑动, 左右分别顶到两边搞定.
我画个图演示一下.

看到这张图，大家也许已经明白了，最核心的地方是控制 TableView的上下边距,上边距留够一个屏幕高度,下边距留够下滑3屏左右的缓冲.

说一下在短视频app搭建时用到的技巧

创建tableView很简单
有个小技巧是，如何做到上下滑动能够完整的滑动到对应位置，正好占满屏幕，类似开启了UIScrollView的 pagingEnabled.

短视频app搭建实现滑动的代理方法

首先需要声明一个当前滑动页码的成员变量

@property (nonatomic, assign) NSInteger  currentIndex;

然后滑动代理停止的时候判断一下

#pragma mark -
#pragma mark - ScrollView delegate
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
    dispatch_async(dispatch_get_main_queue(), ^{
        CGPoint translatedPoint = [scrollView.panGestureRecognizer translationInView:scrollView];
        //UITableView禁止响应其他滑动手势
        scrollView.panGestureRecognizer.enabled = NO;
        
        if(translatedPoint.y < -50 && self.currentIndex < (kDataSourceCount - 1)) {
            self.currentIndex ++;   //向下滑动索引递增
        }
        if(translatedPoint.y > 50 && 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;
                            }];
        
    });
}

这里的 50 实际上是你能允许滑动的最大触发区间。

基于滑动区间做加减当前页码控制，然后做个简单的UIView动画.

注意: 在短视频app搭建，开始动画的时候最好不要相应pan手势,结束动画的时候再恢复回去,这样可以避免一些不必要的收拾滑动引起的问题.

为什么要滑动页码self.currentIndex
因为我们要用KVO 来实现页面变动驱动滑动的动画

在 viewDidLoad:方法中我们有个setupView:方法中有下段代码

[self addObserver:self forKeyPath:@"currentIndex" options:NSKeyValueObservingOptionInitial|NSKeyValueObservingOptionNew context:nil];

是的我们要自己监听自己的成员变量去搞些事情.

//观察currentIndex变化
-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context {
    if ([keyPath isEqualToString:@"currentIndex"]) {
        //获取当前显示的cell
        AwemeListCell *cell = [self.tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:_currentIndex inSection:0]];
        __weak typeof (cell) wcell = cell;
        __weak typeof (self) wself = self;
        //用cell控制相关视频播放
        
    } else {
        return [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
    }
}

其实是为了以后 cell上方palyerView的时候控制相应暂停或者停止或者其他操作的行为.

点击状态栏滑动到顶部
我们如何监听状态栏的事件?

我们当然可以设置TableView自动滑动到顶部.但是，我们怎么拦截下来这个事件去把我们相关页码置0

虽然我们能实现自动滑动TableView到顶部但是我们拦截不到顶部状态栏点击的事件,在这个事件调用的地方把当前页码置0.

监听点击状态栏事件
这里使用的是在AppDelegate 中复写 touchesBagan:方法

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [super touchesBegan:touches withEvent:event];
    
    //当触摸状态栏的时候发送触摸通知 这样控制器就收到了点击事件
    CGPoint touchLocation = [[[event allTouches] anyObject] locationInView:self.window];
    CGRect statusBarFrame = [UIApplication sharedApplication].statusBarFrame;
    if (CGRectContainsPoint(statusBarFrame, touchLocation)) {
        [[NSNotificationCenter defaultCenter] postNotificationName:StatusBarTouchBeginNotification object:nil];
    }
}

在短视频app搭建时，我们判断点击区域是否在状态栏范围内,是的话我们发送通知.

在我们用到TableView的VC里面注册这个通知,然后置0.

#pragma mark -
#pragma mark - event response 所有触发的事件响应 按钮、通知、分段控件等
- (void)statusBarTouchBegin {
    _currentIndex = 0; //KVO
}

这里我们置0处理.
这里处理的方式简单粗暴，以上是简单实现了短视频app搭建时，仿抖音的上下滑。

本文转载自网络，转载仅为分享干货知识，如有侵权欢迎联系云豹科技进行删除处理
原文链接：https://www.sunyazhou.com/2018/11/AwemeTopBottomScrollDemo/#%E6%8A%80%E6%9C%AF%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86

码农公寓

相关文章