storyboard适配iphonex

在介绍storyboard如何适配iphonex之前,先来介绍一下viewSafeAreaInsetsDidChange的调用顺序

调用顺序如下

1.viewDidLoad

2.viewWillAppear

3.viewSafeAreaInsetsDidChange (iOS11新添加的)

可以在这个方法中通过

self.additionalSafeAreaInsets = UIEdgeInsetsMake(10, 0, 0, 34)通过这个属性来改变safeArea值,(ios11)

4.viewWillLayoutSubviews

5.viewDidAppear

只有调用viewSafeAreaInsetsDidChange及之后的方法才能获得vuew和controller的UIEdgeInsets,所以在viewdidload中根据safeArea设置界面有问题。

以下面的一个例子来说一下storyboard怎么适配iphonex

隐藏系统导航栏,自定义导航栏不适配时IPhone先时什么样子,下图是不适配时效果图和约束。

storyboard适配iphonex_第1张图片

storyboard适配iphonex_第2张图片

storyboard适配iphonex_第3张图片

有两种解决办法

1.在storyboard中使用Safe Area LayoutGuides,这样有个弊端是在Storyboard使用Safe Area最低只支持iOS9,iOS8的用户就要放弃了,如果你的项目可以支持ios9以上,你可以用这种方法,解决思路是去掉自定义bar的64像素高度约束,去掉tableview.top = 自定义bar.bottom,添加自定义bar.bottom = tableview.top,设置TableView的顶部距离Safe Area的垂直距离为44。

(1)选择viewcontroller所在的storyboard,在File inspector中勾选Use Safe Area Layout Guides.

storyboard适配iphonex_第4张图片

storyboard适配iphonex_第5张图片

(2)从选中TableView,按住control键,按住鼠标左键拉到Safe Area上,选择Vertical Spacing。

storyboard适配iphonex_第6张图片

(3)选中刚添加的约束,在Size Inspector中修改Second Item为Safe Area.Top ,Constant = 44

storyboard适配iphonex_第7张图片

storyboard适配iphonex_第8张图片

2.在Storyboard中按照非iPhoneX设置自定义导航栏的高度为64,然后把高度约束作为属性在viewSafeAreaInsetsDidChange中修改为view.safeAreaInsets.top + 44

(1)把自定义导航栏的高度拖到Controller作为属性

storyboard适配iphonex_第9张图片

(2)在viewSafeAreaInsetsDidChange中修改导航栏的高度

- (void)viewSafeAreaInsetsDidChange

{

    [super viewSafeAreaInsetsDidChange];

    self.customNaviBarHightConstraint.constant = self.view.safeAreaInsets.top + 44;

}


TableView、WebView、CollectionView等继承ScrollView的适配 

原来的老项目中包含TableView、CollettionView的页面如果是使用Storyboard设置的约束,在iPhoneX中可能会有34像素的安全区域,scrollview划不到底部,如下图:

storyboard适配iphonex_第10张图片

出现这个区域的原因是:原来设置底部约束是tableview底部到Bottom Layout Guide.Top的距离。

storyboard适配iphonex_第11张图片

解决办法:

修改约束的Bottom Layout Guide.Top为Superview。

storyboard适配iphonex_第12张图片

修改完后TableView就可以滚到到底部了。

storyboard适配iphonex_第13张图片


注意

iOS11 以前,我们布局时,如果上下有导航栏和tabbar时,视图的 top 和 bottom 一般参照的是 Top Layout Guide  Bottom Layout Guide

iOS11 以后,那两个参照已经 deprecated (过时)了,而被 Safe Area 取代。但要注意⚠️Safe Area 要求最低支持 iOS9.0 具体怎么用safearea上面已介绍

storyboard适配iphonex_第14张图片

你可能感兴趣的:(storyboard适配iphonex)