轉自我自己的 blog：Sources 開發日記三 （Repo頁面）
Code Reader 改名為 Sources
1.0 也已經上架，App Store: http://itunes.apple.com/app/id1125732186。
同時 Sources 也在 Github 上開源了，地址是：https://github.com/vulgur/Sources。
這篇寫展示 Repo 信息的頁面，也是 MVVM 應用最多的一個頁面。
Model
Model 用的依然是上一篇提到的 Repo 類，是在 SearchRepoViewControler 通過 segue 傳過來的。
extension SearchViewController: UITableViewDelegate {
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
let repo = viewModel.repos[indexPath.row]
let repoViewModel = RepoViewModel(repo: repo)
performSegueWithIdentifier("ShowRepo", sender: repoViewModel)
tableView.deselectRowAtIndexPath(indexPath, animated: true)
}
}
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
if segue.identifier == "ShowRepo" {
if let repoViewModel = sender {
let destVC = segue.destinationViewController as! RepoViewController
destVC.viewModel = repoViewModel as! RepoViewModel
}
}
}
View Model
作為 RepoViewController 的 view model, RepoViewModel 定義了所有需要和 Repo 綁定的屬性，并且通過 Repo 的實例來初始化。除此之外，上一篇說到 watchers 的獲取需要另一個 API，也就是 https://api.github.com/repos/{owner}/{repo}/subscribers，獲取 watchers 數量的方法也定義在這個 view model 中。
import Foundation
import Bond
import Alamofire
class RepoViewModel {
let avatarImageURLString = Observable("")
let name = Observable("")
let description = Observable("")
let stars = Observable(0)
let watchers = Observable(0)
let forks = Observable(0)
let owner = Observable(Owner())
let createdDate = Observable("")
let updatedDate = Observable("")
let language = Observable("")
let ownerName = Observable("")
let fullName = Observable("")
let size = Observable(0)
init(repo: Repo) {
avatarImageURLString.value = (repo.owner?.avatarURLString)!
name.value = repo.name ?? ""
description.value = repo.description ?? ""
stars.value = repo.starsCount ?? 0
watchers.value = repo.watchersCount ?? 0
forks.value = repo.forksCount ?? 0
owner.value = repo.owner!
createdDate.value = repo.createdDate ?? ""
updatedDate.value = repo.pushedDate ?? ""
language.value = repo.language ?? "Unknown"
ownerName.value = repo.owner!.name ?? ""
size.value = repo.size ?? 0
fullName.value = repo.fullName ?? ""
}
func fetchWatchers() {
let url = String(format: "https://api.github.com/repos/%@/%@/subscribers",
owner.value.name!, name.value)
print(url)
Alamofire.request(.GET, url)
.responseJSON { (response) in
if let watchers = response.result.value as? NSArray {
self.watchers.value = watchers.count
}
}
}
}
View
Repo 的 view 由兩部分組成：storyboard 和 RepoViewController。
Storyboard
這個頁面是目前項目里信息最多，布局也是最復雜的。以中間的按鈕為分界線，上半部分大量使用了 Stack View，下半部分用一個 Web View 來顯示 README 的內容。
因為這個頁面的高度是不確定的，所以所有控件都是放在一個 content view 中，而這個 content view 又是放在一個 scroll view 中，結構如下圖：
這個頁面里除了 web view，其余控件的高度都是確定的，想要確定整個 scroll view 的高度就需要確定這個 web view 的高度。我以前的做法，就是要在代碼中改變 scroll view 的 contentSize，不過按照蘋果給出的方法（https://developer.apple.com/library/ios/technotes/tn2154/_index.html）通過 Autolayout 就可以實現 scroll view 按照內容自動調整大小（不用管 scroll view 的 contentSize 了，但是 web view 的高度還是要計算的，這個下面會說。）。所以就是給 scroll view 添加四個約束，上下左右貼緊 root view。
再來看 content view 的約束：
除了設置了與 scroll view 的約束關系，還設置了和 root view 的約束關系，也就是寬和高。這個高度的約束設置成了 Remove at build time，因為這個高度在后面是要重新計算的，這里只是個 placeholder，不讓 storyboard 出警告。
View Controller
RepoViewController 里面主要還是做的就是通過 view model 綁定 UI 和設置 UI。
綁定 UI 就是把各個 UILabel 和 view model 中對應的屬性綁定，因為都只是在 UILabel 中顯示的 text，所以都是單向綁定：
private func bindViewModel() {
viewModel.name.bindTo(repoNameLabel.bnd_text)
viewModel.ownerName.bindTo(navigationItem.bnd_title)
viewModel.description.bindTo(repoDescriptionLabel.bnd_text)
viewModel.stars.map {"\($0)"}.bindTo(starsLabel.bnd_text)
viewModel.forks.map {"\($0)"}.bindTo(forksLabel.bnd_text)
viewModel.watchers.map {"\($0)"}.bindTo(watchersLabel.bnd_text)
viewModel.createdDate.map{ $0.componentsSeparatedByString("T").first }.bindTo(createdDateLabel.bnd_text)
viewModel.updatedDate.map{ $0.componentsSeparatedByString("T").first }.bindTo(updatedDateLabel.bnd_text)
viewModel.size.map { String(format: "%.2fMB" , Float($0)/1024) }.bindTo(sizeLabel.bnd_text)
viewModel.language.bindTo(languageLabel.bnd_text)
avatarImageView.kf_setImageWithURL(NSURL(string: viewModel.avatarImageURLString.value)!, placeholderImage: UIImage(named: "user_avatar"))
//RecentsManager.sharedManager.currentRepoName = viewModel.name.value
//RecentsManager.sharedManager.currentOwnerName = viewModel.ownerName.value
}
設置 UI 的工作中主要講講 web view 的高度是如何設置的（web view 內容的獲取以及展示放到后面和代碼頁面一起講）。
如何得到 UIWebView 加載完成后的高度，搜到的結果大多數通過JS解決的。但是我通過這個方法得到的高度不準確，總是要高于實際高度，而且如果內容越長得到的高度就越大于實際高度，導致頁面下方出現大片的空白。好在我搜到了一個方法完美解決了這個問題（就是這個問題中的最佳答案）：
extension RepoViewController: UIWebViewDelegate {
func webViewDidFinishLoad(webView: UIWebView) {
var frame = webView.frame
frame.size.height = 1
webView.frame = frame
let fitSize = webView.sizeThatFits(CGSizeZero)
frame.size = fitSize
webView.frame = frame
self.view.layoutIfNeeded()
let webViewHeight = frame.size.height
// let webViewHeight = (webView.stringByEvaluatingJavaScriptFromString("document.body.offsetHeight;")! as NSString).floatValue
// let webViewHeight = (webView.stringByEvaluatingJavaScriptFromString("document.body.scrollHeight")! as NSString).floatValue
// let webViewHeight = (webView.stringByEvaluatingJavaScriptFromString("document.height")! as NSString).floatValue
let contentViewHeight = CGFloat(webViewHeight) + webView.frame.origin.y
self.contentView.addConstraint(NSLayoutConstraint(item: self.contentView, attribute: .Height, relatedBy: NSLayoutRelation.GreaterThanOrEqual, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: contentViewHeight))
self.view.layoutIfNeeded()
EZLoadingActivity.hide()
}
}
這個方法看起來貌似奇技淫巧，sizeThatFits 這個方法的注釋是這么寫的：return 'best' size to fit given size. does not actually resize view. Default is return existing view size。我也不清楚為什么傳入 CGSizeZero 就會返回正確的大小，還請知情人士告知，謝謝！這段代碼中注釋的部分就是用JS來獲取高度的方法，這三句都不行。得到正確的高度后就可以設置 content view 的高度了，給 content view 添加一個高度的約束，這樣 scroll view 就可以自動調整 contentSize 了。
