在 iOS11 中蘋果推出了新的設計風格 Complexion Reduction,其中一個很直觀的特點就是大標題的使用:

在過去的 iOS 版本中很多 App 就采用了這種設計方式,但由于 iOS 沒有提供相關的方法,只能通過開發(fā)者自行實現(xiàn)。而在 iOS11 中,iOS 提供了統(tǒng)一的實現(xiàn)方法即 Large Title,我們可以很輕松地實現(xiàn)上述效果
1 相關屬性
iOS11 中實現(xiàn)大標題非常簡單,只需要設置兩個屬性即可:
// UINavigationBar
var prefersLargeTitles: Bool
// UINavigationItem
var largeTitleDisplayMode: UINavigationItem.LargeTitleDisplayMode
largeTitleDisplayMode 的取值為一個枚舉值,取值如下:
case always
case automatic
case never
當設置 prefersLargeTitles = true 且 largeTitleDisplayMode = .automatic 就會有如下圖所示的效果,默認顯示大標題,而當屏幕向上滑動的時候標題縮小恢復到過去的小標題樣式

順便還有個好消息,這么簡單的兩個屬性當然已經(jīng)集成在 storyboard 中了!

2 集成搜索框
iOS8 中為 UITableView 內(nèi)嵌了搜索框 UISearchController,但加到 UITableView 中的搜索框與大標題配合的時候就很復雜,需要兩個組件間通信狀態(tài)并同步動畫。因此 iOS11 中選擇將搜索框加入到 UINavigationItem 中,這樣就實現(xiàn)了統(tǒng)一的動畫。
而加入搜索框的方法也很簡單,UINagivationItem 中新添加了兩個屬性:
var searchController: UISearchController?
var hidesSearchBarWhenScrolling: Bool
// 使用
self.navigationItem.searchController = UISearchController(searchResultsController: nil)
self.navigationItem.hidesSearchBarWhenScrolling = true
其中 hideSearchBarWhenScrolling 屬性可以設置下面試圖滾動的時候時候隱藏搜索框, true 和 false 時效果分別如下:

3 視圖棧中的使用
iOS11 中的大標題,比如在設置中的使用,只在主界面中用了大標題,即 UINavigationController 的 rootViewController 中。當點擊某個設置進入下級視圖的時候直接是以小標題的樣式展示
借助 iOS11 中方便的 API,我們只需要在后面的視圖中設置 largeTitleDisplayMode = .never 即可

4 參考資料
https://developer.apple.com/videos/play/wwdc2017/201/ What's new in cocoa touch
https://developer.apple.com/documentation/uikit/uinavigationbar UINavigationBar 的改動