前言：

剛更新了iOS 11和Xcode 9，試了下iPhone X模擬器上跑公司的項目，發現項目在iPhone X這個大長臉上運行還存在很多適配問題。所以寫此文章記錄自己在適配iPhone X時所遇到的問題，也希望能幫助到需要幫助的同學們。如有問題也希望大家提出來，共同探討，共同進步。

關于iPhone X

北京時間的9月13日凌晨，美國當地時間的9月12日上午，蘋果在發布會上發布了四款產品，包括全新的Apple Watch Series 3，Apple TV 4K，iPhone 8/8 Plus，和全新iPhone X四款全新產品。其中X是數字10的意思，因此蘋果將其讀音讀作“iPhone Ten”。
應為有設備的圓角，傳感器區域（劉海），或用于訪問主屏幕的指示器(Home Indicator)原因，從iOS 11.0引入了UIView的safeArea(安全區)的概念，同時廢除了iOS 7 開始在 UIViewController中引入的 topLayoutGuide和 bottomLayoutGuide

safeArea區域.png

• 尺寸：1125px × 2436px(375pt × 812pt @3x)
• Tabbar：由49pt變為了83pt (加上底部留給Home Indicator的空白部分)。
• StatusBar：由20pt變為44pt
• Navigation：還是44pt

iPhone X 蘋果官方人機交互指南
iPhone X 蘋果官方人機交互指南 手動翻譯（由博客名：我的杯洗具翻譯的）

項目中遇到的適配問題：

一、動態計算statusbar + navigationBar高度

開發中我們需要知道statusbar 和 navigationBar高度用于計算界面中控件的位置，但是由于iPhone X有個大劉海使得statusbar的高度不同于之前的機型。這時候如果項目中的計算值是寫死話，就會出現適配問題。解決辦法是動態計算來適配不同的機型

    // 狀態欄(statusbar)
    CGRect StatusRect = [[UIApplication sharedApplication] statusBarFrame];
    //標題欄
    CGRect NavRect = self.navigationController.navigationBar.frame;
    CGFloat y = StatusRect.size.height + NavRect.size.height;

二、MJRefresh的footer出現在Home Indicator位置上

(此方法只適合navigationController為不透明狀態下)

MJRefresh的footer出現在Home Indicator位置上.png

這是應為iOS11棄用了automaticallyAdjustsScrollViewInsets屬性，新增contentInsetAdjustmentBehavior來替代它。就是iOS11會自動限制CollectionView的底部不會超出安全區范圍，不想系統幫我們自動設置邊距則要在iOS11中加上下面這句

 if (@available(iOS 11.0, *)) {
        self.myCollectionView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
    } else {
        // Fallback on earlier versions
    }

但是這時候就會出現我們的CollectionView內容會超出安全區和Home Indicator重疊，這樣最底下的cell兩邊就會被屏幕圓角切掉一部分，影響用戶體驗。我的解決辦法是給collectionView加上一個34pt高的footer

UICollectionView：

UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
//這里省略其他屬性配置......
//......
if (iPhoneX) {
    flowLayout.footerReferenceSize = CGSizeMake(SCREEN_WIDTH, 34);
  }
self.myCollectionView = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowLayout];

UITableView：

 if (iPhoneX) {
    self.myTableView.tableFooterView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 0, 34)];
    //注意：如果UITableViewStyle = UITableViewStyleGrouped 時，這樣設置會導致tableHeaderView也有34的高度
 }

或者

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{
    if (self.myTableDataSourceArray.count - 1 == section && iPhoneX) {
        return 34;
    }
    return 0.0001;
}

注：iPhoneX是判斷機型的宏：#define iPhoneX ([UIScreen mainScreen].bounds.size.height == 812.0)
SCREEN_WIDTH是屏幕寬宏：#define SCREEN_WIDTH [[UIScreen mainScreen] bounds].size.width

修改完成后.png

三、Tableview分區頭高度 和 動畫異常問題

參考《你可能需要為你的APP適配iOS11》第三部分-UIScrollView and UITableView的新特性

    self.myTableView.estimatedRowHeight = 0;
    self.myTableView.estimatedSectionHeaderHeight = 0;
    self.myTableView.estimatedSectionFooterHeight = 0;

四、界面布局超出safeArea(安全區)內容被指示器蓋住

內容被指示器蓋住.png

勾選Xib的Safe Area屬性.png

勾選了Safe Area屬性你就會發現左邊多了個Safe Area，這時候你需要重新約束一下被遮擋的控件，約束的參照對象應該是Safe Area，這樣新的約束就會根據Safe Area的變化而改變位置，不會出現內容被指示器蓋住的問題了。

不同機型時Safe Area的變化.png

約束的參照對象應該是Safe Area.png

但是有一點需要注意，就是必須是Builds for iOS9.0 及以上的版本，不然勾選了就會報Safe Area Layout Guide before ios9.0錯誤。如果你要適配低于9.0的版本，那只能使用代碼布局或另尋其它辦法了。

代碼布局:
iOS11為UIViewController和UIView增加了兩個新的屬性safeAreaInsets和safeAreaLayoutGuide, 通過這兩個屬性我們可以獲得安全區域的范圍。

//獲取某View安全區域范圍的宏
#define VIEWSAFEAREAINSETS(view) ({UIEdgeInsets i; if(@available(iOS 11.0, *)) {i = view.safeAreaInsets;} else {i = UIEdgeInsetsZero;} i;})

安全區域邊緣與當前View邊緣的距離.png

END