在 iOS11 中蘋果推出了新的設(shè)計風(fēng)格 Complexion Reduction橘原,其中一個很直觀的特點就是大標題的使用:
在過去的 iOS 版本中很多 App 就采用了這種設(shè)計方式啸蜜,但由于 iOS 沒有提供相關(guān)的方法扫责,只能通過開發(fā)者自行實現(xiàn)。而在 iOS11 中,iOS 提供了統(tǒng)一的實現(xiàn)方法即 Large Title,我們可以很輕松地實現(xiàn)上述效果
1 相關(guān)屬性
iOS11 中實現(xiàn)大標題非常簡單,只需要設(shè)置兩個屬性即可:
// UINavigationBar
var prefersLargeTitles: Bool
// UINavigationItem
var largeTitleDisplayMode: UINavigationItem.LargeTitleDisplayMode
largeTitleDisplayMode 的取值為一個枚舉值吉嫩,取值如下:
case always
case automatic
case never
當設(shè)置 prefersLargeTitles = true
且 largeTitleDisplayMode = .automatic
就會有如下圖所示的效果,默認顯示大標題嗅定,而當屏幕向上滑動的時候標題縮小恢復(fù)到過去的小標題樣式
順便還有個好消息自娩,這么簡單的兩個屬性當然已經(jīng)集成在 storyboard 中了!
2 集成搜索框
iOS8 中為 UITableView 內(nèi)嵌了搜索框 UISearchController渠退,但加到 UITableView 中的搜索框與大標題配合的時候就很復(fù)雜忙迁,需要兩個組件間通信狀態(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
屬性可以設(shè)置下面試圖滾動的時候時候隱藏搜索框, true
和 false
時效果分別如下:
3 視圖棧中的使用
iOS11 中的大標題旱眯,比如在設(shè)置中的使用晨川,只在主界面中用了大標題,即 UINavigationController
的 rootViewController
中删豺。當點擊某個設(shè)置進入下級視圖的時候直接是以小標題的樣式展示
借助 iOS11 中方便的 API共虑,我們只需要在后面的視圖中設(shè)置 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 的改動