iPhoneX適配
覺(jué)得不錯(cuò)請(qǐng)點(diǎn)擊下方【喜歡】鳖悠,為了微博認(rèn)證也是無(wú)賴!還差1660個(gè)??
屏幕尺寸相關(guān)變化
- 高度增加了145pt榜掌,變成812pt.
- 狀態(tài)欄高度由20pt變成44pt,留意這個(gè)距離就能避開(kāi)“劉撼俗郏”的尷尬憎账,相應(yīng)的導(dǎo)航欄以上變化64->88。
- 底部工具欄需要為home indicator留出34pt邊距卡辰。
- 物理分辨率為1125px * 2436px.
啟動(dòng)圖的適配
一胞皱、 如果在iPhoneX上啟動(dòng)App并沒(méi)有占滿整個(gè)屏幕,而是在中心保持原有高度,需要修改啟動(dòng)圖九妈。
未修改前張這個(gè)鬼樣:
通過(guò)
LaunchScreen.storyboard
方式啟動(dòng)如果啟動(dòng)圖原來(lái)使用的Assets中的LaunchImage反砌,如下圖:
-
給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就可以看到全屏顯示了
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í)效果圖和約束森渐。
會(huì)發(fā)現(xiàn)原來(lái)設(shè)置64高度的自定義Bar離劉海很近做入。原因就是iPhoneX下?tīng)顟B(tài)欄高度由20變成了44。
解決方法有三種:
-
在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.
- 從選中TableView耸携,按住control鍵,按住鼠標(biāo)左鍵拉到Safe Area上,選擇Vertical Spacing辕翰。
- 選中剛添加的約束夺衍,在Size Inspector中修改Second Item為Safe Area.Top ,Constant = 44
-
用代碼來(lái)布局,弊端是原來(lái)用Storyboard布局的改成純代碼喜命,累死程序員不償命沟沙。方法就是在
viewSafeAreaInsetsDidChange
設(shè)置自定義bar的高度。@available(iOS 11.0, *) override func viewSafeAreaInsetsDidChange() { navigationBarH = view.safeAreaInsets.top + 44 }
當(dāng)然還有第三種方式了壁榕,既能使用Storyboard又能適配iPhoneX矛紫。
思路:在Storyboard中按照非iPhoneX設(shè)置自定義導(dǎo)航欄的高度為64,然后把高度約束作為屬性在源碼中修改為view.safeAreaInsets.top + 44牌里。
- 把自定義導(dǎo)航欄的高度拖到Controller作為屬性
-
在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劃不到底部态辛,如下圖:
出現(xiàn)這個(gè)區(qū)域的原因是:原來(lái)設(shè)置底部約束是tableview底部到Bottom Layout Guide.Top的距離杭隙。
解決辦法:
修改約束的Bottom Layout Guide.Top為Superview.Bottom。
修改完后TableView就可以滾到到底部了因妙。
以下兩個(gè)是iOS11造成的和iPhoneX沒(méi)關(guān)系
UIBarButtonItem的適配
自定義rightBarButtonItem
時(shí)Item
會(huì)有偏移:
解決辦法,添加一個(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)注
icon.jpg