iPhone X 设计适配指南和iOS 11 新特性

iPhone X尺寸

iPhone X 的屏幕宽度同 iPhone 6、iPhone 6s、iPhone 7 和 iPhone 8 的 4.7 英寸屏幕宽度相同,即 375pt。屏幕垂直高度增加了 145pt,这意味着增加了 20% 的可视空间。

竖屏规格:1125px × 2436px (375pt × 812pt @3x)

横屏规格:2436px × 1125px (812pt × 375pt @3x)

请为你的应用提供高分辨率的设计素材。iPhone X 有非常高的分辨率,请提供 @3x 的设计素材。对于图形类或其他扁平化图像素材,最好使用一倍尺寸下的 PDF 格式。

iphone手机适配标准

图片适配

原生控件frame变化

在iPhone X系统会自动修改StatusBar与Tabbar的高度,Tabbar从49pt变为83pt。StatusBar由20pt变为了44pt

举个例子。原生的Tabbar高度为49pt.当iPhone X时候自动变为了83pt,自动拉伸了34pt。有很多反人类但是必须得做的需求是,需要把tabbar。高度改为非原生值,比如改成写死值55.

这时候iPhonex 中就有问题了。所以要换个方法,不要写死值。要么加变化量。要么单独判断下。iPhone X不变高度。

812pt-667pt = 145pt,145pt-状态栏增加的20pt-tabbar增加的34pt = 91pt,意味着全使用原生bars的app,如果不是tableview那种页面。有91pt的空白距离要设计上来做处理。

启动图: 1125 * 2436

statusBar高度: 44

tabbar高度: 83

注意
注意:iPhone X 的导航栏高度为44, 状态栏高度44, Tabbar 高度83,叫UI设计师帮你切一张 1125x2436 的图,将原先项目Assets中的LaunchImage保存一下,新建一个LaunchImage,将原LaunchImage中的图拖回原位,然后将 1125x2436 的图放入 iPhone X Portrait iOS 11+ 的位置,如果你使用的是原生的Tabbar和导航控制器,此时基本已经适配完成

大家可能碰到 iPhone X 的模拟器打印 [UIScreen mainScreen].bounds.size.height 的值为 667 的问题
这种问题就是 LaunchImage 中没有 iPhone X Portrait iOS 11+ 图片导致的,大家添加上,即可恢复正常

手势

iPhone X 上的显示屏使用屏幕边缘手势来访问主屏幕、应用程序切换器、通知中心和控制中心。避免干扰系统范围的屏幕边缘手势。人们依靠这些手势在每个应用程序中工作。在极少数情况下,像游戏这样的沉浸式应用程序可能需要自定义的屏幕边缘手势,优先于系统的手势 - 第一个滑动会调用特定于应用的手势,而第二次滑动则会调用系统手势。这种行为(称为边缘保护)应该谨慎实施,因为它使得用户难以访问系统级的操作。

启动App

对于一些老项目,在启动图上,可能没有采用xib或者SB进行适配的,所以可能会出现如图一,这样导致整个项目运行就会不能完全贴合。

解决办法,在项目设置里面直接用LaunchScreen.xib或者LaunchScreen.storyboard进行配置启动图,这样项目就会完整显示了

123

iOS 11 NavigationBar 新特性

Navigation 集成 UISearchController
把你的UISearchController赋值给navigationItem,就可以实现将UISearchController集成到Navigation。

1
2
navigationItem.searchController //iOS 11 新增属性
navigationItem.hidesSearchBarWhenScrolling //决定滑动的时候是否隐藏搜索框;iOS 11 新增属性
1
@property (nonatomic, retain, nullable) UISearchController *searchController API_AVAILABLE(ios(11.0)) API_UNAVAILABLE(tvos);

iPhone X常用的宏定义

判断iPhone X

1
#define IS_IPHONEX (([[UIScreen mainScreen] bounds].size.height - 812) ? NO : YES)

Tabbar默认高度

1
#define kTabBarHeight ((IS_IPHONEX) ? 83 : 49)

状态栏默认高度

1
#define kStatusBarHeight ((IS_IPHONEX) ? (44) : (20))

iOS11 UIScrollView and UITableView的新特性

tableView cell高度问题和头视图尾视图会有很大间隙

  • 这个应该是UITableView最大的改变。我们知道在iOS8引入Self-Sizing 之后,我们可以通过实现estimatedRowHeight相关的属性来展示动态的内容,实现了estimatedRowHeight属性后,得到的初始contenSize是个估算值,是通过estimatedRowHeight x cell的个数得到的,并不是最终的contenSize,tableView不会一次性计算所有的cell的高度了,只会计算当前屏幕能够显示的cell个数再加上几个,滑动时,tableView不停地得到新的cell,更新自己的contenSize,在滑到最后的时候,会得到正确的contenSize。

  • Self-Sizing在iOS11下是默认开启的,Headers, footers, and cells都默认开启Self-Sizing,所有estimated 高度默认值从iOS11之前的 0 改变为UITableViewAutomaticDimension:

  • 如果目前项目中没有使用estimateRowHeight属性,在iOS11的环境下就要注意了,因为开启Self-Sizing之后,tableView是使用estimateRowHeight属性的,这样就会造成contentSize和contentOffset值的变化,如果是有动画是观察这两个属性的变化进行的,就会造成动画的异常,因为在估算行高机制下,contentSize的值是一点点地变化更新的,所有cell显示完后才是最终的contentSize值。因为不会缓存正确的行高,tableView reloadData的时候,会重新计算contentSize,就有可能会引起contentOffset的变化。iOS11下不想使用Self-Sizing的话,可以

通过以下方式关闭:

1
2
3
4
self.tableView.estimatedRowHeight = 0;
self.tableView.estimatedSectionHeaderHeight = 0;
self.tableView.estimatedSectionFooterHeight = 0;