前言
一直一來都在 研究抖音App做的短視頻 上下滑動 的技術(shù)實現(xiàn), 今天寫了個demo,方便學(xué)習(xí)技術(shù)技巧和記錄知識,
技術(shù)實現(xiàn)原理
- UITableView
其實就是一個UITableView改變上下顯示范圍. talk is cheap show me the code
我說話不繞彎子,代碼如下 實現(xiàn)起來非常簡單
_tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, -SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT * 5)];
_tableView.contentInset = UIEdgeInsetsMake(SCREEN_HEIGHT, 0, SCREEN_HEIGHT * 3, 0);
初始化的時候,TableView放在屏幕外邊.
contentInset 顯示內(nèi)容的內(nèi)邊距, 以此是 上, 左, 下, 右, 上邊距 距離整好屏幕高度,底部 是 頂部邊距(屏幕高度的 3倍) 方便滑動, 左右分別頂?shù)絻蛇?搞定.
我畫個圖演示一下.
看到這張圖 大家也許 已經(jīng)明白了捉蚤，最核心的地方是控制 TableView的上下邊距,上邊距留夠一個屏幕高度,下邊距留夠下滑3屏左右的緩沖.
說一下用到的技巧
創(chuàng)建tableView很簡單 如果理解不了 可以下載文章末尾demo
有個小技巧是 如何做到 上下滑動 能夠完整的 滑動到對應(yīng)位置 整好 占滿屏幕類似 開啟了UIScrollView的 pagingEnabled.
實現(xiàn)滑動的代理方法
首先需要聲明一個當(dāng)前滑動頁碼的成員變量
@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禁止響應(yīng)其他滑動手勢
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可以響應(yīng)其他滑動手勢
scrollView.panGestureRecognizer.enabled = YES;
}];
});
}
這里的 50 實際上是你能允許滑動的最大觸發(fā)區(qū)間.可以自己下載demo玩一下就知道了.
基于滑動區(qū)間 做 加減 當(dāng)前頁碼控制.然后 做個簡單的UIView動畫.
注意: 開始動畫的時候最好不要相應(yīng)pan手勢,結(jié)束動畫的時候再恢復(fù)回去,這樣可以避免一些不必要的收拾滑動引起的問題
為什么要滑動頁碼self.currentIndex
因為我們要用KVO 來實現(xiàn) 頁面變動驅(qū)動滑動的動畫
在 viewDidLoad:方法中 我們有個setupView:方法中 有下段代碼
[self addObserver:self forKeyPath:@"currentIndex" options:NSKeyValueObservingOptionInitial|NSKeyValueObservingOptionNew context:nil];
是的我們要自己監(jiān)聽自己的成員變量去搞些事情.
//觀察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中有這段代碼 其實是為了以后 cell上方palyerView的時候 控制相應(yīng)暫停或者停止 或者其他操作的行為. 這里后期我們完善
點擊狀態(tài)欄滑動到頂部
我們?nèi)绾伪O(jiān)聽狀態(tài)欄的事件?
我們當(dāng)然可以設(shè)置TableView自動滑動到頂部.但是 我們怎么攔截下來這個事件去把我們 相關(guān)頁碼 置0
為什么置0呢?看下 下面這張圖
雖然我們能實現(xiàn) 自動滑動TableView到頂部 但是 我們攔截不到頂部狀態(tài)欄點擊的事件,在這個事件調(diào)用的地方 把當(dāng)前頁碼置0.
監(jiān)聽點擊狀態(tài)欄事件
這里使用的是在AppDelegate 中 復(fù)寫 touchesBagan:方法
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[super touchesBegan:touches withEvent:event];
//當(dāng)觸摸狀態(tài)欄的時候發(fā)送觸摸通知 這樣控制器就收到了點擊事件
CGPoint touchLocation = [[[event allTouches] anyObject] locationInView:self.window];
CGRect statusBarFrame = [UIApplication sharedApplication].statusBarFrame;
if (CGRectContainsPoint(statusBarFrame, touchLocation)) {
[[NSNotificationCenter defaultCenter] postNotificationName:StatusBarTouchBeginNotification object:nil];
}
}
在這里我們判斷點擊區(qū)域是否在狀態(tài)欄范圍內(nèi),是的話我們發(fā)送通知.
在我們用到TableView的VC里面注冊這個通知,然后 置0.
#pragma mark -
#pragma mark - event response 所有觸發(fā)的事件響應(yīng) 按鈕刹泄、通知外里、分段控件等
- (void)statusBarTouchBegin {
_currentIndex = 0; //KVO
}
這里我們置0處理.
這里處理的方式簡單粗暴,你有更好的實現(xiàn)方式可以底部評論,非常感謝.
總結(jié)
以上是簡單實現(xiàn)了抖音的上下滑,demo在下方, 下一期給大家演示更多細節(jié),如果可能的話,最終搞出個視頻放cell上 實現(xiàn)整個上下滑控制過程視頻暫停 播放 停止等等,因為如果完整的實現(xiàn)抖音,需要很長的代碼量,為了讓大家一起學(xué)習(xí),我把每個細節(jié)拆成一小節(jié).單獨寫成文章討論和學(xué)習(xí).
收錄：原文地址
