iPhone尺寸

iPhoneX UI适配技巧

最新推荐文章于 2024-03-18 16:51:38 发布

weixin_34413103

最新推荐文章于 2024-03-18 16:51:38 发布

阅读量161

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a4da44a518825258b746b69

本文介绍了iPhoneX的屏幕尺寸特点及其对应用界面设计的影响，包括控件如何自动调整以适应不同屏幕尺寸，并讨论了iOS11引入的SafeArea概念及其在AutoLayout中的应用。

尺寸

iPhone X 的宽为375pt, 高为812pt。在3倍显示模式下，这等价于1125 x 2346像素。
- 宽为375pt意味着它与iPhone 6 7 8 等4.7英寸显示屏具有相同宽度。对于短边上，他们显示的内容数量是相同的。
- 高为812pt意味着它比4.7英寸屏要高145pt，超出的高度大约提供了20%显示内容的空间。
iPhone 尺寸图

控件

使用标准的UIKit控件会使适配工作很容易。UINavigationbar、UIToolbar、UITabbar 在所有的 iOS 设备上都会自动调整合适的位置和缩放比例
- UINavigationbar的背景会延伸到显示屏的顶部边缘
- UIToolbar、UITabbar的背景会延伸到底部
- 同时，它们中包含的元素也会自动地调整位置

SafeArea

从 iOS 11 开始，Auto Layout 中增加了一个新的布局指南：Safe Area Layout Guide，废弃了 iOS 11 之前的 Top Layout Guide 和 Bottom Layout Guide
iPhone 8 SafeArea示意图：
iPhone X SafeArea示意图：

相关代码

//获取设备屏幕尺寸
#define SCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width)
#define SCREEN_HEIGHT ([UIScreen mainScreen].bounds.size.height)
//以4.7英寸屏为效果图
#define SCALE_WIDTH ((SCREEN_HEIGHT<480.0)?(1.0):(SCREEN_WIDTH/375))
#define SCALE_HEIGHT ((SCREEN_HEIGHT<480.0 || (SCREEN_HEIGHT == 812.0))?(1.0):(SCREEN_HEIGHT/667))
#define SafeAreaTopHeight (SCREEN_HEIGHT == 812.0 ? 88 : 64)
#define SafeAreaBottomHeight (SCREEN_HEIGHT == 812.0 ? 34 : 0)
#define TabbarHeight (49 + SafeAreaBottomHeight)
#define iPhoneX ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(1125, 2436), [[UIScreen mainScreen] currentMode].size) : NO)复制代码