iOS-怒怼面试官:百行代码高仿抖音(Tik Tok)

首先说一下:大家应该都知道现在面试官太装逼了。我认识一位从360出来的人说:一个alloc你都要让我转成rutime.再成c函数,然后栈空间,叶子函数再去问汇编,太屎了。

前阵子面试的时候也是如此,后来再问到一些苹果官方提供的一些控件时却居然一点都不知道。

比如有一个面试官问:一个业务上要求左右滑动时切换页面,怎么做?

我的回答是:左右滑动的模块有几个就写几个基于UIViewController的类,然后这些模块由一个UIPageViewController去控制。

我说了各种各样的好处之后,面试官还不以为意,说我用一个UIScrollView去控制不行吗?设置他的frame就行了。

我曾经在这篇文章说过时至今日使用frame的缺点太突出了,我个人不建议。另一方面,如此多的代码写在一个VC当中,那么业务代码耦合的就太厉害了。而且我也在这篇文章里说过苹果在UIKit里出来一个Container的概念。

之后面试官又问:如果我要是在之后的需求当中再加上上下滑动呢?类似抖音那种。

我的回答便是:使用UIPageViewController更容易实现。效果如下:

代码运行之后的效果图1

代码运行之后的效果图2

鉴于Xcode自带的"Debug view Hierarchy"不太好用,大家凑合着看这个效果。

抖音的效果是:视频列表页可以上下滑动以切换视频源,同时视频列表往右滑动则到搜索页,往左侧滑动则到up主的用户详情页。

接下来我就说说我的思路(以Swift语言来实现)。
第一步:创建一个新工程,默认rootVC是工程中的ViewController

第二步:基于UIViewController分别创建三个VC,为SearchViewController(搜索页),VideosViewController(视频列表页)和UserInfoViewController(up主的用户信息页)。如下图:

第三步:在ViewController里创建UIPageViewController,并且实现切换三个模块。代码如下:

override func viewDidLoad() {
        super.viewDidLoad()
        
        // 创建搜索页,视频列表页和用户详情页
        let searchVC : SearchViewController = SearchViewController()
        let videosVC : VideosViewController = VideosViewController()
        let userInfoVC : UserInfoViewController = UserInfoViewController()
        self.viewControllers = [searchVC, videosVC, userInfoVC]
        
        // 创建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添加到当前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]
    }

经过以上三步就简单的实现了三个页面的左右切换。那么视频列表的上下切换也是基于UIPageViewController的,步骤如下:
第四步:基于UIViewController创建一个VideoViewController,这个类用来播放视频

第五步:在VideosViewController(视频列表页)里创建UIPageViewController,实现上下滑动,而且是无限滑动。跟第三步类似,但是参数设置不一样。代码如下:

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        self.view.backgroundColor = UIColor.blue
        
        // 当前类的功能描述
        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)
        
        // 创建 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添加到当前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的改进方案
YIIFMDB:直接操作Model进行增删改查,数学运算等,且sql语句易于管理

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容

  • 在夜晚,你并不看我, 我感到燥热又冰冷, 像一颗被暴晒的石头, 丢弃在空空的戈壁—— 这是春天里一个寂寞的夜晚, ...
    三水林枫阅读 628评论 14 32
  • 一年一度全国瞩目的高考终于结束了。 回顾来路,感恩有你,点滴温暖。 在高考期间,为了助力莘莘学子们胜利参加高考,独...
    1d0ff747134a阅读 362评论 4 8
  • 姓名:彭克军 20180627【日精进打卡第天】237天 【知~学习】 《六项精进》共290遍 《大学》共295遍...
    彭克军阅读 99评论 0 0