作者:袁怡松_779 | 来源:互联网 | 2023-06-06 18:04
打个硬广,少儿编程培训是我的副业,有加入我们在公众号留言!本文转自:CocoaChina公众号推荐文章屏幕我们在编码中使用的是以point为单位的屏幕尺寸(在不同设备上每个point对应的实
打个硬广,少儿编程培训是我的副业,有加入我们在公众号留言!
本文转自:CocoaChina公众号推荐文章
屏幕
我们在编码中使用的是以point为单位的屏幕尺寸(在不同设备上每个point对应的实际像素点是不一样的),iPhone 8的尺寸是375pt × 667pt @2x,iPhone X的尺寸是375pt × 812pt @3x,也就是屏幕宽度是一样的,但是高出了145pt,大概能多显示20%的内容。
![](https://www.#.com/go/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwOTI5MDk1MTQ2NzUxP3dhdGVybWFyay8yL3RleHQvYUhSMGNEb3ZMMkpzYjJjdVkzTmtiaTV1WlhRdmFtbGhaR0ZpYVc0PS9mb250LzVhNkw1TDJUL2ZvbnRzaXplLzQwMC9maWxsL0kwSkJRa0ZDTUE9PS9kaXNzb2x2ZS83MC9ncmF2aXR5L0NlbnRlcg==)
注意iPhone X的屏幕素质比较好,所以它需要加载较高像素的图片,我们要提供必要的@3x资源。
另外由于iPhone X极高的长宽比,我们用作背景的图片都需要重新设计,以保证比例适合,内容被裁切后效果仍然ok。
![](https://www.#.com/go/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwOTI5MDk1MjE5MDA2P3dhdGVybWFyay8yL3RleHQvYUhSMGNEb3ZMMkpzYjJjdVkzTmtiaTV1WlhRdmFtbGhaR0ZpYVc0PS9mb250LzVhNkw1TDJUL2ZvbnRzaXplLzQwMC9maWxsL0kwSkJRa0ZDTUE9PS9kaXNzb2x2ZS83MC9ncmF2aXR5L0NlbnRlcg==)
status bar
iPhone X的状态栏高度是高于之前所有的iPhone版本的,所以在代码里写死kStatusBarHeight == 20的地方都会出错!
![](https://www.#.com/go/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwOTI5MDk1MjU1MTA4P3dhdGVybWFyay8yL3RleHQvYUhSMGNEb3ZMMkpzYjJjdVkzTmtiaTV1WlhRdmFtbGhaR0ZpYVc0PS9mb250LzVhNkw1TDJUL2ZvbnRzaXplLzQwMC9maWxsL0kwSkJRa0ZDTUE9PS9kaXNzb2x2ZS83MC9ncmF2aXR5L0NlbnRlcg==)
也就是说,之前使用固定状态栏高度来进行布局的代码都需要调整为动态布局方式,否则会出现内容被遮挡的问题。特别是图中这个64,一直在iOS开发中常数般的存在,最后也被苹果爸爸摆了一道。
![](https://www.#.com/go/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwOTI5MDk1MzEzODQ5P3dhdGVybWFyay8yL3RleHQvYUhSMGNEb3ZMMkpzYjJjdVkzTmtiaTV1WlhRdmFtbGhaR0ZpYVc0PS9mb250LzVhNkw1TDJUL2ZvbnRzaXplLzQwMC9maWxsL0kwSkJRa0ZDTUE9PS9kaXNzb2x2ZS83MC9ncmF2aXR5L0NlbnRlcg==)
关于状态栏另外两个需要注意的地方:
![](https://www.#.com/go/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwOTI5MDk1MzQ1NTc3P3dhdGVybWFyay8yL3RleHQvYUhSMGNEb3ZMMkpzYjJjdVkzTmtiaTV1WlhRdmFtbGhaR0ZpYVc0PS9mb250LzVhNkw1TDJUL2ZvbnRzaXplLzQwMC9maWxsL0kwSkJRa0ZDTUE9PS9kaXNzb2x2ZS83MC9ncmF2aXR5L0NlbnRlcg==)
布局
iPhone X的布局有很多改变,这是因为:
很多系统经典的控件,比如TableView,Collection,Navigation,TabBar等都会自动适应iPhone X(呵呵,一定会有很多坑等着打补丁或者让开发者擦屁股)。
Safe Area
iOS11引入了safeArea的概念,用来替代之前的topLayoutGuide和bottomLayoutGuide,safeArea用来描述视图不被任何内容遮挡的部分。它提供两种方式:safeAreaInsets或safeAreaLayoutGuide来提供给你safeArea的参照值。
![](https://www.#.com/go/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwOTI5MDk1NDEzNDI2P3dhdGVybWFyay8yL3RleHQvYUhSMGNEb3ZMMkpzYjJjdVkzTmtiaTV1WlhRdmFtbGhaR0ZpYVc0PS9mb250LzVhNkw1TDJUL2ZvbnRzaXplLzQwMC9maWxsL0kwSkJRa0ZDTUE9PS9kaXNzb2x2ZS83MC9ncmF2aXR5L0NlbnRlcg==)
在iPhone X上,视图的默认safeArea如下图所示:
![](https://www.#.com/go/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwOTI5MDk1NDM3MjkyP3dhdGVybWFyay8yL3RleHQvYUhSMGNEb3ZMMkpzYjJjdVkzTmtiaTV1WlhRdmFtbGhaR0ZpYVc0PS9mb250LzVhNkw1TDJUL2ZvbnRzaXplLzQwMC9maWxsL0kwSkJRa0ZDTUE9PS9kaXNzb2x2ZS83MC9ncmF2aXR5L0NlbnRlcg==)
可以看到,底部的Bar还有四周圆角,都对这个safeArea进行了切割。苹果官方的设计指导是使用以safeArea为框,以layoutMargin为间距来进行UI布局。
横屏
在横屏状态下,不能因为刘海的原因将内容向左或者向右便宜,要保证内容的中心对称:
![](https://www.#.com/go/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwOTI5MDk1NDU4NzQ4P3dhdGVybWFyay8yL3RleHQvYUhSMGNEb3ZMMkpzYjJjdVkzTmtiaTV1WlhRdmFtbGhaR0ZpYVc0PS9mb250LzVhNkw1TDJUL2ZvbnRzaXplLzQwMC9maWxsL0kwSkJRa0ZDTUE9PS9kaXNzb2x2ZS83MC9ncmF2aXR5L0NlbnRlcg==)
![](https://www.#.com/go/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwOTI5MDk1NTIwNTUwP3dhdGVybWFyay8yL3RleHQvYUhSMGNEb3ZMMkpzYjJjdVkzTmtiaTV1WlhRdmFtbGhaR0ZpYVc0PS9mb250LzVhNkw1TDJUL2ZvbnRzaXplLzQwMC9maWxsL0kwSkJRa0ZDTUE9PS9kaXNzb2x2ZS83MC9ncmF2aXR5L0NlbnRlcg==)
另外,之前所有版本的iPhone tableView的cell和它的contentView的大小是相同的,开发者相对cell布局和相对contentView布局效果上不会有太大区别。
但是在iPhone X下,由于刘海和圆角的存在,tableView的contentView会被裁切,所以所有的布局都应该被调整为相对contentView布局,否则会越界:
![](https://www.#.com/go/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwOTI5MDk1NjE4NzM4P3dhdGVybWFyay8yL3RleHQvYUhSMGNEb3ZMMkpzYjJjdVkzTmtiaTV1WlhRdmFtbGhaR0ZpYVc0PS9mb250LzVhNkw1TDJUL2ZvbnRzaXplLzQwMC9maWxsL0kwSkJRa0ZDTUE9PS9kaXNzb2x2ZS83MC9ncmF2aXR5L0NlbnRlcg==)
一致性
苹果对iOS中运行的app的一致性有很高的要求,在iPhone X下,开发者不能自己去遮盖圆角、状态栏,特别是底部的homeBar,即使你认为刘海很丑,也许用户看着看着就习惯了呢……
关于homeBar,它的颜色是会自动适应的,保持着『时刻能找到但是又不那么显眼』的状态,所以开发者不用去为它费心添加背景啊,强调啊啥的,苹果爸爸会十分感动然后拒绝掉你的……
交互
在交互方面,iPhone X最大的改变就是底部那个无时无刻不存在的homeBar了,代替了原来home按键的功能,系统级的任务切换和回到桌面 、、,都是上滑这个细细的长条。
![](https://www.#.com/go/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwOTI5MDk1NjM5MzM5P3dhdGVybWFyay8yL3RleHQvYUhSMGNEb3ZMMkpzYjJjdVkzTmtiaTV1WlhRdmFtbGhaR0ZpYVc0PS9mb250LzVhNkw1TDJUL2ZvbnRzaXplLzQwMC9maWxsL0kwSkJRa0ZDTUE9PS9kaXNzb2x2ZS83MC9ncmF2aXR5L0NlbnRlcg==)
所以苹果爸爸的意思是:
赶紧把你自己写的上滑手势乖乖删掉~
当然如果app确实需要这个手势,可以打开程序开关覆盖系统的手势,但是这样用户就需要滑动两次来回到桌面了,这会让他们非常怀念home键。
兼容
首先是iPhone X下的键盘和其他系统有区别,会多出来那个很有趣的animateEmoji工具栏,所以在做键盘相关处理的时候要关注兼容性问题,至少:高度不要写死了……
iPhone X的认证使用的是全新的faceId,所以如果app需要使用认证相关api,需要根据设备区分touchId和faceId,可以看文档。
![](https://www.#.com/go/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTcwOTI5MDk1NjU4MTM1P3dhdGVybWFyay8yL3RleHQvYUhSMGNEb3ZMMkpzYjJjdVkzTmtiaTV1WlhRdmFtbGhaR0ZpYVc0PS9mb250LzVhNkw1TDJUL2ZvbnRzaXplLzQwMC9maWxsL0kwSkJRa0ZDTUE9PS9kaXNzb2x2ZS83MC9ncmF2aXR5L0NlbnRlcg==)