文章分享至我的個人技術部落格: https://cainluo.github.io/15101116434794.html
隨著蘋果爸爸越來越多尺寸的裝置釋出, 還有iOS設計的改變, 特別是在iOS 11之後, 比大更大的導航欄, 然後再滾動的時候可以改變大小等等操作.
但這些問題都不是什麼問題, 就如同在WWDC 2017一樣, 蘋果爸爸在跟我們開發者展示一樣東西, 也是他一直想我們去使用的東西, 那就是自動佈局.
隨著什麼10.5英寸, 5.8英寸, 12.9英寸這些裝置的釋出, 讓我們開發者在適配多個尺寸的時候也越來越麻煩了, 但隨著使用自動佈局的釋出可以讓我們開發者更加註重App的業務上的開發, 再也不用去計算這個差多少, 那個差多少, 旋轉一下又怎麼處理.
這裡我們就使用一個簡單的小專案來搗鼓就好了.
轉載宣告:如需要轉載該文章, 請聯絡作者, 並且註明出處, 以及不能擅自修改本文.
更大的標題
在iOS 11裡, 最明顯的變化就是導航欄裡多了一個大標題:
這裡我們可以通過設定UINavigationBar的一個BOOL值屬性來決定是否顯示這個大標題:
@property (nonatomic, readwrite, assign) BOOL prefersLargeTitles;
複製程式碼那如果你是在Storyboard上的話, 你也可以在UINavigationController上的UINavigationBar設定這個屬性, 勾上就是為顯示大標題, 不勾上就不顯示.
雖然prefersLargeTitles是開啟大標題的主開關, 但在每一個控制器裡, 我們都可以每個控制器裡的UINavigationItem來顯示是否顯示大標題, 或者是普通標題, 這裡共有三種顯示型別:
typedef NS_ENUM(NSInteger, UINavigationItemLargeTitleDisplayMode) {
UINavigationItemLargeTitleDisplayModeAutomatic,
UINavigationItemLargeTitleDisplayModeAlways,
UINavigationItemLargeTitleDisplayModeNever,
} NS_SWIFT_NAME(UINavigationItem.LargeTitleDisplayMode);
複製程式碼要使用這個屬性呢, 我們得提前把prefersLargeTitles大標題屬性設定為YES, 然後才能去搗鼓上面的三種顯示模式, 預設為Automatic, 我們可以通過這個來設定控制器是否需要顯示大標題啦~
當然如果你不想每個控制器都寫一遍, 那你可以自己用RunTime寫個Method Swizzling, 或者是自己封裝一個RootController, 一個ChildController, 這樣子區分也可以:
搜尋控制器
而第二個變化就是在UINavigationController裡整合了UISearchController, 雖然UISearchController並不是什麼新的東西, 但在iOS 11之後, 我們可以將UINavigationItem的searchController屬性設定為UISearchController.
UISearchController *searchController = [[UISearchController alloc] initWithSearchResultsController:nil];
self.navigationItem.searchController = searchController;
self.navigationItem.hidesSearchBarWhenScrolling = YES;
複製程式碼這裡還有一個屬性叫做hidesSearchBarWhenScrolling, 如果設定為YES的話, 那麼在操作的時候, 就會根據滑動來隱藏這個searchController, 如果設定為NO, 就一直顯示著啦, 這個屬性預設是為YES.
安全區域
相信iOS 11釋出的時候, 很多人都有一個黑人問號的表情, 安全區域(Safe area)是個什麼鬼.
其實早在iOS 7出來的時候就有兩個屬性topLayoutGuide和bottomLayoutGuide, 這兩個屬性用於自動佈局, 由於在iOS 7的時候引入了半透明的概念, 如果我們用UITableView這類控制元件佈局的話, 那麼在UINavigationBar和UITabBar的背後會顯示內容.
而我們設定了topLayoutGuide和bottomLayoutGuide就不會有這個問題了, 但遺憾的是, 這兩個屬性是屬於Controller而不是屬於UIView, 為了解決這個問題, 蘋果爸爸搗鼓了一個新的東西, 就是現在的安全區域, 一個名為safeAreaLayoutGuide的東西, 是屬於UIVIew的.
@property(nonatomic,readonly,strong) UILayoutGuide *safeAreaLayoutGuide;
複製程式碼safeAreaLayoutGuide很適合我們在安全區域裡建立約束, 這樣子我們就可以非常簡單的適配各式各樣的機型, 比如強調安全區域的iPhone X.
如果我們只是想要測量一下這個安全區域, 那麼safeAreaInsets就會給我們返回一些值.
typedef struct UIEdgeInsets {
CGFloat top, left, bottom, right;
} UIEdgeInsets;
複製程式碼如果我們想知道這些值是在什麼時候改變的, 我們可以通過系統提供的兩個API:
// UIView的API
- (void)safeAreaInsetsDidChange;
// UIViewController
- (void)viewSafeAreaInsetsDidChange;
複製程式碼如果我們不去修改這個安全區域的話, 我們從safeAreaInsets獲得的值都是為0, 如果我們手動去修改的話, 就可以給動一動additionalSafeAreaInsets這個屬性:
self.additionalSafeAreaInsets = UIEdgeInsetsMake(100, 50, 0, 0);
複製程式碼然後在看看效果:
如果你是使用storyboard的話, 你可以隨便點選一個控制元件或者是控制器, 然後檢視是否勾上了Use Safe Area Layout Guides, 如果勾上了的話, 那麼Xcode就會將在之前在頂部和底部的佈局約束自動轉換到安全區域中.
但有一個情況是需要自己手動的搗鼓的, 這個時候我們就要取消Use Safe Area Layout Guides, 然後再手動佈局, 並且把之前相對於安全區域的約束雙擊, 然後設定為SuperView:
注意: 如果我們之前對
topLayoutGuide和bottomLayoutGuide設定了約束, 而這個時候我們把Use Safe Area Layout Guides勾掉, 那麼就會和剛剛說的那樣,UINavigationBar和UITabBar的背後會顯示內容, 如果我們要限制一下檢視到頂部的話, 我們應該在檢視的topAnchor和topLayoutGuide.bottomAnchor新增一個約束, 但是在iOS 11中, 我們可以在topAnchor和safeAreaLayoutGuide.topAnchor之間新增一個約束就哦了.
PS:
topLayoutGuide指示狀態列和導航欄覆蓋的區域.
safeAreaLayoutGuide指示狀態列和導航欄未覆蓋的區域
邊距
Margins也有一些新的變化, 比如有些屬性被棄用了:
被代替:
@property (nonatomic) UIEdgeInsets layoutMargins;
複製程式碼代替的屬性:
@property (nonatomic) NSDirectionalEdgeInsets directionalLayoutMargins;
複製程式碼新的directionalLayoutMargins是允許改變閱讀方向, 用了leading和trailing代替了left和right, 雖然仍然是用layoutMarginsGuide
當我們設定directionalLayoutMargins的時候, 它的值是會被新增到systemMinimumLayoutMargins中, 用來確定檢視的實際邊距, 如果我們不想要系統的最小邊距, 我們可以把viewRespectsSystemMinimumLayoutMargins設定為NO就可以了.
最後一點補充的一個屬性為:
@property (nonatomic) BOOL insetsLayoutMarginsFromSafeArea;
複製程式碼這個屬性如果為YES, 那麼我們需要佈局的檢視邊距就相對於安全區域, 如果設定為NO, 那我們需要佈局的檢視邊距就相對於其他檢視的邊距, 預設為YES.
滾動檢視們
在iOS 11之前, 如果我們要對UIScrollView使用自動佈局, 我們需要寫一些邏輯來確定是約束UIScrollView的滾動檢視, 還是它的內容區域, 有時候在新增約束的時就會容易發生約束錯誤的情況, 比如在使用Storyboard佈局.
但在iOS 11時, 為了解決這個問題, 蘋果爸爸給UIScrollView新增了兩個約束屬性:
@property(nonatomic,readonly,strong) UILayoutGuide *contentLayoutGuide;
@property(nonatomic,readonly,strong) UILayoutGuide *frameLayoutGuide;
複製程式碼這兩個屬性可以讓我們給UIScrollView新增約束時更加的精準, 但兩個屬性對於使用Storyboard的開發者來講應該不是一件好訊息, 因為這兩個東西只能在程式碼中使用.
除了上面兩個屬性歪, 還有另一個東西會影響到UIScrollView內容區域:
@property(nonatomic,assign) BOOL automaticallyAdjustsScrollViewInsets;
複製程式碼這個屬性預設為YES, 有時候我們的檢視不會顯示在UINavigationBar的底部就是這個屬性搞的鬼, 把它設定為NO就好了.
但慶幸的是, 在iOS 11這個屬性被幹掉了, 系統也不再自動去設定UIScrollView的內容, 現在UIScrollView的內容插入調整是從安全區域和我們在contentInset設定的值計算得出, 由以下屬性控制, 暫時共有四種控制方式:
@property(nonatomic) UIScrollViewContentInsetAdjustmentBehavior contentInsetAdjustmentBehavior;
typedef NS_ENUM(NSInteger, UIScrollViewContentInsetAdjustmentBehavior) {
UIScrollViewContentInsetAdjustmentAutomatic,
UIScrollViewContentInsetAdjustmentScrollableAxes,
UIScrollViewContentInsetAdjustmentNever,
UIScrollViewContentInsetAdjustmentAlways,
} API_AVAILABLE(ios(11.0),tvos(11.0));
複製程式碼Demo
為了更加好理解, 這裡展示一個Demo, 使用Storyboard加程式碼去實現.
ScrollView的佈局:
UIImageView的佈局:
TipsView的佈局:
PS: 如果你的約束感覺不對的話, 只要雙擊約束, 就可以進入到裡面去修改了.
這裡的程式碼也不難, 主要就是針對TipsView和ScrollView的佈局:
CGFloat scrollIndicatorMargin = 8;
self.tipsView.layer.cornerRadius = 8;
[self.tipsView.leadingAnchor constraintEqualToAnchor:self.scrollView.frameLayoutGuide.leadingAnchor
constant:scrollIndicatorMargin].active = YES;
[self.tipsView.trailingAnchor constraintEqualToAnchor:self.scrollView.frameLayoutGuide.trailingAnchor
constant:-scrollIndicatorMargin].active = YES;
[self.tipsView.bottomAnchor constraintEqualToAnchor:self.scrollView.frameLayoutGuide.bottomAnchor
constant:-scrollIndicatorMargin].active = YES;
self.additionalSafeAreaInsets = UIEdgeInsetsMake(0,
0,
self.tipsView.frame.size.height + scrollIndicatorMargin,
scrollIndicatorMargin);
self.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
複製程式碼如果想更詳細的檢視約束, 可以自行開啟Demo慢慢研究哈~.
自適應的Cells
在iOS 7推出的時候, UITableView就有一個屬性叫做:
@property (nonatomic) CGFloat estimatedRowHeight;
複製程式碼我們可以通過設定為UITableViewAutomaticDimension, 再給Cell的內部檢視做好適配的約束, 那麼Cell就可以自適應了.
但這些都是需要我們自己手動去適配, 在iOS 11時, 這個東西已經不需要我們去寫了, 預設就是UITableViewAutomaticDimension.
而且這個屬性不單單只是對普通的Cell有用, 包括SectionHeader和SectionFooter同樣都有效, 如果你不需要的話, 可以手動把estimatedRowHeight設定為0.
如果你的專案是使用比較老的Xcode, 並且是使用Storyboard搗鼓的話, 你可以開啟對應的Storyboard找到UITableView, 然後找到對應的屬性, 勾上Automatic:
但是大規模的使用自動佈局會造成一個效能上的問題, 這個之前也說過了, 那要怎麼做呢? 我們可以把estimatedRowHeight設定為大概要顯示多高的數值, 然後確定好Cell內的所有約束, 這樣子UITableView的效能就會得到改善, 當然最好的方式還是使用非同步載入, 或者是高度快取之類的, 這些資料的話, 大家可以自行去百度搜搜.
重新整理控制器
如果我們給對應的UITableViewController新增UIRefreshControl的話, 那麼它會自動載入到UINavigationBar中:
程式碼也是很簡單:
self.tableView.refreshControl = [[UIRefreshControl alloc] init];
[self.tableView.refreshControl addTarget:self
action:@selector(refreshControllerAction)
forControlEvents:UIControlEventValueChanged];
複製程式碼- (void)refreshControllerAction {
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[self.tableView.refreshControl endRefreshing];
});
}
複製程式碼UITableVIew的分割線
我們都知道在iOS 7的時候, 蘋果爸爸就給UITableView的分割線新增了一些偏移, 但那時候只能通過separatorInset去設定, 但這種設定太過死板缺少靈活性.
在iOS 11之後, 蘋果爸爸又新增了一個屬性:
@property (nonatomic) UITableViewSeparatorInsetReference separatorInsetReference;
typedef NS_ENUM(NSInteger, UITableViewSeparatorInsetReference) {
UITableViewSeparatorInsetFromCellEdges,
UITableViewSeparatorInsetFromAutomaticInsets
} API_AVAILABLE(ios(11.0), tvos(11.0));
複製程式碼- UITableViewSeparatorInsetFromCellEdges: 預設值, 如果使用該屬性的話, 分割線的起始座標為
Cell的邊緣值, 也就是0. - UITableViewSeparatorInsetFromAutomaticInsets: 如果使用該屬性的話, 分割線的起始座標會帶上預設值, 比如左邊的偏移為15.
堆疊檢視Stack Views
我們都知道了在iOS 9的時候釋出了一個靈活佈局的堆疊檢視UIStackViews, 有了它我們就不需要管理大量的約束.
但有一些場景還是沒有適應到了, 現在就可以解決這個問題了, 在iOS 11時, 蘋果爸爸給它增加了更多的特性, 比如我們在多個檢視裡, 有一個檢視比較特殊, 要離別的地方比較遠, 之前是不可實現的, 現在可以了, 讓我們來看看吧:
詳細的約束佈局就麻煩大家去工程裡看看吧, 這裡就不多說了, 直接看程式碼:
[UIViewPropertyAnimator runningPropertyAnimatorWithDuration:0.5
delay:0
options:UIViewAnimationOptionCurveEaseInOut
animations:^{
if (self.action) {
[self.stackView setCustomSpacing:self.customSpacing
afterView:self.sunImageView];
} else {
[self.stackView setCustomSpacing:0
afterView:self.sunImageView];
}
self.action = !self.action;
} completion:nil];
複製程式碼向量圖
在以前的Xcode版本里, 如果我們要使用向量圖, 那麼Xcode和iOS系統會將這個向量圖在編譯的時候自動生成不同大小的圖片.
而在Xcode 9中, 我們可以勾選一個東西, 告訴系統保留向量資料:
這樣子的話, 當我們或者是其他使用者在輔助功能裡開啟的大字號字型時, 我們就可以通過設定UIImageView的一個屬性來保證可以正常顯示:
@property (nonatomic) BOOL adjustsImageSizeForAccessibilityContentSizeCategory;
複製程式碼在Demo裡, 我只設定了一個圖示的屬性, 所以這個圖示是正常顯示, 而另外兩個是不正常的:
這個屬性可以在Storyboard找到, 也可以在程式碼裡實現, 只要是UIImageView就ok了.
自定義導航欄檢視
最後就是補充一下給UINavigationBar或者是UIToolbar新增自定義檢視了.
我們還是拿剛剛的那個太陽, 星星和月亮的來舉例子, 這裡只要一個UIImageView和一個UILabel就好了.
這個佈局和我們去自定義UITableViewCell差不多, 直接用約束搗鼓就完事, 而且還特別的簡單:
執行的話, 我們可以看到是正常顯示的, 但發現會有一個白色的背景色, 我們只要找到對應的UIView, 然後把顏色清理掉就ok了.
總結
在iOS 11有一些會影響到自動佈局的變化, 還有些新增的屬性來幫助我們開發者更便捷的開發, 如果你覺得光看文章還不夠的話, 可以去看看原汁原味的WWDC 2017的介紹:
- WWDC17 Session 204 – Updating Your App for iOS 11 apple.co/2syu3Tt
工程
https://github.com/CainRun/iOS-11-Characteristic/tree/master/3.Layout