上一篇開始用Swift開發(fā)iOS 10 - 11 面向?qū)ο缶幊探榻B對代碼做了一點(diǎn)修改迹辐，這一篇來豐富一下詳情頁和定制化Navigation Bar。
重新設(shè)計詳細(xì)頁面
選中
Main.storyboard弓乙，刪除Image View和三個Label。-
添加Table View，修改其大小為整個View，并且添加一些約束蕊肥。設(shè)置
prototype cells為1；table view cell的identifier為Cell，row height為36壁却。
向Detail View Controller中添加一個Table View -
在table view的頭部添加一個image view批狱，給變其高度為300，寬度為View的寬度展东。
連接image view和
RestaurantDetailViewController中的restaurantImageView接口赔硫。修改Image View的
content mode為 Aspect Fit，并勾選Clip to Bounds
定制 Prototype Cell
- 增加兩個label盐肃，分別命名為Field爪膊，Value ，字體修改成自己想要的砸王。把它們組成一個Stack View推盛。
-
為Stack View添加一些約束。
在cell中垂直居中处硬；Trailing Space 和 Leading Space都為零小槐。
用Ctrl-drag從FieldLabel到ValueLabel，選擇Equal Widths荷辕，生成一個FieldLabel與ValueLabel寬度相同的約束。修改Multiplier值為0.5件豌，就是FieldLabel的寬度是ValueLabel的一半疮方。
- 新建
RestaurantDetailTableViewCell類文件，繼承至UITableViewCell茧彤。添加兩個接口骡显，并關(guān)聯(lián)上面的兩個Label。
@IBOutlet var fieldLabel:UILabel!
@IBOutlet var valueLabel:UILabel!
更新 RestaurantDetailViewController
實現(xiàn)
UITableViewDataSource和UITableViewDelegate:
class RestaurantDetailViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {實現(xiàn)
UITableViewDataSource的相關(guān)方法：
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 4
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! RestaurantDetailTableViewCell
// Configure the cell...
switch indexPath.row {
case 0:
cell.fieldLabel.text = "Name"
cell.valueLabel.text = restaurant.name
case 1:
cell.fieldLabel.text = "Type"
cell.valueLabel.text = restaurant.type
case 2:
cell.fieldLabel.text = "Location"
cell.valueLabel.text = restaurant.location
case 3:
cell.fieldLabel.text = "Been here"
cell.valueLabel.text = (restaurant.isVisited) ? "Yes, I've been herebefore" : "No"
default:
cell.fieldLabel.text = ""
cell.valueLabel.text = ""
}
cell.backgroundColor = UIColor.clear
return cell
}
- 把table view的
delegate和dataSource接口設(shè)置成Restaurant Detail View Controller 曾掂。
定制table view 的樣式
在
RestaurantDetailViewController中添加一個接口變量惫谤，并關(guān)聯(lián)storyboard中的table view。
@IBOutlet var tableView:UITableView!-
設(shè)置table view的背景顏色珠洗，在
viewDidLoad中添加:
tableView.backgroundColor = UIColor(red: 240.0/255.0, green: 240.0/255.0, blue: 240.0/255.0, alpha: 0.2)
新加的顏色是亮灰色（和白色相近溜歪，可以設(shè)置成其他深顏色做對比），運(yùn)行后不是整個table view都變色许蓖。
這是因為蝴猪，每一個cell都是重新添加的，cell的背景顏色還是默認(rèn)的白色膊爪，覆蓋了table view的背景顏色自阱，要在tableView(_:cellForRowAt:)的return之前添加：
cell.backgroundColor = UIColor.clear 移除table view中空cell的分割線，在
viewDidLoad中添加:
tableView.tableFooterView = UIView(frame: CGRect.zero)改變分割線的顏色米酬， 在
viewDidLoad中添加:
tableView.separatorColor = UIColor(red: 240.0/255.0, green: 240.0/255.0, blue: 240.0/255.0, alpha: 0.8)
定制Navigation Bar的樣式
通過UINavigationBar.appearance()修改Navigation Bar的樣式沛豌。
Navigation Bar的樣式修改是整體修改的，所以修改Navigation Bar的樣式代碼要寫在application(_:didFinishLaunchingWithOptions:)方法中赃额。
- 修改navigation bar的背景顏色：
UINavigationBar.appearance().barTintColor = UIColor(red: 216.0/255.0, green: 74.0/255.0, blue: 32.0/255.0, alpha: 1.0) - 修改title樣式：
if let barFont = UIFont(name: "Avenir-Light", size: 24.0) {
UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName:UIColor.white, NSFontAttributeName:barFont]
}
Avenir-Light是字體名稱加派，詳細(xì)的iOS字體可查 http://iosfonts.com 叫确。
-
tintColor控制Navigation items和bar button items的顏色
UINavigationBar.appearance().tintColor = UIColor.white
目前，Navigation bar的返回按鈕是一個<和Food Pin哼丈，想刪除Food Pin启妹，需要修改RestaurantTableViewController的backBarButtonItem屬性。
在 RestaurantTableViewController的viewDidLoad中添加：
navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)
為 detail view 的 Navigation bar 添加title醉旦，在 RestaurantDetailViewController的viewDidLoad中添加：
title = restaurant.name
隱藏Navigation Bar
- 自從iOS 8后饶米，Navigation Bar可以在不同情況下隱藏，在storyboard中選擇Navigation Controller修改车胡。（
On Swipe是向上滑）
但這種設(shè)置整個app的Navigation Bar都會隱藏檬输。如果只想在restaurant table view controller中隱藏，在detail view中不隱藏匈棘，就需要在兩個控制器的
viewDidLoad分別設(shè)置：navigationController?.hidesBarsOnSwipe = true和navigationController?.hidesBarsOnSwipe = false丧慈。-
運(yùn)行反復(fù)測試后發(fā)現(xiàn)兩個問題：
- 當(dāng)從detail view返回后，restaurant table view controller的 Navigation Bar不能隱藏主卫。
- 當(dāng)restaurant table view controller的 Navigation Bar隱藏后進(jìn)入detail view后逃默， Navigation Bar消失不能再顯示。
首先明確兩個控制器中的navigationController屬性指的是同一個Navigation Controller 簇搅，viewDidLoad方法是view第一次加載時調(diào)用完域，之后就不再調(diào)用了。 也就是說當(dāng)從detail view返回瘩将，hidesBarsOnSwipe已經(jīng)被設(shè)置為false吟税，而到restaurant table view controller的viewDidLoad不再調(diào)用，所以Navigation Bar不能再隱藏姿现。
解決辦法是使用viewWillAppear肠仪，這個方法是在視圖每一次顯示時調(diào)用。
在RestaurantTableViewController中添加：
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
navigationController?.hidesBarsOnSwipe = true
}
在RestaurantDetailViewController中添加：
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
navigationController?.hidesBarsOnSwipe = false
navigationController?.setNavigationBarHidden(false, animated: true)
}
修改Status Bar樣式
app中Status Bar的默認(rèn)樣式是黑色备典。
在Info.plist中添加一個key為View controller-based status bar appearance异旧，值為NO。然后application(_:didFinishLaunchingWithOptions:)中添加：UIApplication.shared.statusBarStyle = .lightContent熊经。
代碼
Beginning-iOS-Programming-with-Swift
說明
此文是學(xué)習(xí)appcode網(wǎng)站出的一本書 《Beginning iOS 10 Programming with Swift》 的一篇記錄
系列文章目錄
- 開始用Swift開發(fā)iOS 10 - 1 前言
- 開始用Swift開發(fā)iOS 10 - 2 Hello World泽艘！第一個Swift APP
- 開始用Swift開發(fā)iOS 10 - 3 介紹Auto Layout
- 開始用Swift開發(fā)iOS 10 - 4 用Stack View設(shè)計UI
- [開始用Swift開發(fā)iOS 10 - 5 原型的介紹]
- 開始用Swift開發(fā)iOS 10 - 6 創(chuàng)建簡單的Table Based App
- 開始用Swift開發(fā)iOS 10 - 7 定制Table Views
- 開始用Swift開發(fā)iOS 10 - 8 Table View和UIAlertController的交互
- 開始用Swift開發(fā)iOS 10 - 9 Table Row的刪除, UITableViewRowAction和UIActivityViewController的使用
- 開始用Swift開發(fā)iOS 10 - 10 Navigation Controller的介紹和Segue
- 開始用Swift開發(fā)iOS 10 - 11 面向?qū)ο缶幊探榻B
