随着iPhoneX的发布,适配问题也随之而来
我们先在最前面说一下适配的中心思想:
1、X上的状态栏从20pt变成了44pt,并且中间有个刘海似的隔档,在一些app中如果是隐藏状态栏时需要注意这块不要被挡住了。
2、X的下面有一块34pt的home indicator,比如一些页面下面有button或者其他交互式控件的尽量上移34pt,把这块空出来,这样不会产生冲突。
3、X的高度增加了145pt,变成了812pt。
4、X的四周是圆角显示,在设计页面的时候左右要留出来10pt的边距。
5、物理分辨率为1125 * 2436,这个分辨率对于我们开发者最直接的影响是要在启动图中添加一个1125 * 2436的为X准备的启动图,否则会发生运行项目后上下都会有一个黑边的问题,我的项目里用的是LaunchImage,那么就需要点击LaunchImage,然后如图点击。

这时就在新出现的地方,添加一张1125*2436分辨率的图片就好了。
首先把xcode升级到最新版,官方给出的适配建议是采用safeArea的策略。
那我们来说说safeArea到底是什么?
之前进行过xib和storyboard开发的朋友们可能对AutoLayout的Top Layout Guide和Bottom Layout Guide的适配方式并不陌生,现在苹果要用safeArea来取代top和bottom的方式,但是safeArea需要iOS9以上才能用,所以如果想用这个就只能把Deployment Target改成9以上了。


在图中我们可以看出来所谓的安全区域safeArea就是X上面活动最安全的区域,上面既不会被挡住,下面也不会和homeIndicator起冲突。作为开发者来说在这个区域开发肯定没问题。
要想使用safeArea,首先打开storyboard或者xib,选中左侧的某个页面,然后如图

选中上图的这个,你会发现之前约束的带有top,bottom的全部变成了safeArea,缺点就是需要iOS9的限制,优点也是很突出的,方便,把之前的机型和X统一到了一起。
我项目里的适配解决方法:
因为自己项目里要兼容iOS8.0以上,所以放弃了safeArea的方法。再加上本来项目就是代码和storyboard混合开发,所以想着在代码中动态改动布局也是可以的吧,即使这样比较麻烦,需要在每个X和其他机型不一样的地方分别处理。如果各位有比较好的想法欢迎指出。嘻嘻。
核心代码就是:
if ([UIScreen mainScreen].bounds.size.height == 812) {
make.bottom.equalTo(weakSelf.view).offset(-34);
}else{
make.bottom.equalTo(weakSelf.view);
}
判断当前的机型是不是X,是的话采用新UI布局,不是继续沿用以前的。记住如果横屏的时候就是宽度为812了,虽说这样看起来有点骚操作,但目前能想到的只有这样了。
项目里的原生控件基本都由apple官方适配好了,我们不需要处理,比如navigationBar和tabBar等等。
最后上几张适配好的图片对比。










网友评论