iPhone X 适配(全) (2)

因为没有了 Home 键,iPhone X 的底部是预留给系统功能的一个区域 - Home Indicator,这部分的高度是34pt。

iPhone X 适配(全)

图 2.6 iPhone X 的 Home Indicator 区域

“如果你的底部是 TabBar,那么 Home Indicator 背景会来自于 TabBar 背景的延伸,如果我们是一个 feed 流的页面,那么底部会展示 feed 流的局部。”

意思是如果有 TabBar,那么那个区域会延展你的 barTintColor;没有的话,就显示透明的(参照 Setting)。之所以这么设计,是为了让 indicator 清晰可见,告诉用户你可以滑动这部分区域。所以苹果不建议我们的 UI 元素过于靠近这部分区域。

iPhone X 适配(全)

图 2.7 有 TabBar 的 Home Indicator 区

SafeArea

iOS 11 废弃了 iOS 7 之后出现的 topLayoutGuide/bottomLayoutGuide,取而代之的是safeLayoutGuide 概念。我们的UI元素都应该布局在这些区域之内,避免被各种 bar(NavgationBar、ToolBar、TabBar、StatusBar)遮挡。

iPhone X 适配(全)

iPhone X 适配(全)

图2.8 iPhone 的 SafeArea

如果我们用了 AutoLayout,并且开启了 safeAreaLayoutGuide,布局会自动加上这些 safeLayoutGuide,你的视图不会超出这部分 SafeArea。如2.9所示,如果你需要增加 Guide 的区域,那么可以设置 self.additionalSafeAreaInsets 来增加区域。

iPhone X 适配(全)

iPhone X 适配(全)

图 2.9 默认的 SafeArea 和 self.additionalSafeAreaInsets = UIEdgeInsetsMake(64, 0, 0, 0);

其他

还有其他的一些改变,比如图片的 Aspect Ratio 在 iPhone X 上的表现也会有所不同了;

刘海两边的区域都能响应不同的手势,最好不要和自己的 App 发生冲突。

来自Session 201的建议

① xib 里适配 iPhone X 的话,可以开启 UseSafeAreaLayoutGuides(但这需要在 iOS 9 之后才能用,需要看你的 App 最低支持的版本)。

iPhone X 适配(全)


图3.1 xib 属性

② 如果用的系统 SearchViewController,发现没有灰色蒙层了,可以这么试试。

iPhone X 适配(全)

图3.2 iOS 11 UISearchViewController适配

之所以可以这么改,是因为 iOS 11 的 NavigationBar 和 SearchViewController 集成在一块儿了。

③ 横屏下的 UITableView,SenctionHeader 的背景颜色不是设置的那个颜色。

iPhone X 适配(全)

图3.3 iOS 11 横屏 Tableview 的作用方式

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwdxws.html