iphoneX布局适配及iOS 11.0系统适配

编程入门行业动态更新时间:2024-10-08 12:46:31

iphoneX<a href=https://www.elefans.com/category/jswz/34/1770549.html style= 布局适配及iOS 11.0系统适配"/>

iphoneX布局适配及iOS 11.0系统适配

一，想必大多开发者将自己的项目跑到iPhoneX模拟器上后，会出现各种异常，包括界面布局的变化，根据自己遇到的情况主要说下面两点大家肯定需要修改的：

（1），启动页不是全屏的，（如图）

解决办法：

如果使用的是LaunchImage方式启动图的话，直接在iOS8.0 and later 下面portrait打钩，就会出现iphoneX的启动图（如图）
将美术做好的图片拖进去就好了，大小是：1125x2436-(375x812)*3
这里请参考海边来的设计师
如果使用的是LaunchScreen.storyboard适配启动图的话，就更简单了，找一张像素合适的图放进去做好适配就可以了（这个地方怎么适配的就不做说明了，如有疑问可以联系我哦）。
经过适配启动图变为：

（2），启动后，软件界面也是不会填充完整的，（如图）

既然启动图的适配已经解决了，那么软件界面自然就会呗填充满了

二，我将上图的tabBar和导航条都给隐藏掉，结果就是全屏显示，是不是很爽，然而，这样的做法是不对的，下面就一张图说明所有

只要将标红的地方注意了，并且设计的时候避开这个地方就不会出现什么问题
具体说明：怎么避开上下的危险区域呢，其实苹果官方已经给出了一个新的类，

- (void)viewSafeAreaInsetsDidChange NS_REQUIRES_SUPER API_AVAILABLE(ios(11.0), tvos(11.0));

具体代码就是在需要的controller里面写入即可，一般是在基类里面做好处理

 - (void)viewSafeAreaInsetsDidChange {// 补充：顶部的危险区域就是距离刘海10points，（状态栏不隐藏）// 也可以不写，系统默认是UIEdgeInsetsMake(10, 0, 34, 0);[super viewSafeAreaInsetsDidChange];self.additionalSafeAreaInsets = UIEdgeInsetsMake(10, 0, 34, 0);
}

三，代码里面到底怎么做呢？

如果将页面滑到最顶部和最底部，会发现上下会留出10和34points的区域，如图：
顶部区域

底部区域
在滑动的过程中满屏的，是不是感觉比较舒服
其实我感觉，官方说的危险区域到底要不要避开呢，这个就比较蛋疼了，如果要避开的话那么在滑动的时候就不应该是满屏跑呀？如果说是不避开，那么在滑到顶部和底部的时候，给我留的空白是干啥的？谁知道可以解释一下，谢谢！
我的做法是上下全留白，不管是在滑动还是在最顶部和最底部，如图底部绿色部分就是危险区域，一直是空白的（我的项目里面是有导航的，所以上面的留白就不展示了在这）。就是这样做会不会有点不美观，大家给给意见，谢谢！
其实，如果在碰到底部有自定义的bar时，就最好按照上面4点的做法，如图实现的三种方式其中的参数具体是：
iphoneX下，底部的tabBar高度是83，其中危险区域有34
顶部导航栏的高度还是44，只不过状态栏变为44了

6，我的做法是在基类里面写一个算高度的类：

- (CGFloat)calculateHeight:(CartOnePageSource)source {// 针对上图第三张的展示方式，如要改变，就可以在这里变就可以了// source : // CartOnePageSourceNormal 表示是有底部tabBar的// CartOnePageSourceDetial 表示没有底部tabBar的CGFloat height = 0;if (iPhoneX) {height = (source == CartOnePageSourceNormal)?(kScreenHeight - 88 - 83) : (kScreenHeight - 88 - 34);}else {height = (source == CartOnePageSourceNormal)?(kScreenHeight - 64 - 49) : (kScreenHeight - 64);}return height;
}

四，iOS11适配

具体tableView的contentSize的限制如下，除了self.extendedLayoutIncludesOpaqueBars = NO;外其他两个都是系统默认的，其实不写也是不影响布局的，但是，在使用的过程中就会出现问题。

self.edgesForExtendedLayout = UIRectEdgeNone;
self.extendedLayoutIncludesOpaqueBars = NO;
if (@available(iOS 11.0, *)) {                  self.tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
} else {self.automaticallyAdjustsScrollViewInsets = NO;
}

具体问题：pop会上一页面，界面会从下往上滑动；
利用MJRefresh刷新界面，会出现跳动，
经测试，这两个问题都是因为没写或是将contentInsetAdjustmentBehavior设置为了UIScrollViewContentInsetAdjustmentAutomatic.

3.在需要的地方设置这三句话，可以在基类里面写好，这样有助复用

self.edgesForExtendedLayout = UIRectEdgeNone;
self.extendedLayoutIncludesOpaqueBars = NO;
if (@available(iOS 11.0, *)) {                  self.tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
} else {self.automaticallyAdjustsScrollViewInsets = NO;
}