前言

抖音App做的短視頻 上下滑動(dòng) 的技術(shù)實(shí)現(xiàn), 今天寫了個(gè)demo,方便學(xué)習(xí)技術(shù)技巧和記錄知識(shí),

技術(shù)實(shí)現(xiàn)原理

• UITableView

其實(shí)就是一個(gè)UITableView改變上下顯示范圍. talk is cheap show me the code

我說(shuō)話不繞彎子,代碼如下 實(shí)現(xiàn)起來(lái)非常簡(jiǎn)單

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

1. 初始化的時(shí)候,TableView放在屏幕外邊.
2. contentInset 顯示內(nèi)容的內(nèi)邊距, 以此是 上, 左, 下, 右, 上邊距 距離整好屏幕高度,底部 是 頂部邊距(屏幕高度的 3倍) 方便滑動(dòng), 左右分別頂?shù)絻蛇?搞定.

我畫個(gè)圖演示一下.

看到這張圖 大家也許 已經(jīng)明白了，最核心的地方是控制 TableView的上下邊距,上邊距留夠一個(gè)屏幕高度,下邊距留夠下滑3屏左右的緩沖.

說(shuō)一下用到的技巧

創(chuàng)建tableView很簡(jiǎn)單 如果理解不了 可以下載文章末尾demo

有個(gè)小技巧是 如何做到 上下滑動(dòng) 能夠完整的 滑動(dòng)到對(duì)應(yīng)位置 整好 占滿屏幕類似 開(kāi)啟了UIScrollView的 pagingEnabled.

實(shí)現(xiàn)滑動(dòng)的代理方法

首先需要聲明一個(gè)當(dāng)前滑動(dòng)頁(yè)碼的成員變量

@property (nonatomic, assign) NSInteger  currentIndex;

然后滑動(dòng)代理停止的時(shí)候 判斷一下

#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禁止響應(yīng)其他滑動(dòng)手勢(shì)
        scrollView.panGestureRecognizer.enabled = NO;

        if(translatedPoint.y < -50 && self.currentIndex < (kDataSourceCount - 1)) {
            self.currentIndex ++;   //向下滑動(dòng)索引遞增
        }
        if(translatedPoint.y > 50 && self.currentIndex > 0) {
            self.currentIndex --;   //向上滑動(dòng)索引遞減
        }
        [UIView animateWithDuration:0.15
                              delay:0.0                           
                          options:UIViewAnimationOptionCurveEaseOut animations:^{
                                //UITableView滑動(dòng)到指定cell
                                [self.tableView scrollToRowAtIndexPath:[NSIndexPathindexPathForRow:self.currentIndex inSection:0] atScrollPosition:UITableViewScrollPositionTop animated:NO];
                            } completion:^(BOOL finished) {
                                //UITableView可以響應(yīng)其他滑動(dòng)手勢(shì)
                scrollView.panGestureRecognizer.enabled = YES;
                            }];
    });
}

這里的 50 實(shí)際上是你能允許滑動(dòng)的最大觸發(fā)區(qū)間.可以自己下載demo玩一下就知道了.

基于滑動(dòng)區(qū)間 做 加減 當(dāng)前頁(yè)碼控制.然后 做個(gè)簡(jiǎn)單的UIView動(dòng)畫.

注意: 開(kāi)始動(dòng)畫的時(shí)候最好不要相應(yīng)pan手勢(shì),結(jié)束動(dòng)畫的時(shí)候再恢復(fù)回去,這樣可以避免一些不必要的收拾滑動(dòng)引起的問(wèn)題.

為什么要滑動(dòng)頁(yè)碼self.currentIndex為什么要滑動(dòng)頁(yè)碼self.currentIndex

因?yàn)槲覀円肒VO 來(lái)實(shí)現(xiàn) 頁(yè)面變動(dòng)驅(qū)動(dòng)滑動(dòng)的動(dòng)畫

在 viewDidLoad:方法中 我們有個(gè)setupView:方法中 有下段代碼

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

是的我們要自己監(jiān)聽(tīng)自己的成員變量去搞些事情.

//觀察currentIndex變化
-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context {
    if ([keyPath isEqualToString:@"currentIndex"]) {
        //獲取當(dāng)前顯示的cell
        AwemeListCell *cell = [self.tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:_currentIndex inSection:0]];
        __weak typeof (cell) wcell = cell;
        __weak typeof (self) wself = self;
        //用cell控制相關(guān)視頻播放
    } else {
        return [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
    }
}

demo中有這段代碼 其實(shí)是為了以后 cell上方palyerView的時(shí)候 控制相應(yīng)暫?；蛘咄Ｖ?或者其他操作的行為. 這里后期我們完善

點(diǎn)擊狀態(tài)欄滑動(dòng)到頂部

我們?nèi)绾伪O(jiān)聽(tīng)狀態(tài)欄的事件?

我們當(dāng)然可以設(shè)置TableView自動(dòng)滑動(dòng)到頂部.但是 我們?cè)趺磾r截下來(lái)這個(gè)事件去把我們 相關(guān)頁(yè)碼 置0

為什么置0呢?看下 下面這張圖

雖然我們能實(shí)現(xiàn) 自動(dòng)滑動(dòng)TableView到頂部 但是 我們攔截不到頂部狀態(tài)欄點(diǎn)擊的事件,在這個(gè)事件調(diào)用的地方 把當(dāng)前頁(yè)碼置0.

監(jiān)聽(tīng)點(diǎn)擊狀態(tài)欄事件

這里使用的是在AppDelegate 中 復(fù)寫 touchesBagan:方法

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [super touchesBegan:touches withEvent:event];

    //當(dāng)觸摸狀態(tài)欄的時(shí)候發(fā)送觸摸通知 這樣控制器就收到了點(diǎn)擊事件
    CGPoint touchLocation = [[[event allTouches] anyObject] locationInView:self.window];
    CGRect statusBarFrame = [UIApplication sharedApplication].statusBarFrame;
    if (CGRectContainsPoint(statusBarFrame, touchLocation)) {
        [[NSNotificationCenter defaultCenter] postNotificationName:StatusBarTouchBeginNotification object:nil];
    }
}

在這里我們判斷點(diǎn)擊區(qū)域是否在狀態(tài)欄范圍內(nèi),是的話我們發(fā)送通知.

在我們用到TableView的VC里面注冊(cè)這個(gè)通知,然后 置0.

#pragma mark -
#pragma mark - event response 所有觸發(fā)的事件響應(yīng) 按鈕、通知、分段控件等
- (void)statusBarTouchBegin {
    _currentIndex = 0; //KVO
}

這里我們置0處理.

這里處理的方式簡(jiǎn)單粗暴,你有更好的實(shí)現(xiàn)方式可以底部評(píng)論,非常感謝.

總結(jié)

以上是簡(jiǎn)單實(shí)現(xiàn)了抖音的上下滑,如果需要抖音上下滑 Demo，可以加iOS高級(jí)技術(shù)交流群：937194184，獲取Demo,以及更多iOS學(xué)習(xí)資料

轉(zhuǎn)載：原文地址