前言
一直一來都在 研究抖音App做的短視訊 上下滑動 的技術實作, 今天寫了個demo,友善學習技術技巧和記錄知識,
技術實作原理
- UITableView
其實就是一個UITableView改變上下顯示範圍. talk is cheap show me the code
我說話不繞彎子,代碼如下 實作起來非常簡單
1 2 3 4
- 初始化的時候,TableView放在螢幕外邊.
- contentInset 顯示内容的内邊距, 以此是
上
左
下
右
我畫個圖示範一下.
看到這張圖 大家也許 已經明白了，最核心的地方是控制 TableView的上下邊距,上邊距留夠一個螢幕高度,下邊距留夠下滑3屏左右的緩沖.
說一下用到的技巧
建立tableView很簡單 如果了解不了 可以下載下傳文章末尾demo
有個小技巧是 如何做到 上下滑動 能夠完整的 滑動到對應位置 整好 占滿螢幕類似 開啟了UIScrollView的
pagingEnabled
.
實作滑動的代理方法
首先需要聲明一個目前滑動頁碼的成員變量
1
然後滑動代理停止的時候 判斷一下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
這裡的 50
基于滑動區間 做 加減 目前頁碼控制.然後 做個簡單的UIView動畫.
注意: 開始動畫的時候最好不要相應pan手勢,結束動畫的時候再恢複回去,這樣可以避免一些不必要的收拾滑動引起的問題.
為什麼要滑動頁碼 self.currentIndex
self.currentIndex
因為我們要用KVO 來實作 頁面變動驅動滑動的動畫
在 viewDidLoad:方法中 我們有個setupView:方法中 有下段代碼
1
是的我們要自己監聽自己的成員變量去搞些事情.
1 2 3 4 5 6 7 8 9 10 11 12 13
demo中有這段代碼 其實是為了以後 cell上方palyerView的時候 控制相應暫停或者停止 或者其他操作的行為. 這裡後期我們完善
點選狀态欄滑動到頂部
我們如何監聽狀态欄的事件?
我們當然可以設定TableView自動滑動到頂部.但是 我們怎麼攔截下來這個事件去把我們 相關頁碼
置為什麼置0呢?看下 下面這張圖
雖然我們能實作 自動滑動TableView到頂部 但是 我們攔截不到頂部狀态欄點選的事件,在這個事件調用的地方 把目前頁碼置
.
監聽點選狀态欄事件
這裡使用的是在AppDelegate 中 複寫 touchesBagan:方法
1 2 3 4 5 6 7 8 9 10 11
在這裡我們判斷點選區域是否在狀态欄範圍内,是的話我們發送通知.
在我們用到TableView的VC裡面注冊這個通知,然後 置
.
1 2 3 4 5 6
這裡我們置
處理.
這裡處理的方式簡單粗暴,你有更好的實作方式可以底部評論,非常感謝.
總結
以上是簡單實作了抖音的上下滑,demo在下方, 下一期給大家示範更多細節,如果可能的話,最終搞出個視訊放cell上 實作整個上下滑控制過程視訊暫停 播放 停止等等,因為如果完整的實作抖音,需要很長的代碼量,為了讓大家一起學習,我把每個細節拆成一小節.單獨寫成文章讨論和學習
轉載：iOS抖音的上下滑實作 | 邁騰大隊長 (sunyazhou.com).