iOS11適配iPhoneX總結(jié)

iPhoneX適配

覺(jué)得不錯(cuò)請(qǐng)點(diǎn)擊下方【喜歡】鳖悠,為了微博認(rèn)證也是無(wú)賴!還差1660個(gè)??

屏幕尺寸相關(guān)變化

  1. 高度增加了145pt榜掌,變成812pt.
  2. 狀態(tài)欄高度由20pt變成44pt,留意這個(gè)距離就能避開(kāi)“劉撼俗郏”的尷尬憎账,相應(yīng)的導(dǎo)航欄以上變化64->88。
  3. 底部工具欄需要為home indicator留出34pt邊距卡辰。
  4. 物理分辨率為1125px * 2436px.

啟動(dòng)圖的適配

一胞皱、 如果在iPhoneX上啟動(dòng)App并沒(méi)有占滿整個(gè)屏幕,而是在中心保持原有高度,需要修改啟動(dòng)圖九妈。

未修改前張這個(gè)鬼樣:

001.png
  1. 通過(guò)LaunchScreen.storyboard方式啟動(dòng)

  2. 如果啟動(dòng)圖原來(lái)使用的Assets中的LaunchImage反砌,如下圖:

002.png
  • 給Brand Assets添加一張1125*2436大小的圖片

    • 打開(kāi)Assets.xcassets文件夾,找到Brand Assets
    • 右鍵Show in Finder
    • 添加一張1125*2436大小的圖片
  • 修改Contents.json文件,添加如下內(nèi)容

    {
    "extent" : "full-screen",
    "idiom" : "iphone",
    "subtype" : "2436h",
    "filename" : "1125_2436.png",
    "minimum-system-version" : "11.0",
    "orientation" : "portrait",
    "scale" : "3x"
    }
    

再次啟動(dòng)App就可以看到全屏顯示了

003.png

App內(nèi)部樣式適配

在適配之前先介紹下viewSafeAreaInsetsDidChange的調(diào)用順序:

  • viewDidLoad

  • viewWillAppear

  • viewSafeAreaInsetsDidChange

    ? UIEdgeInsets
      - top : 44.0
      - left : 0.0
      - bottom : 34.0
      - right : 0.0
    
  • viewWillLayoutSubviews

  • viewDidAppear

只有在調(diào)用viewSafeAreaInsetsDidChange及以后的方法才能獲得view和Controller的UIEdgeInsets萌朱。所以在viewDidLoad中根據(jù)Safe Area設(shè)置界面會(huì)有問(wèn)題宴树。

自定義導(dǎo)航欄的情況

先來(lái)看看隱藏系統(tǒng)導(dǎo)航欄,自定義NavigationBar不適配時(shí)iPhoneX下是什么樣子嚷兔。下圖是不適配時(shí)效果圖和約束森渐。

004.png

005.png

006.png

會(huì)發(fā)現(xiàn)原來(lái)設(shè)置64高度的自定義Bar離劉海很近做入。原因就是iPhoneX下?tīng)顟B(tài)欄高度由20變成了44。

解決方法有三種:

  1. 在Storyboard中使用Safe Area LayoutGuides,這樣有個(gè)弊端是在Storyboard使用Safe Area最低只支持iOS9同衣,iOS8的用戶就要放棄了竟块,這樣老板肯定不同意。

    解決思路就是耐齐,去除自定義Bar的64像素高度約束浪秘,設(shè)置TableView的頂部距離Safe Area的垂直距離為44。

    • 選擇viewcontroller所在的storyboard埠况,在File inspector中勾選Use Safe Area Layout Guides.
007.png
008.png
  • 從選中TableView耸携,按住control鍵,按住鼠標(biāo)左鍵拉到Safe Area上,選擇Vertical Spacing辕翰。
009.png
  • 選中剛添加的約束夺衍,在Size Inspector中修改Second Item為Safe Area.Top ,Constant = 44
010.png
011.png
  1. 用代碼來(lái)布局,弊端是原來(lái)用Storyboard布局的改成純代碼喜命,累死程序員不償命沟沙。方法就是在viewSafeAreaInsetsDidChange設(shè)置自定義bar的高度。

     @available(iOS 11.0, *)
      override func viewSafeAreaInsetsDidChange() {
          navigationBarH = view.safeAreaInsets.top + 44
      }
    
  2. 當(dāng)然還有第三種方式了壁榕,既能使用Storyboard又能適配iPhoneX矛紫。

思路:在Storyboard中按照非iPhoneX設(shè)置自定義導(dǎo)航欄的高度為64,然后把高度約束作為屬性在源碼中修改為view.safeAreaInsets.top + 44牌里。

  • 把自定義導(dǎo)航欄的高度拖到Controller作為屬性
012.png
  • 在viewSafeAreaInsetsDidChange中修改導(dǎo)航欄的高度

      @available(iOS 11.0, *)
      override func viewSafeAreaInsetsDidChange() {
          customNaviBarHightConstraint.constant = view.safeAreaInsets.top + 44
      }
    

TableView颊咬、WebView、CollectionView等繼承ScrollView的適配

原來(lái)的老項(xiàng)目中包含TableView牡辽、CollettionView的頁(yè)面如果是使用Storyboard設(shè)置的約束喳篇,在iPhoneX中可能會(huì)有34像素的安全區(qū)域,scrollview劃不到底部态辛,如下圖:

013.png

出現(xiàn)這個(gè)區(qū)域的原因是:原來(lái)設(shè)置底部約束是tableview底部到Bottom Layout Guide.Top的距離杭隙。

014.png

解決辦法:
修改約束的Bottom Layout Guide.Top為Superview.Bottom。

修改前
修改后

修改完后TableView就可以滾到到底部了因妙。

016.png

以下兩個(gè)是iOS11造成的和iPhoneX沒(méi)關(guān)系

UIBarButtonItem的適配

自定義rightBarButtonItem時(shí)Item會(huì)有偏移:

1004.png

解決辦法,添加一個(gè)偏移票髓。原來(lái)代碼如下:

func setNavigationRightTextButton(_ title: String,textColor:UIColor? = ColorTheme.NormalNavigationBarTitle, action: @escaping () -> Void) {
        let button = NavigationBackButton(type: .custom)
        button.setTitle(title, for: UIControlState())
        button.setTitleColor(textColor, for: UIControlState())
        let font = UIFont.systemFont(ofSize: 15)
        button.titleLabel?.font = font
        let attributes = [NSFontAttributeName: font];
        let size = title.toNSString.size(attributes: attributes)
        button.frame = CGRect(x: 0, y: 0, w: size.width + 15, h: 44)
        button.reactive.controlEvents(.touchUpInside).observeValues { button in
            action()
        }
        let buttonItem = UIBarButtonItem(customView: button)
        self.navigationItem.rightBarButtonItem = buttonItem
    }

添加以下代碼

 if #available(iOS 11.0, *) {
      button.frame = CGRect(x: 0, y: 0, w: size.width + 30, h: 44)
      button.contentEdgeInsets = UIEdgeInsetsMake(10,0 , -10, 0)
 }

以上只是我們自己的項(xiàng)目在適配iPhoneX時(shí)遇到的幾個(gè)小問(wèn)題攀涵,可能還會(huì)有其他問(wèn)題,歡迎在討論區(qū)討論洽沟。


更多iOS以故、Swift、iOS逆向最新文章請(qǐng)關(guān)注微信公眾賬號(hào):樂(lè)Coding裆操,或者微信掃描下方二維碼關(guān)注

lecoding

icon.jpg

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末怒详,一起剝皮案震驚了整個(gè)濱河市炉媒,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌昆烁,老刑警劉巖吊骤,帶你破解...
    沈念sama閱讀 217,277評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異静尼,居然都是意外死亡白粉,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門(mén)鼠渺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)鸭巴,“玉大人,你說(shuō)我怎么就攤上這事拦盹【樽妫” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,624評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵普舆,是天一觀的道長(zhǎng)恬口。 經(jīng)常有香客問(wèn)我,道長(zhǎng)奔害,這世上最難降的妖魔是什么楷兽? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,356評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮华临,結(jié)果婚禮上芯杀,老公的妹妹穿的比我還像新娘。我一直安慰自己雅潭,他們只是感情好揭厚,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,402評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著扶供,像睡著了一般筛圆。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上椿浓,一...
    開(kāi)封第一講書(shū)人閱讀 51,292評(píng)論 1 301
  • 那天太援,我揣著相機(jī)與錄音,去河邊找鬼扳碍。 笑死提岔,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的笋敞。 我是一名探鬼主播碱蒙,決...
    沈念sama閱讀 40,135評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了赛惩?” 一聲冷哼從身側(cè)響起哀墓,我...
    開(kāi)封第一講書(shū)人閱讀 38,992評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎喷兼,沒(méi)想到半個(gè)月后篮绰,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,429評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡褒搔,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,636評(píng)論 3 334
  • 正文 我和宋清朗相戀三年阶牍,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片星瘾。...
    茶點(diǎn)故事閱讀 39,785評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡走孽,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出琳状,到底是詐尸還是另有隱情磕瓷,我是刑警寧澤,帶...
    沈念sama閱讀 35,492評(píng)論 5 345
  • 正文 年R本政府宣布念逞,位于F島的核電站困食,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏翎承。R本人自食惡果不足惜硕盹,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,092評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望叨咖。 院中可真熱鬧瘩例,春花似錦、人聲如沸甸各。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,723評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)趣倾。三九已至聘惦,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間儒恋,已是汗流浹背善绎。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,858評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留诫尽,地道東北人涂邀。 一個(gè)月前我還...
    沈念sama閱讀 47,891評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像箱锐,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子劳较,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,713評(píng)論 2 354