iOS-怒懟面試官:百行代碼高仿抖音(Tik Tok)

首先說一下:大家應(yīng)該都知道現(xiàn)在面試官太裝逼了。我認(rèn)識一位從360出來的人說:一個alloc你都要讓我轉(zhuǎn)成rutime.再成c函數(shù)盗迟,然后椇#空間惭蹂,葉子函數(shù)再去問匯編,太屎了割粮。

前陣子面試的時候也是如此盾碗,后來再問到一些蘋果官方提供的一些控件時卻居然一點都不知道。

比如有一個面試官問:一個業(yè)務(wù)上要求左右滑動時切換頁面舀瓢,怎么做廷雅?

我的回答是:左右滑動的模塊有幾個就寫幾個基于UIViewController的類,然后這些模塊由一個UIPageViewController去控制京髓。

我說了各種各樣的好處之后航缀,面試官還不以為意,說我用一個UIScrollView去控制不行嗎堰怨?設(shè)置他的frame就行了芥玉。

我曾經(jīng)在這篇文章說過時至今日使用frame的缺點太突出了,我個人不建議备图。另一方面灿巧,如此多的代碼寫在一個VC當(dāng)中,那么業(yè)務(wù)代碼耦合的就太厲害了揽涮。而且我也在這篇文章里說過蘋果在UIKit里出來一個Container的概念抠藕。

之后面試官又問:如果我要是在之后的需求當(dāng)中再加上上下滑動呢?類似抖音那種蒋困。

我的回答便是:使用UIPageViewController更容易實現(xiàn)盾似。效果如下:

代碼運(yùn)行之后的效果圖1

代碼運(yùn)行之后的效果圖2

鑒于Xcode自帶的"Debug view Hierarchy"不太好用,大家湊合著看這個效果雪标。

抖音的效果是:視頻列表頁可以上下滑動以切換視頻源零院,同時視頻列表往右滑動則到搜索頁,往左側(cè)滑動則到up主的用戶詳情頁村刨。

接下來我就說說我的思路(以Swift語言來實現(xiàn))门粪。
第一步:創(chuàng)建一個新工程,默認(rèn)rootVC是工程中的ViewController

第二步:基于UIViewController分別創(chuàng)建三個VC烹困,為SearchViewController(搜索頁),VideosViewController(視頻列表頁)和UserInfoViewController(up主的用戶信息頁)乾吻。如下圖:

第三步:在ViewController里創(chuàng)建UIPageViewController髓梅,并且實現(xiàn)切換三個模塊拟蜻。代碼如下:

override func viewDidLoad() {
        super.viewDidLoad()
        
        // 創(chuàng)建搜索頁,視頻列表頁和用戶詳情頁
        let searchVC : SearchViewController = SearchViewController()
        let videosVC : VideosViewController = VideosViewController()
        let userInfoVC : UserInfoViewController = UserInfoViewController()
        self.viewControllers = [searchVC, videosVC, userInfoVC]
        
        // 創(chuàng)建UIPageViewController
        let pageVC : UIPageViewController = UIPageViewController.init(transitionStyle: UIPageViewController.TransitionStyle.scroll, navigationOrientation: UIPageViewController.NavigationOrientation.horizontal, options: nil)
        pageVC.setViewControllers([videosVC], direction: UIPageViewController.NavigationDirection.forward, animated: false, completion: nil)
        pageVC.dataSource = self
        pageVC.delegate = self
        
        // 將pageVC添加到當(dāng)前VC
        self.addChild(pageVC)
        self.view.addSubview(pageVC.view)
        pageVC.view.frame = self.view.bounds
        pageVC.didMove(toParent: self)
    }
    // UIPageViewController必須的兩個代理方法枯饿,這兩個代理方法控制三個頁面的先后順序
 func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
        
        var index : Int = self.viewControllers.index(of: viewController) ?? NSNotFound
        if (index == 0) || (index == NSNotFound) {
            return nil
        }
        
        index -= 1
        
        return self.viewControllers[index]
    }
    
    func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
        var index : Int = self.viewControllers.index(of: viewController) ?? NSNotFound
        if (index == 0) || (index == NSNotFound) {
            return nil
        }
        
        index += 1
        if index >= self.viewControllers.count {
            return nil
        }
        
        return self.viewControllers[index]
    }

經(jīng)過以上三步就簡單的實現(xiàn)了三個頁面的左右切換酝锅。那么視頻列表的上下切換也是基于UIPageViewController的,步驟如下:
第四步:基于UIViewController創(chuàng)建一個VideoViewController奢方,這個類用來播放視頻

第五步:在VideosViewController(視頻列表頁)里創(chuàng)建UIPageViewController搔扁,實現(xiàn)上下滑動,而且是無限滑動蟋字。跟第三步類似稿蹲,但是參數(shù)設(shè)置不一樣。代碼如下:

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        self.view.backgroundColor = UIColor.blue
        
        // 當(dāng)前類的功能描述
        let desLabel : UILabel = UILabel(frame: self.view.bounds)
        desLabel.numberOfLines = 0
        desLabel.textColor = UIColor.white
        desLabel.textAlignment = NSTextAlignment.center
        desLabel.text = "抖音視頻列表頁\n往右滑到搜索頁鹊奖,往左滑到用戶詳情頁\n上下滑切換視頻"
        self.view.addSubview(desLabel)
        
        // 創(chuàng)建 UIPageViewController
        let pageVC : UIPageViewController = UIPageViewController.init(transitionStyle: UIPageViewController.TransitionStyle.scroll, navigationOrientation: UIPageViewController.NavigationOrientation.vertical, options: nil)
        let videoVC : VideoViewController = VideoViewController()
        videoVC.videoIndex = self.currentIndex
        pageVC.setViewControllers([videoVC], direction: UIPageViewController.NavigationDirection.forward, animated: false, completion: nil)
        pageVC.dataSource = self
        pageVC.delegate = self
        
        // 將pageVC添加到當(dāng)前VC
        self.addChild(pageVC)
        self.view.addSubview(pageVC.view)
        pageVC.view.frame = self.view.bounds
        pageVC.didMove(toParent: self)
    }
    
    // MARK: - UIPageViewControllerDataSource
    func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
        if self.currentIndex == 1 {
            return nil;
        }
        
        let videoVC : VideoViewController = VideoViewController()
        videoVC.videoIndex = self.currentIndex - 1
        videoVC.view.backgroundColor = UIColor.white
        return videoVC;
    }
    
    func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
        let videoVC : VideoViewController = VideoViewController()
        videoVC.videoIndex = self.currentIndex + 1
        videoVC.view.backgroundColor = UIColor.white
        return videoVC;
    }

    // MARK: - UIPageViewControllerDelegate
    func pageViewController(_ pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) {
        // 簡單的動畫效果
        let videoController : VideoViewController = pageViewController.viewControllers?[0] as! VideoViewController
        self.currentIndex = videoController.videoIndex!
        UIView.animate(withDuration: 2.0) {
            videoController.view.backgroundColor = UIColor.clear
        }
    }

效果圖如下:

仿抖音效果

此工程我已上傳到Github苛聘,你的star是我的動力。

最后打個廣告忠聚,個人第三方庫:
UDUserDefaultsModel:NSUserDefaults的改進(jìn)方案
YIIFMDB:直接操作Model進(jìn)行增刪改查设哗,數(shù)學(xué)運(yùn)算等,且sql語句易于管理

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末两蟀,一起剝皮案震驚了整個濱河市网梢,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌赂毯,老刑警劉巖战虏,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異欢瞪,居然都是意外死亡活烙,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進(jìn)店門遣鼓,熙熙樓的掌柜王于貴愁眉苦臉地迎上來啸盏,“玉大人,你說我怎么就攤上這事骑祟』嘏常” “怎么了?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵次企,是天一觀的道長怯晕。 經(jīng)常有香客問我,道長缸棵,這世上最難降的妖魔是什么舟茶? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上吧凉,老公的妹妹穿的比我還像新娘隧出。我一直安慰自己,他們只是感情好阀捅,可當(dāng)我...
    茶點故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布胀瞪。 她就那樣靜靜地躺著,像睡著了一般饲鄙。 火紅的嫁衣襯著肌膚如雪凄诞。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天忍级,我揣著相機(jī)與錄音帆谍,去河邊找鬼。 笑死颤练,一個胖子當(dāng)著我的面吹牛既忆,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播嗦玖,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼患雇,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了宇挫?” 一聲冷哼從身側(cè)響起苛吱,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎器瘪,沒想到半個月后翠储,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡橡疼,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年援所,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片欣除。...
    茶點故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡住拭,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出历帚,到底是詐尸還是另有隱情滔岳,我是刑警寧澤,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布挽牢,位于F島的核電站谱煤,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏禽拔。R本人自食惡果不足惜刘离,卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一室叉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧硫惕,春花似錦太惠、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽梁只。三九已至缚柳,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間搪锣,已是汗流浹背秋忙。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留构舟,地道東北人灰追。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像狗超,于是被迫代替她去往敵國和親弹澎。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,786評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 在夜晚努咐,你并不看我苦蒿, 我感到燥熱又冰冷, 像一顆被暴曬的石頭渗稍, 丟棄在空空的戈壁—— 這是春天里一個寂寞的夜晚佩迟, ...
    三水林楓閱讀 622評論 14 32
  • 一年一度全國矚目的高考終于結(jié)束了报强。 回顧來路,感恩有你拱燃,點滴溫暖秉溉。 在高考期間,為了助力莘莘學(xué)子們勝利參加高考扼雏,獨...
    1d0ff747134a閱讀 359評論 4 8
  • 姓名:彭克軍 20180627【日精進(jìn)打卡第天】237天 【知~學(xué)習(xí)】 《六項精進(jìn)》共290遍 《大學(xué)》共295遍...
    彭克軍閱讀 97評論 0 0