(转)[IOS]iPhone X适配参考

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/jameskaron/article/details/84917200

转自:

https://www.jianshu.com/p/3a9ad4f0fa32?appinstall=0

 

随着iOS11和xcode9刚开始正式发布,小编也迫不及待的更新了xcode9,手机也顺利更新到iOS,也终于见到iPhone X 的真面不,看着齐刘海的样式,小编心里淡淡的忧伤,怎么适配,如何快速适配到项目中,成了一个蛋疼的问题

文章讲解点:

  • 1.首先看一下iPhone X的模拟器样式吧
  • 2.iPhone X的设计图
  • 3.启动页的适配
  • 4.刷新框架的适配iOS11
  • 5.纯代码的宽高比适配
  • 6.纯代码适配齐刘海
  • 7.纯代码适配iPhone X脚底
  • 8.xib和SB适配
  • 9,适配iOS 11 列表的册数删除
  • 10.tableView的头部试图和尾部试图
  • 11.UIBarButtonItem的适配
  • 12.无线真机测试
  • 13.真机地图适配

友情链接:

1.首先看一下iPhone X的模拟器样式吧

 
我是iPhone X

xcode 9 模拟器都带一个套套,像我这种强迫症看着淡淡的忧伤,没办法直接干掉算了
如果看着大小在电脑上面不合适,就把鼠标放到四个角的时候,可以随便拖大小的

更改模拟器外观样式.png

2.iPhone X的设计图

 

3.启动页的适配

iPhone X采用的和iPhone 6p一样的@3x的图,而不是传说中的@4x图,不然设计妹妹真的哭晕在厕所了,适配起来还是比较好弄的,但是iPhone X 的屏幕平尺变为1125 * 2436,如果你是用的是LaunchImage来管理启动页,那就可以找设计妹子给你弄一张图出来了(晚上一起吃饭不,那就看你本事了)。如果你使用的是LaunchScreen来适配的启动页,听我一句也去问问设计妹子吧,毕竟iPhone X的高宽比(iPhone X采用了iPhone 8的宽,却比iPhone 8p都要高)发生了变化,拉伸了设计妹子的图,会给你拼命的,
说的那么多废话,就一点是重要的iPhone X 的屏幕平尺变为1125 * 2436

4.刷新框架的适配iOS11

如果你使用了MJRefresh等刷新,并且你还隐藏了导航,那么你就会出现一下情况

造成这个原因就是:iOS 11上面废除了automaticallyAdjustsScrollViewInsets这个属性的使用,妹妹的搞什么,确实使用了UIScrollView's contentInsetAdjustmentBehavior来替代,详细介绍(本篇七秒只做开发中实际适配,不详细解答为何这样适配),如何适配?粘上下面代码即可

  if (@available(iOS 11.0, *)) {
    self.home_collectionView.contentInsetAdjustmentBehavior = UIApplicationBackgroundFetchIntervalNever;
} else {
    self.automaticallyAdjustsScrollViewInsets = false;
    // Fallback on earlier versions
}

但是看到每个地方倒要if else,确实不舒服,七秒斗胆写了一个宏,仅供参考

/// 第一个参数是当下的控制器适配iOS11 一下的,第二个参数表示scrollview或子类 
#define AdjustsScrollViewInsetNever(controller,view) if(@available(iOS 11.0, *)) {view.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;} else if([controller isKindOfClass:[UIViewController class]]) {controller.automaticallyAdjustsScrollViewInsets = false;}
 
适配后的界面,舒服多了
 

5.纯代码的宽高比适配

众所周知iPhone X的高宽比和以前的iPhone机型有所改变,那么我们纯代码适配,都是使用的系数进行适配,如:CGRectMake(20*kWJWidthCoefficient, 30*kWJHeightCoefficient, 100*kWJWidthCoefficient, 40*kWJHeightCoefficient)这样就可以适配使用的机型了,但是偏偏iPhone X上面宽度没有变,高度却增加不少,没办法只能在kWJHeightCoefficient系数来做文章吧,七秒没办法只能在写个宏了不然,我的一个个的写啊,累啊
说了那么多废话,其实就是iPhone X的高宽比和iPhone 8的一样就OK,但是iPhone X确实用的是@3x的图

/// 高度系数 812.0 是iPhoneX的高度尺寸,667.0表示是iPhone 8 的高度,如果你觉的它会变化,那我也很无奈 
#define kWJHeightCoefficient (kWJScreenHeight == 812.0 ? 667.0/667.0 : kWJScreenHeight/667.0)
 

6.纯代码适配齐刘海

众所周知,导航的高度为64,在哪个手机上面都是不变的,iPhone X没出来之前是对的,随便写64,iPhone X出来后,大家都傻眼了,导航栏高度变了有可能为88,傻眼了吧,如果你纯码写的都是64效果如下

//写死64效果
这就是自己写代码的不规范造成的,曾经有个程序员给说过:不要在代码里面看到重复多次的数字、字符串等的使用,如果重复多次就要抽取出来使用常量来表示,如果当时听他的话,能出现这个效果,吓的小遍立马改为(现在已经哭晕厕所)
重点 :别直接写64了,也别直接写88,写宏吧
重点:别直接写64了,也别直接写88,写宏吧
重点:别直接写64了,也别直接写88,写宏吧
#define SafeAreaTopHeight (kWJScreenHeight == 812.0 ? 88 : 64)

9,适配iOS 11 列表的册数删除

在iOS8之后,苹果官方增加了UITableVIew的右滑操作接口,即新增了一个代理方法(tableView: editActionsForRowAtIndexPath:)和一个类(UITableViewRowAction),代理方法返回的是一个数组,我们可以在这个代理方法中定义所需要的操作按钮(删除、置顶等),这些按钮的类就是UITableViewRowAction。这个类只能定义按钮的显示文字、背景色、和按钮事件。并且返回数组的第一个元素在UITableViewCell的最右侧显示,最后一个元素在最左侧显示。从iOS 11开始有了一些改变,首先是可以给这些按钮添加图片了,然后是如果实现了以下两个iOS 11新增的代理方法,将会取代(tableView: editActionsForRowAtIndexPath:)代理方法:
注意:看的有的文章如果在iOS11上面调用老的删除,会崩溃,小编测试没有遇到,还是请大家趁早替换适配吧

- (nullable UISwipeActionsConfiguration *)tableView:(UITableView *)tableView leadingSwipeActionsConfigurationForRowAtIndexPath:(NSIndexPath *)indexPath func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration?
  
9.1,右滑和左滑调用
func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? { let action = UIContextualAction(style: .destructive, title: "Delete") { (action, view, handler) in handler(true) } let configuration = UISwipeActionsConfiguration(actions: [action]) return configuration } func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? { let action = UIContextualAction(style: .normal, title: "Mark") { (action, view, handler) in handler(true) } action.backgroundColor = UIColor.init(red: 254/255.0, green: 175/255.0, blue: 254/255.0, alpha: 1); let configuration = UISwipeActionsConfiguration(actions: [action]) return configuration }

 

10.tableView的头部试图和尾部试图

在iOS11里面有时候在tableView的头部和尾部留白,因为苹果给滚动试图加进去了self-sizeing,开始计算逐步计算contentSize,默认如果不去实现viewForHeaderInSection就不会调用heightForHeaderInSection,尾部试图一样。

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? { } func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat { return 0.001 }
 
如果你不想实现viewForHeaderInSection也不想留白,那么只需要你把self-sizeing自动估高关闭即可
/// 自动关闭估算高度,不想估算那个,就设置那个即可 
self.tableView.estimatedRowHeight = 0; 
self.tableView.estimatedSectionHeaderHeight = 0; 
self.tableView.estimatedSectionFooterHeight = 0;
 

11.UIBarButtonItem的适配

UIBarButtonItem错位效果:

 在iOS 11 里面使用 CustomView创建的item造成frame错乱以及设置边距item.width = -20等失效问题,归根结底是因为苹果更改了iOS11上面uinavigationBar的结构

iOS 11以前的navigationBar:

添加的right和left直接添加到navigationBar上面,并且使用的是frame布局的

iOS 11 navigationBar结构图:

有图我们可以看到, 添加的right和leftUIBarButtonItem并不是直接添加到nagitionBar上面。而是在外面嵌套了一个uibuttonBarStackView,而StackView并不是使用的frame,而是用的约束来布局,所以必须得用 AutoLayout 了!
 /// 适配iOS11 UIBarButtonItem 添加自定义布局 
if (@available(iOS 9.0,*)) { 
/// 强迫症的朋友这里也是可以写成11.0 
[backbtn.widthAnchor constraintEqualToConstant:size.width].active = true; 
[backbtn.heightAnchor constraintEqualToConstant:size.height].active = true; }
 iOS11里面正确效果:

12.无线真机测试

这应该也是xcode 9的一个亮点吧,但是速度真的不是很干恭维的。注意手机和电脑必须在同一个局域网内
首先使用手机连接xcode之后,打开window->Devices and Simulator->勾选Show as run destination和Connect via network,这样就可以无线测试了,以后妈妈再也不用担心忘记带线了

13.iOS11 真机地图

在iOS11地图适配,在iOS11中,如果使用到地图,我们就需要在info,里面添加NSLocationAlwaysAndWhenInUseUsageDescriptionNSLocationWhenInUseUsageDescription才可以在ios11里面正常调出地图
展开阅读全文

iPhone X 适配

10-26

公司app适配起来比较琐碎,很多第三方库编译的时候没有支持模拟器的版本,所以我只好把这些库删掉,然后调试界面后再加进去,是不是听起来就很[img=https://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/monkey/2.gif][/img]。(我这个女程序媛水平不高没办法)。rnrn适配iPhone X给我带来的最大教训就是:千万不要写死代码,之前用了很多20,49,44,诸如此类的高度,导致我不得一一改掉,而且吧,如果是多人合作的app,一开始就要说好一些常用的变量放在哪,不要每次你加一个,我加一个,不但重复后期还会有很多麻烦产生。rnrn好了,下面说下我适配的过程:rn[color=#0000FF]rn[b]首先适配之前我们要知道5.8英寸的iPhone X到底有什么变化。rn[/b]rn[/color]1.屏幕像素尺寸:1125 * 2436. rn2.开发尺寸:375 * 812 (你懂得),高度比iphone 6,7,8多了145pt。rnrn[img=https://img-bbs.csdn.net/upload/201710/26/1508985139_829982.png][/img]rnrn那么苹果规定的适配准则是:rn1.必须保证布局充满整个屏幕。你设计的产品核心内容不能被“齐刘海”,圆角和底部home指示器遮挡。核心内容要在safearea,如下图的位置。rn(大部分使用标准,系统UI的,比如导航栏,tableView和collections 的,都会自动调整适配iPhone X,但是如果你是自定义控件,那么它的高度什么的都要相应修改才行。)rn[img=https://img-bbs.csdn.net/upload/201710/26/1509001722_327298.png][/img]rnrn2.提供全屏体验。要让你的背景填充整个屏幕,包括指示器的位置。对于像tables和collections,要一直到屏幕最底部。但是要保证指示器的位置不能有有交互性的控件,以免影响用户体验。rnrn3.最基本的内容不能被圆角,“齐刘海”或者home键指示器剪切掉,就是不能被他们遮挡住内容。rnrn4。注意status bar的高度变化。iPhone X中status bar高度比其他所有设备都高。如果之前你代码中是写死20的高度,界面完全用这个高度来布局,那么还是改成动态的status bar的高度吧。现在iPhone X上它的高度可是44pt。rnrn5.加入你之前隐藏了status bar,那么建议在iPhone X上显示出来。现在iPhone X有更高的屏幕,status bar显示的内容对用户是有用的,他最好只在必要的时候隐藏掉。比如看视频或者照片预览。rnrn6.一些图片资源要重新设计。有的图在iPhone X上合适,其他设备可能就会被裁切掉很多,所以要保证设备显示的资源核心内容都在。不会被裁切掉。rnrn7.避免有交互的控件出现在屏幕底部也就是home指示器的位置或者出现在“齐刘海”两边的圆角处。因为底部指示器使用了滑动手势来显示主屏幕,这些手势可能会去掉这些控件的交互。圆角的位置呢对用户使用也不友好。rnrn8.不要尝试用一些黑色的控件填充隐藏掉圆角及指示器的位置。也不要在这些位置加一些奇怪的东西来装饰他们。rnrn9.允许在特定的时候隐藏掉home功能的指示器。但是用户触屏屏幕后,指示器要再次出现。比如播放视频和图片浏览时。rnrn10.tabbar默认高度其他设备是49pt,iPhone X的默认高度是83pt。rnrn[color=#0000FF][b]下面说下我们自己app里面的适配:[/b][/color]rnrn1.status bar高度被写死成20,这次要改成动态获取的。rn[code=objc][[UIApplication sharedApplication] statusBarFrame].size.heightrn[/code]rnrn2.tabbar另一个同事写的自定义的,高度也固定为49,这里也要改,iPhone X上tabbar高度默认是83,其实就是49 + 34,home指示器的高度是34pt。具体就不写了。大家看明白就行。rnrn3.也是其他一些节目的微调,其实改的东西不多,但是很麻烦,特别是有的界面各个控件的高度是根据status bar ,tabbar这些的高度变化的就麻烦了,比较琐碎。rn[color=#FF0000]rn总之,只要遵守上面的一些原则,适配也不是很难。上面的原则是根据苹果适配文档理解翻译的,大家参考。图片也是引用的苹果文档里面的。如果有说的不对的,也麻烦指出。[img=https://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/monkey/43.gif][/img][/color]rnrnrnrn 论坛

没有更多推荐了,返回首页