前言
抖音App做的短視頻 上下滑動 的技術實現, 今天寫了個demo,方便學習技術技巧和記錄知識,
技術實現原理
- 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);
- 初始化的時候,TableView放在屏幕外邊.
- contentInset 顯示內容的內邊距, 以此是
上,左,下,右, 上邊距 距離整好屏幕高度,底部 是 頂部邊距(屏幕高度的 3倍) 方便滑動, 左右分別頂到兩邊 搞定.
我畫個圖演示一下.
看到這張圖 大家也許 已經明白了，最核心的地方是控制 TableView的上下邊距,上邊距留夠一個屏幕高度,下邊距留夠下滑3屏左右的緩沖.
說一下用到的技巧
創建tableView很簡單 如果理解不了 可以下載文章末尾demo
有個小技巧是 如何做到 上下滑動 能夠完整的 滑動到對應位置 整好 占滿屏幕類似 開啟了UIScrollView的 pagingEnabled.
實現滑動的代理方法
首先需要聲明一個當前滑動頁碼的成員變量
@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:[NSIndexPathindexPathForRow:self.currentIndex inSection:0] atScrollPosition:UITableViewScrollPositionTop animated:NO];
} completion:^(BOOL finished) {
//UITableView可以響應其他滑動手勢
scrollView.panGestureRecognizer.enabled = YES;
}];
});
}
這里的
50實際上是你能允許滑動的最大觸發區間.可以自己下載demo玩一下就知道了.
基于滑動區間 做 加減 當前頁碼控制.然后 做個簡單的UIView動畫.
注意: 開始動畫的時候最好不要相應pan手勢,結束動畫的時候再恢復回去,這樣可以避免一些不必要的收拾滑動引起的問題.
為什么要滑動頁碼self.currentIndex為什么要滑動頁碼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];
}
}
demo中有這段代碼 其實是為了以后 cell上方palyerView的時候 控制相應暫?；蛘咄Ｖ?或者其他操作的行為. 這里后期我們完善
點擊狀態欄滑動到頂部
我們如何監聽狀態欄的事件?
我們當然可以設置TableView自動滑動到頂部.但是 我們怎么攔截下來這個事件去把我們 相關頁碼 置0
為什么置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];
}
}
在這里我們判斷點擊區域是否在狀態欄范圍內,是的話我們發送通知.
在我們用到TableView的VC里面注冊這個通知,然后 置0.
#pragma mark -
#pragma mark - event response 所有觸發的事件響應 按鈕、通知、分段控件等
- (void)statusBarTouchBegin {
_currentIndex = 0; //KVO
}
這里我們置0處理.
這里處理的方式簡單粗暴,你有更好的實現方式可以底部評論,非常感謝.
總結
以上是簡單實現了抖音的上下滑,如果需要抖音上下滑 Demo，可以加iOS高級技術交流群：937194184，獲取Demo,以及更多iOS學習資料
轉載：原文地址
