Table of Contents
- iOS11 适配
- 一、Large Title View
- 二、导航栏
- 1. 图层变化
- 2. 边距变化
- 3.App 需要实现导航栏左右按钮边距为 0
- 修改思路
- 4.Avoiding Zero-Sized Custom Views
- 5.Navigation 集成 UISearchController
- 三、ScrollView TableView CollectionView
- 1、TableView Self-Sizing
- iPhone X 适配
- 一、屏幕尺寸
- 1、Human Interface Guidelines
- 2、布局
- 二、Bar 高度
- 1、Status Bar
- 2、屏幕底部
- 三、LaunchScreen
- 一、屏幕尺寸
一、Large Title View
iOS 11 增加了大标题的显示，通过 UINavigationBar 的prefersLargeTitles属性控制，默认是不开启的。可以忽略不用做适配。
iOS11 之前导航栏默认高度为 64pt(这里高度指 statusBar + NavigationBar)，iOS11 之后如果设置了 prefersLargeTitles = YES 则为 96pt，默认情况下还是 64pt，但在 iPhoneX 上由于刘海的出现 statusBar 由以前的 20pt 变成了 44pt，所以 iPhoneX 上高度变为 88pt，如果项目里隐藏了导航栏加了自定义按钮之类的，这里需要注意适配一下。
二、导航栏
1. 图层变化
iOS11 之前：
导航栏的 title 是添加在 UINavigationItemView 上面
navigationBarButton 则直接添加在 navigationBar 上面
如果设置了 titleView，则 titleView 也是直接添加在 navigationBar 上面
iOS11 之后：
navigationBar 会添加在_UIButtonBarStackView 上面
_UIButtonBarStackView 则添加在_UINavigationBarContentView 上面；
如果没有给 titleView 赋值，则 titleView 会直接添加在_UINavigationBarContentView 上面
如果赋值给了 titleView，则会新生成_UITAMICAdaptorView，把 titleView 添加在这个类上面，这个类会添加在_UINavigationBarContentView 上面
2. 边距变化
在 iOS11 对导航栏里面的 item 的边距也做了调整：
- 如果只是设置了 titleView，没有设置 barButtonItem，把 titleView 的宽度设置为屏幕宽度，则 titleView 距离屏幕的边距，iOS11 之前，在 iPhone6p 上是 20p，在 iPhone6p 之前是 16p；iOS11 之后，在 iPhone6p 上是 12p，在 iPhone6p 之前是 8p。
- 如果只是设置了 barButtonItem，没有设置 titleView，则在 iOS11 里，barButtonItem 距离屏幕的边距是 20p 和 16p；在 iOS11 之前，barButtonItem 距离屏幕的边距也是 20p 和 16p。
- 如果同时设置了 titleView 和 barButtonItem，则在 iOS11 之前，titleView 和 barButtonItem 之间的间距是 6p，在 iOS11 上 titleView 和 barButtonItem 之间无间距，如下图:
3.App 需要实现导航栏左右按钮边距为 0
在 iOS7 之后, 我们在设置 UINavigationItem 的leftBarButtonItem, rightBarButtonItem的时候都会造成位置的偏移，iOS11 之前通过添加一个消极的宽度为负值的 UIBarButtonItem
let negativeSpacer = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
negativeSpacer.width = -16
navigationItem.leftBarButtonItems = [negativeSpacer, backItem]
但是由于 iOS 11 导航栏的图层变化，这招无效了
修改思路
- 放弃 UIBarButtonItem, 放弃 UINavigationBar, 使用自定义视图代替
- 在 UINavigationBar 中使用添加视图的方式, 固定位置固定大小添加按钮
- 修改 UIBarButtonItem 图层结构 (删除图层, 或者修改约束)
初期想法：遍历 view 的父视图, 当其是UIStackView的时候, 我们修改其左右约束, 但是仅仅修改的话会造成约束冲突, 所以我们还需要提前移除约束冲突的左右约束
更理想的方法：修改layoutMargins属性
@implementation UINavigationBar (SLFixSpace)
+(void)load {
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
[self swizzleInstanceMethodWithOriginSel:@selector(layoutSubviews)
swizzledSel:@selector(sl_layoutSubviews)];
});
}
-(void)sl_layoutSubviews{
[self sl_layoutSubviews];
if (deviceVersion >= 11) {
self.layoutMargins = UIEdgeInsetsZero;
for (UIView *subview in self.subviews) {
if ([NSStringFromClass(subview.class) containsString:@"ContentView"]) {
subview.layoutMargins = UIEdgeInsetsZero;//可修正iOS11之后的偏移
}
}
}
}
@end
public var sl_defultFixSpace: CGFloat = 0
public var sl_disableFixSpace: Bool = false
@available(iOS 11.0, *)
extension UINavigationBar {
static let sl_initialize: Void = {
DispatchQueue.once(UUID().uuidString) {
swizzleMethod(UINavigationBar.self,
originalSelector: #selector(UINavigationBar.layoutSubviews),
swizzleSelector: #selector(UINavigationBar.sl_layoutSubviews))
}
}()
@objc func sl_layoutSubviews() {
sl_layoutSubviews()
if sl_disableFixSpace == false {
layoutMargins = .zero
let space = sl_defultFixSpace
for view in subviews {
if NSStringFromClass(view.classForCoder).contains("ContentView") {
view.layoutMargins = UIEdgeInsetsMake(0, space, 0, space)
}
}
}
}
}
4.Avoiding Zero-Sized Custom Views
自定义视图的 size 为 0 是因为你有一些模糊的约束布局。要避免视图尺寸为 0，可以从以下方面做：
UINavigationBar 和 UIToolbar 提供位置
-
开发者则必须提供视图的 size，有三种方式：
- 对宽度和高度的约束；
- 实现 intrinsicContentSize；
- 通过约束关联你的子视图；
titleView 约束失效，frame 生效
5.Navigation 集成 UISearchController
把你的 UISearchController 赋值给 navigationItem，就可以实现将 UISearchController 集成到 Navigation。
| Item | Normal Height | iPhone X Height |
|---|---|---|
| UINavigationBar | 64 | 88 (96 large title) |
| UIStatusBar | 20 | 44 |
| UITabBar | 49 | 83 |
三、ScrollView TableView CollectionView
1、TableView Self-Sizing
在 iOS8 引入 Self-Sizing 之后，我们可以通过实现estimatedRowHeight相关的属性来展示动态的内容，实现了estimatedRowHeight属性后，得到的初始 contenSize 是个估算值，是通过estimatedRowHeight * cell的个数得到的，并不是最终的contenSize，tableView就不会一次性计算所有的cell的高度了，只会计算当前屏幕能够显示的 cell 个数再加上几个，滑动时，tableView不停地得到新的 cell，更新自己的 contenSize，在滑到最后的时候，会得到正确的 contenSize。
Self-Sizing在 iOS11 下是默认开启的，Headers, footers, and cells 都默认开启Self-Sizing，所有 estimated 高度默认值从 iOS11 之前的 0 改变为UITableViewAutomaticDimension
开启Self-Sizing之后，tableView 是使用estimateRowHeight属性的，这样就会造成 contentSize 和 contentOffset 值的变化，如果是有动画是观察这两个属性的变化进行的，就会造成动画的异常，因为在估算行高机制下，contentSize 的值是一点点地变化更新的，所有 cell 显示完后才是最终的 contentSize 值。因为不会缓存正确的行高，tableView reloadData 的时候，会重新计算 contentSize，就有可能会引起 contentOffset 的变化。
iOS11 下不想使用Self-Sizing的话，可以通过以下方式关闭：
self.tableView.estimatedRowHeight = 0;
self.tableView.estimatedSectionHeaderHeight = 0;
self.tableView.estimatedSectionFooterHeight = 0;
// 针对整个项目
[UITableView appearance].estimatedRowHeight = 0;
[UITableView appearance].estimatedSectionHeaderHeight = 0;
[UITableView appearance].estimatedSectionFooterHeight = 0;
iPhone X 适配
一、屏幕尺寸
1、Human Interface Guidelines
iOS Device Compatibility Reference - Displays
下图是 iPhone X 对比其他机型的变化部分。iPhone X 和 iPhone 8 的宽度一致，在垂直方向上多了 145pt，这就意味着首页可以展示更多的内容，多出来的这 20% 的垂直空间，也许可以挂上更高价值的运营位。
[图片上传失败...(image-9f4dbf-1525541516763)]
iPhone X 和其他设备的尺寸对比
2、布局
注意上图蓝色部分，会发现这些都算在了展示内容的区域。所以我们在设计的时候，要避免内容被圆角、刘海给挡住。Like this：
[图片上传失败...(image-4fb479-1525541516763)]
图 CGRectMake(0,0,100,100)
iPhone X 的坐标系统以及能显示内容的区域如下图所示：
[图片上传失败...(image-69b649-1525541516763)]
iPhone X 的显示区域
二、Bar 高度
| Item | Normal Height | iPhone X Height |
|---|---|---|
| UINavigationBar | 64 | 88 (96 large title) |
| UIStatusBar | 20 | 44 |
| UITabBar | 49 | 83 |
- iPhone X 的底部是预留给系统功能的一个区域 - Home Indicator，这部分的高度是 34pt。
- iPhone X 的状态栏由原来的 20 变为了 44。如果之前在导航的位置设置了自定义 View，在 iPhone X 上会出问题
1、Status Bar
iPhone X 上的 StatusBar 高度比之前的 iPhone 高一些，也就是说，我们如果写死 20pt 高度的 frame 布局，都要大面积修 (tu) 改 (xue)。在 iPhone X 上，通过打印 [[UIApplication sharedApplication] statusBarFrame] 可以看到，高度是 44pt。
[UIApplication sharedApplication].statusBarFrame
{{0, 0}, {375, 44}}
如果你的 App 是隐藏 StatusBar 的，建议重新考虑。iPhone X 为用户在垂直空间上提供了更多展示余地，且状态栏中也包含了用户需要知道的信息，除非能通过隐藏状态栏带给用户额外的价值，否则苹果建议大家将状态栏还给用户。
另外还有一点，用户在使用 iPhone X 打电话的时候，StatusBar 的高度也不会发生变化了。
2、屏幕底部
因为没有了 Home 键，iPhone X 的底部是预留给系统功能的一个区域 - Home Indicator，这部分的高度是 34pt。
如果你的底部是 TabBar，那么 Home Indicator 背景会来自于 TabBar 背景的延伸，如果我们是一个 feed 流的页面，那么底部会展示 feed 流的局部。
意思是如果有 TabBar，那么那个区域会延展你的 barTintColor；没有的话，就显示透明的（参照 Setting）。之所以这么设计，是为了让 indicator 清晰可见，告诉用户你可以滑动这部分区域。所以苹果不建议我们的 UI 元素过于靠近这部分区域。
三、LaunchScreen
- 如果使用
LaunchScreen.storyboard作为启动页，需要调整下 Top 的约束，以前为 -20 ，改为 -44 ；
-
如果是
Images.xcassets，为 iPhone X 添加一个启动图，新的启动图尺寸为 1125 像素 * 2436 像素，458ppi。image
