开源项目——『看知乎』iOS 版

前言

前段时间无意中发现了看知乎，一个知乎答案和用户的精选站。网站开发者是知乎用户苏莉安，他写了个爬虫从知乎抓取数据，而且还提供了 API 文档。我大致看了下文档，感觉写个 iOS 客户端应该也挺不错的，于是就开始写了。

因为是个人项目，主要目的还是为了练手，所以我没有用任何第三方类库。网络请求、JSON 解析、异步图片加载等等全都是自己封装的，UI 布局主要是用 Storyboard 跟 AutoLayout 做的，开发语言采用 Swift。目前已经完成了大部分内容，花的时间不长，后续我还会添加一些功能，然后做一些优化，再加点注释。由于时间仓促，我也没有写测试用例，整个项目目前肯定还有很多不足的地方，有朋友发现什么 Bug 的话也欢迎留言告诉我。我在这边准备大概展示一下项目，然后挑几个我觉得比较值得讲的点讲一下。相信对大家多少应该有些帮助。

实现功能

文章推荐：

「看知乎」的答案推荐以文章为单位，每天在三个时段发布三篇，名字分别为昨日最新（yesterday）、近日热门（recent）和历史精华（archive），每篇推荐32~40个答案不等

客户端接受最近10篇推荐，点击单篇推荐会转到相应的答案列表，点击单个答案会转到相应的答案详情。

用户排名：

获取某项指标（赞同数、粉丝数）排名前30的用户列表，点击单个用户转到该用户详情页。

用户详情页（显示效果模仿简书个人用户界面）显示用户近期动态和高票答案，点击具体答案转到答案详情页。更多内容有待添加。

用户搜索，输入用户名或部分用户名直接搜索，搜索结果显示相关用户列表，点击单个用户转到该用户详情页。

项目展示

首页.gif
首页答案列表.gif
答案详情.gif
用户排行.gif
用户详情.gif
用户回答.gif
用户搜索.gif
排名方式.gif
项目结构.png

项目主要是分为两大模块，即首页模块（Home）和用户模块（TopUsers）。Global 目录中是我自己封装的几个简单类库和一些常量。

几个 Tips

用 Storyboard 快速设置 layer 层的属性

label.png

设置圆角、边框等属性是日常开发中几乎每天都要做的事情，譬如我们现在要实现如上这个带边框和圆角的 label，用代码我们可以这么写：

label.layer.cornerRadius = xxx
label.layer.borderColor = xxx
label.layer.borderWidth = xxx

但如果你是用 Storyboard（Storyboard 其实是个 xml 文件） 做布局的，你可能无法再容忍在你的逻辑代码中混入布局相关的代码，那用 Storyboard 怎么做呢？比较直接的是利用 Runtime：

Runtime Attributes.png

你可以在上面这个地方自己添加layer.cornerRadius等属性，设置相应的 Type 和 Value。但是这个方法有两个弊端，一是没有自动提示，输入属性名的时候容易输错，二是layer.borderColor这个属性需要的 Type 是CGColor，但这里却只能设置 UIColor，所以layer.borderColor这个属性是不能生效的。

最好的办法是利用extension和@IBInspectable来做：

extension UIView {
    @IBInspectable var cornerRadius: CGFloat {
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
        
        get {
            return layer.cornerRadius
        }
    }
    
    @IBInspectable var borderWidth: CGFloat {
        set {
            layer.borderWidth = newValue
        }
        get {
            return layer.borderWidth
        }
    }
    @IBInspectable var borderColor: UIColor? {
        set {
            layer.borderColor = newValue?.CGColor
        }
        get {
            return layer.borderColor != nil ? UIColor(CGColor: layer.borderColor!) : nil
        }
    }
}

标记为@IBInspectable的属性会显示在 Storyboard 上：

圆角 label.png

因为我把这几个属性扩展到了 UIView 上，所以所有继承自 UIView 的控件都可以在 Storyboard 上方便的设置这几个属性了。

实现简书式的用户个人页面

我的用户详情页面是模仿简书写的，总的来说就是头像会随页面上滑缩小（初始状态是半个头像在导航栏中，最后整个头像都到导航栏中），然后菜单项会停留在导航栏下方，点击菜单项，下面的 Cell 会显示相应的数据。

头像的缩放主要是改变宽高的约束和边角半径的大小（要使一个正方形变成圆形只需将其边角半径 cornerRadius 设置成边长的一半大小即可）：

//头像随页面滑动改变大小
func scrollViewDidScroll(scrollView: UIScrollView) {
    let offsetY = scrollView.contentOffset.y
    let headerHeight = tableHeader.frame.height
    guard offsetY < headerHeight else {
        avatarHeight.constant = avatarMaxRadius/2
        avatarWidth.constant = avatarMaxRadius/2
        avatarImageView.cornerRadius = avatarMaxCornerRadius/2
        return
    }
    
    let multiplier = offsetY/headerHeight
    //外接矩形最终长宽都减一半
    avatarHeight.constant = avatarMaxRadius - avatarMaxRadius/2 * multiplier
    avatarWidth.constant = avatarHeight.constant
    layoutAvatarImmediately()
    //圆角半径最终减一半
    avatarImageView.cornerRadius = avatarMaxCornerRadius - avatarMaxCornerRadius/2 * multiplier
}

func layoutAvatarImmediately() {
    avatarHeight.active = true
    avatarWidth.active = true
}

这边的avatarHeight和avatarWidth是从 Storyboard 拉过来的头像的宽高的约束。

至于点击菜单项显示不同数据的效果呢，乍一看跟我之前写过的多表视图有点像，但那个思路在这边是不太行得通的，因为列表上面的内容（菜单项、用户基本信息）都得进行滚动，如果按那个思路的话，同一维度（y 轴方向）我们要处理两个 TableView（或者一个 ScrollView 一个 TableView） 的滚动，这是不科学的。

所以这里我只用了一个 TableView，当选择不同的菜单项的时候，使用不同的数据源（UITableViewDataSource）：

lazy var userDynamicDataSource: UserDynamicDataSource = {
    let dataSource = UserDynamicDataSource()
    dataSource.userDynamicList = self.userDynamicList
    dataSource.name = self.userInfo.name
    dataSource.avatar = self.userInfo.avatar
    return dataSource
}()

lazy var topAnswerDataSource: TopAnswerDataSource = {
    let dataSource = TopAnswerDataSource()
    dataSource.topAnswerList = self.topAnswerList
    return dataSource
}()

对于点击菜单项之后改变颜色移动指示器滑条这些 UI 操作我都放在了 UserMenu 中来做，然后把跟 TableView 交互的操作委托给 Controller 来做：

weak var delegate: UserMenuDelegate?
func addMenuItemTarget() {
    [dynamicButton, answerButton, moreButton].forEach {
        $0.addTarget(self, action: "selectMenuItem:", forControlEvents: .TouchUpInside)
    }
}

func selectMenuItem(item: UIButton) {
    //将选中的 item 设为选中色，并将上一次选中的 item 恢复为未选中色
    item.setTitleColor(selectedColor, forState: .Normal)
    lastSelectedItem.setTitleColor(deselectedColor, forState: .Normal)
    lastSelectedItem = item
    
    //改变指示条的约束，使其水平中心点与选中 item 的水平中心点相同
    let newCenterX = NSLayoutConstraint(item: indicator, attribute: .CenterX, relatedBy: .Equal, toItem: item, attribute: .CenterX, multiplier: 1, constant: 0)
    indicatorCenterX.active = false
    indicatorCenterX = newCenterX
    indicatorCenterX.active = true
    
    //通知代理（通过 tag 初始化对应的菜单类型）
    delegate?.selectMenuItem(UserMenuItem(rawValue: item.tag)!)
}

UserMenuItem 是一个 enum，用来表示菜单项类型，它的 rawValue 跟几个菜单项 Button 的 tag 一一对应，也跟列表的 rowHeight对应:

enum UserMenuItem: Int {
    // rawValue 对应列表的 rowHeight
    case Dynamic = 100
    case Answer = 80
    case More = 0
}

这个 UserMenuDelegate 是自己定义的一个委托协议：

protocol UserMenuDelegate: class {
    func selectMenuItem(item: UserMenuItem)
}

Controller 实现这个协议，就可以获知点击了哪个菜单项，从而给 TableView 配置相应的数据源，rowHeight 可以直接通过 rawValue 拿到：

// MARK: - UserMenuDelegate
extension UserDetailViewController: UserMenuDelegate {
    func selectMenuItem(item: UserMenuItem) {
        guard userInfo != nil else { return }

        switch item {
        case .Dynamic:
            tableView.dataSource = userDynamicDataSource
            tableView.separatorStyle = .None
        case .Answer:
            tableView.dataSource = topAnswerDataSource
            tableView.separatorStyle = .SingleLine
        case .More:
            break
        }
        //通过菜单类型的 rawValue 取得列表的 rowHeight
        tableView.rowHeight = CGFloat(item.rawValue)
        tableView.reloadData()
    }
}

也谈谈 MVC 和 MVVM

MVC 是个非常经典的概念，它最早来自于 SmallTalk，四人帮的《设计模式》在引言中就介绍了 MVC——通过“订阅／通知”协议来分离 Model 和 View；View 使用 Controller 子类的实例来实现一个特定的响应策略。显然 SmallTalk 中的 MVC 是以 View 为中心的，Model 跟 Controller 原本都可以是 View 的一部分，只不过现在把数据部分分离出去成为 Model，把处理响应的逻辑分离出去作为 Controller。是不是觉得这跟你认识的 MVC 完全不一样？因为不知道什么时候起，有人认为 MVC 应该是由 Controller 作为 Model 和 View 的中介，Model 和 View 是不能通信的。于是 Controller 成了 MVC 的中心，这种思想也是 iOS 开发中的主流思想，斯坦福 iOS 公开课上白胡子老头放过一张解释 MVC 的图：

主流 MVC.png

从这张图中就可以看出 Controller 要做的事情实在太多了，如果是手写 UI 的话，还要在 Controller 中写很多布局相关的代码，非常难以维护。05年的时候微软为设计 WPF 而提出 MVVM 模式，主要思想是基于Model 和 View 的数据双向绑定，通过响应事件来处理用户的操作。于是有人提出在 iOS 中使用 MVVM，不过 Cocoa Touch 跟 WPF 是不一样的，所以大多数时候在 iOS 中的 MVVM 其实是 M－VM－V－C，也就是在 View 和 Model 之间加了个 ViewModel 用来处理数据绑定，目的主要就是给 Controller 分担点压力。

我觉得架构这方面来说，iOS 开发中最主要的矛盾其实就一个，Controller 的负担太重。所以我们其实不必执着于各种说法，只要想想目前我们的 Controller 都做了些什么：

  • UI 布局
  • 协调各个 View
  • 协调 View 和 Model
  • 处理 View 的响应
    ……

我们再来看看哪些是可以从 Controller 分离出来的:

  • UI 布局可以用 Storyboard 或者 Xib 做，要用纯代码写也最好用子类来定制某个视图的外观，组合视图的话用一个 UIView 的子类封装起来，不要在 Controller 去设置一堆 label 啊 button 啊然后各种 addSubview。
  • View 和 Model 之间的数据绑定，可以在 View 中设置一个以 Model 为参数的方法，Controller 中只要调用这个方法即可，具体的绑定逻辑写在 View 中。
  • TableView 的数据源如果只有一个，可以让 Controller 充当，如果有好多个，那就单独定义，然后将其实例组合到 Controller 中。
  • View 的响应，如果是 UI 相关的，譬如改变颜色位置大小等等，都可以放到 View 中自己搞定，但是一些数据相关的，或者需要跟其他 View 协调的，可以通过代理让 Controller 去处理。

我以『看知乎』项目中的代码为例来说明一下我自己比较喜欢的做法。首先，UI 布局全用 Storyboard 做，这样少了布局的代码，View 就很空了，然后定义一个 ViewModelType 协议：

protocol ViewModelType {
    typealias ModelType
    func bindModel(model: ModelType)
}

Swift 中没有范型协议，不能直接写protocol ViewModelType<T>,不过通过typealias限定参数类型的方式，也能达到范型协议的效果。

接下来，我们有一个 TopAnswerCell，已经用 Storyboard 布局完毕，把要用到的几个 View 的 outlet 拉到代码中，然后实现 ViewModelType 协议:

class TopAnswerCell: UITableViewCell, ViewModelType {
    
    @IBOutlet weak var titleLabel: UILabel!
    
    @IBOutlet weak var agreeLabel: UILabel!
    
    @IBOutlet weak var dateLabel: UILabel!
    
    func bindModel(model: TopAnswerModel) {
        titleLabel.text = model.title
        agreeLabel.text = "\(model.agree)"
        dateLabel.text = model.date
    }
}

这样我们在 TableViewDataSource 中只要直接调用 bindModel 就好了：

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier(CellReuseIdentifier.User) as! TopUserCell
    let index = indexPath.row
    cell.bindModel((cellModelList[index], index))
    
    return cell
}

以上是处理 Model 跟 View 的例子，至于处理响应的例子我之前已经举过了，就是模仿简书用户页面里用到的 UserMenu 的例子，点击菜单项后变色指示器滑动等操作都在 UserMenu 内部完成，而要跟 TableView 交互的部分则放到 Controller 中。多个数据源的情况上面也提过了，点击不同的菜单项就使用不同的数据源。

关于面向协议编程

Swift2之后可以用 extension 给协议方法或者属性加上一个默认实现了，这使得 Swift 可以用协议模拟 Ruby 中用 module 实现的 mixin 效果，也就是通过协议扩展某个类的功能。譬如我自定义了一个 RefreshControl：

class SimpleRefreshControl: UIRefreshControl {
    typealias Action = () -> ()
    
    var action: Action!
    
    init(action: Action) {
        super.init()
        
        self.action = action
        self.addTarget(self, action: "refresh", forControlEvents: UIControlEvents.ValueChanged)
    }
    
    func refresh() {
        self.action()
        delay(seconds: 1) {
            self.endRefreshing()
        }
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

它的构造器接受一个闭包，在刷新的时候会调用这个闭包，然后1秒后完成刷新。

我再定义一个协议：

protocol Refreshable: class {
    func getData()
    var simpleRefreshControl: SimpleRefreshControl { get }
}

extension Refreshable {
    var simpleRefreshControl: SimpleRefreshControl {
        return SimpleRefreshControl { [weak self] in
            self?.getData()
        }
    }
}

这样如果我有好几个 TableViewController 都要实现刷新功能，只要都实现Refreshable协议，然后定义各自的getData方法，再在 ViewDidLoad 中加上refreshControl = simpleRefreshControl这一句就行了。如果不使用这个协议，你就不得不重复写好多遍如下代码

SimpleRefreshControl { [weak self] in
    self?.getData()
}

这个例子代码不多，可能效果不是很明显。然而只要擅用这个技巧，绝对可以让你的代码精简很多，而且更加灵活，可读性也更高。

JSON Mapper

我自己实现了一个简陋的 JSON-Model Mapper，并不完善，不建议用在正式项目中，有兴趣的同学可以看看思路。

最后

其实还有一些想说的，但是篇幅已经太长了，而且现在也好晚了，所以具体的还是请大家自己看代码吧。

下载完整项目源码

觉得有用的话麻烦 Star 一个~有问题欢迎留言交流^ ^

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,425评论 4赞 361
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,058评论 1赞 291
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,186评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,848评论 0赞 204
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,249评论 3赞 286
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,554评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,830评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,536评论 0赞 197
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,239评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2赞 244
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,346评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,999评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2赞 271
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2赞 267

推荐阅读更多精彩内容

  • 《有道云笔记竞品分析报告》
    功能简介功能说明：有道云笔记，主打云笔记，云协作功能笔记类竞品：印象笔记、为知笔记协作类竞品：石墨文档、Teamb...
    花名古月阅读 4,710评论 2赞 13
  • 以为，一个可怕的思想瞬间。
    以为，一个可怕的思想瞬间。 总以为理想的大学，并不是真正读的大学。每个人的想法都很美好，很丰满，其实，他们忽视了现...
    攀枝花学院阅读 184评论 0赞 0
  • 0329晨读
    001 最了解自己的还是我们自己，有疑惑的时候除了咨询专家还是要聆听自己的内心。这还关系到是什么问题，如果是看病，...
    鹿蕾阅读 82评论 0赞 1