顯示 navigation bar & tool bar 的 navigation controller

開發 iOS App 時，我們時常看到上方 navigation bar，下方 tool bar 的設計，比方下圖 Calendar App 的畫面。

設定 navigation controller 顯示 navigation bar & tool bar

自己手動加入 navigation bar & tool bar 太辛苦了。透過 navigation controller 的幫忙，我們可以快速在畫面上加入 navigation bar & tool bar。

• 從 Interface Builder

點選 navigation controller，勾選 Bar Visibility 的 Shows Navigation Bar & Shows Toolbar。

• 從程式

設定 navigation controller 的 property，將 isNavigationBarHidden & isToolbarHidden 設為 false。

tool bar 的內容

在 tool bar 裡我們可加入 bar button item，fixed space bar button item & flexible space bar button item。

bar button item 主要用於顯示文字或圖片，fixed space bar button item & flexible space bar button item 則用於調整元件在 bar 上的位置。

以下我們親手實驗看看吧。

storyboard 的畫面設計如下。

範例 1: 在 tool bar 的左邊顯示 button

• 從 Interface Builder

將 bar button item 加到 table view 的畫面，此時它將自動加到 tool bar，長在 Toolbar Items 底下。

bar button item 預設將由左而右排列，因此它將排在 tool bar 的左邊。

• 從程式

設定 view controller 的 property toolbarItems，它的型別為 [UIBarButtonItem]。

class TableViewController: UITableViewController {

   override func viewDidLoad() {
        super.viewDidLoad()
        
        toolbarItems = [
            UIBarButtonItem(title: "Edit", primaryAction: UIAction(handler: { action in
            }))
        ]
       
    }

範例 2: 在 tool bar 的右邊顯示 button

我們可加入 fixed space bar button item & flexible space bar button item 調整元件的位置。

• 從 Interface Builder

如下圖所示，我們在 bar button item 之前加入 flexible space bar button item，所以 bar button item 將被擠到右邊。

• 從程式

產生 UIBarButtonItem 時，參數 barButtonSystemItem 傳入 .flexibleSpace 可產生 flexible space bar button item。

class TableViewController: UITableViewController {

   override func viewDidLoad() {
        super.viewDidLoad()
        
        toolbarItems = [
            UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil),
            UIBarButtonItem(title: "Edit", primaryAction: UIAction(handler: { action in
            }))
        ]
       
    }

範例 3: 在 tool bar 顯示三個 button

模仿 Calendar App 的 tool bar，搭配兩個 flexible space bar button item。

• 從 Interface Builder

• 從程式。

class TableViewController: UITableViewController {

   override func viewDidLoad() {
        super.viewDidLoad()
        
        toolbarItems = [
            UIBarButtonItem(title: "Today", primaryAction: UIAction(handler: { action in
            })),
            UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil),
            UIBarButtonItem(title: "Calendars", primaryAction: UIAction(handler: { action in
            })),
            UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil),
            UIBarButtonItem(title: "Inbox", primaryAction: UIAction(handler: { action in
            }))
        ]
       
    }