開始用Swift開發(fā)iOS 10 - 12 豐富Detail View和定制化Navigation Bar

上一篇開始用Swift開發(fā)iOS 10 - 11 面向?qū)ο缶幊探榻B對(duì)代碼做了一點(diǎn)修改，這一篇來(lái)豐富一下詳情頁(yè)和定制化Navigation Bar。

重新設(shè)計(jì)詳細(xì)頁(yè)面

  • 選中Main.storyboard，刪除Image View和三個(gè)Label。

  • 添加Table View，修改其大小為整個(gè)View，并且添加一些約束。設(shè)置prototype cells為1；table view cell的identifier為Cell，row height為36。

    向Detail View Controller中添加一個(gè)Table View

  • 在table view的頭部添加一個(gè)image view，給變其高度為300，寬度為View的寬度。


  • 連接image view和RestaurantDetailViewController中的restaurantImageView接口。

  • 修改Image View的content mode為 Aspect Fit，并勾選Clip to Bounds

定制 Prototype Cell

  • 增加兩個(gè)label，分別命名為Field，Value ，字體修改成自己想要的。把它們組成一個(gè)Stack View。

  • 為Stack View添加一些約束。
    在cell中垂直居中；Trailing Space 和 Leading Space都為零。


用Ctrl-drag從FieldLabel到ValueLabel，選擇Equal Widths，生成一個(gè)FieldLabel與ValueLabel寬度相同的約束。修改Multiplier值為0.5，就是FieldLabel的寬度是ValueLabel的一半。

  • 新建RestaurantDetailTableViewCell類文件，繼承至UITableViewCell。添加兩個(gè)接口，并關(guān)聯(lián)上面的兩個(gè)Label。
@IBOutlet var fieldLabel:UILabel!
@IBOutlet var valueLabel:UILabel!

更新 RestaurantDetailViewController

  • 實(shí)現(xiàn)UITableViewDataSource和UITableViewDelegate:
    class RestaurantDetailViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

  • 實(shí)現(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中添加一個(gè)接口變量，并關(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è)置成其他深顏色做對(duì)比），運(yùn)行后不是整個(gè)table view都變色。


    這是因?yàn)椋恳粋€(gè)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的樣式

通過(guò)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的返回按鈕是一個(gè)<和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è)置整個(gè)app的Navigation Bar都會(huì)隱藏。如果只想在restaurant table view controller中隱藏，在detail view中不隱藏，就需要在兩個(gè)控制器的viewDidLoad分別設(shè)置：navigationController?.hidesBarsOnSwipe = true 和 navigationController?.hidesBarsOnSwipe = false 。

  • 運(yùn)行反復(fù)測(cè)試后發(fā)現(xiàn)兩個(gè)問(wèn)題：

    1. 當(dāng)從detail view返回后，restaurant table view controller的 Navigation Bar不能隱藏。
    2. 當(dāng)restaurant table view controller的 Navigation Bar隱藏后進(jìn)入detail view后， Navigation Bar消失不能再顯示。

首先明確兩個(gè)控制器中的navigationController屬性指的是同一個(gè)Navigation Controller ，viewDidLoad方法是view第一次加載時(shí)調(diào)用，之后就不再調(diào)用了。 也就是說(shuō)當(dāng)從detail view返回，hidesBarsOnSwipe已經(jīng)被設(shè)置為false，而到restaurant table view controller的viewDidLoad不再調(diào)用，所以Navigation Bar不能再隱藏。

解決辦法是使用viewWillAppear，這個(gè)方法是在視圖每一次顯示時(shí)調(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中添加一個(gè)key為View controller-based status bar appearance，值為NO。然后application(_:didFinishLaunchingWithOptions:)中添加：UIApplication.shared.statusBarStyle = .lightContent。

代碼

Beginning-iOS-Programming-with-Swift

說(shuō)明

此文是學(xué)習(xí)appcode網(wǎng)站出的一本書 《Beginning iOS 10 Programming with Swift》 的一篇記錄

系列文章目錄

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,229評(píng)論 4贊 61
  • 屬于你自己的待辦清單app（Your own to-do app） To-do list（待辦清單）app是App...
    Billionfan閱讀 3,313評(píng)論 11贊 10
  • 工作的時(shí)候工作 玩耍的時(shí)候玩耍 這是自律的基本準(zhǔn)則 西奧多·阿多諾（Theodor Adorno,1903-196...
    問(wèn)丨無(wú)心閱讀 416評(píng)論 0贊 0
  • 人一但遇到一些困難，就會(huì)想到逃跑。特別是在你夜晚躺在床上，腦子就會(huì)短路，會(huì)胡思亂想。想到的是都是計(jì)劃逃脫，策...
    老B哥閱讀 365評(píng)論 0贊 0
  • 今天是端午節(jié)，我們回家看望姥姥，中午要做飯的時(shí)候，姥姥說(shuō)煎茄盒兒吃。兒子突然說(shuō):“媽媽，讓我來(lái)，我想嘗試一下。”我...
    黃鑫媽媽閱讀 379評(píng)論 0贊 0