? ? ? ? iPhone X上市了窍箍！看這分辨率，真爽和橙；看這全面屏仔燕，真爽；看這劉海魔招，真丑晰搀！喬布斯的棺材板要按耐不住了。iPhone X雖然充滿槽點(diǎn)办斑，依舊阻擋不了國(guó)人的熱情外恕，5秒售磐杆逗？！所以鳞疲，最終結(jié)果是罪郊，全公司都沒(méi)有給我這個(gè)小開發(fā)配一臺(tái)測(cè)試機(jī)，然后我們的產(chǎn)品過(guò)來(lái)了：親尚洽，我們的APP也要適配iPhone X噢～悔橄。（心里想著不給手機(jī)不做適配）
? ? ? ? 唉，沒(méi)有拿到第一批iPhone X腺毫，但是我們還有Xcode 9啊哈哈哈哈癣疟，寫個(gè)小Demo模擬器上用iPhone X跑一遍，找一找用StoryBoard做適配的感覺(jué)潮酒。先上兩張圖對(duì)比一下睛挚，在iPhone 8 和iPhone X的情況下label的顯示效果：
開始修改適配iPhone X
? ? ? ? 首先是一開始跑在iPhone 8 上的Demo，沒(méi)有在啟動(dòng)頁(yè)添加一張適配X的啟動(dòng)圖（1125x2436@3x）時(shí)候急黎，在X上的頁(yè)面就會(huì)顯示大額頭和大下巴扎狱，所以
? ? ? ? 第一步是使用LaunchScreen.xib 或者 LaunchScreen.storyboard 進(jìn)行配置啟動(dòng)圖，圖片的尺寸是1125x2436@3x勃教，然后在X上的啟動(dòng)后會(huì)自動(dòng)滿屏了淤击。
? ? ? ? 接下來(lái)，看一看頁(yè)面的適配：分別做了幾個(gè)測(cè)試荣回，主要是測(cè)試頂部和底部關(guān)于安全區(qū)的適配問(wèn)題遭贸。正常情況下，我們想要添加一個(gè)label在頁(yè)面上心软，在X沒(méi)出來(lái)之前壕吹，所有頁(yè)面的頂部的高度都是64，然而在X的屏幕上删铃，頂部的高度變成了88耳贬，所以之前我們偷懶寫死控件距離頂部的約束都是64的坑就出來(lái)了。沒(méi)辦法猎唁，現(xiàn)在就要一個(gè)一個(gè)頁(yè)面去檢查了咒劲。
? ? ? ? 之前我們?cè)O(shè)置一個(gè)控件的約束都是距離頂部view的，隨著Xcode9的出來(lái)诫隅，設(shè)置約束的頁(yè)面出現(xiàn)了一個(gè)safe area（跟著X一起出現(xiàn)的安全區(qū)）腐魂；就是我們用storyboard做適配的時(shí)候，基于safe area就會(huì)自動(dòng)幫我們?cè)谒袡C(jī)型上完成適配了逐纬』滓伲看圖
? ? ? ? 這樣設(shè)置頂部的約束后，在所有機(jī)型上就會(huì)自動(dòng)顯示在topbar下面豁生，如果我們把頂部的約束寫死成64兔毒，在iPhoneX上就會(huì)被導(dǎo)航欄遮擋了漫贞，在其他機(jī)型上正常顯示。如果寫死成88育叁，在iPhoneX上剛好顯示出來(lái)迅脐，但是在其他機(jī)型上就會(huì)往下偏移（當(dāng)然，你用代碼布局的話不需要考慮這么多）豪嗽。
相對(duì)與底部也一樣谴蔑，因?yàn)閕PhoneX底部多了home條，所以我們做底部的適配也要避免被home條遮擋的問(wèn)題昵骤。IphoneX以前的機(jī)型树碱，我們做底部的的約束可以設(shè)置距離View的約束為0肯适，但是在iPhoneX上变秦，再設(shè)置距離View的約束為0，則會(huì)被遮擋了框舔，像這樣：
? ? ? ?當(dāng)然蹦玫，距離View的約束也可以設(shè)置為20，這樣控件會(huì)往上偏移刘绣。如果修改成距離safe Area的話樱溉，在每個(gè)機(jī)型上，就會(huì)自動(dòng)幫我們做好適配了纬凤，不必再擔(dān)心被home條遮擋的問(wèn)題福贞。
總結(jié)一下
iPhoneX發(fā)布后，很想要停士，很想用挖帘，公司就是窮，不給你配置恋技。所以拇舀，在模擬器上摸索了一下用storyboard自動(dòng)布局，效果真的溜得飛起蜻底〗颈溃可能以后習(xí)慣了storyboard，你會(huì)發(fā)現(xiàn)UI設(shè)計(jì)其實(shí)也挺好玩的薄辅。亂七八糟寫了一點(diǎn)適配的心得要拂，希望能幫到大家。
