iOS12|iOS12 UI适配

UI适配的三个参数

1.渲染像素--屏幕截图的图片尺寸,单位px 2.逻辑像素--程序员开发所用尺寸,单位pt 3.倍率--渲染像素/逻辑像素,得到倍数关系。常见倍率@2x,@3x

iPhone全家福 iOS12|iOS12 UI适配
文章图片
iPhone全家福 两种宽度、四种高度
通过友盟关于iOS屏幕分辨率活跃度占比分析,640 * 960的活跃度跌破10%。
如果除去640 * 1136,iPhone在逻辑像素层面,只剩余两种宽度、四种高度
宽度*高度 机型
320*480(占比很少) iPhone3GS、4、4s
320*568(占比很少) iPhone5、5c、5s、SE
375*667 iPhone6、6s、7、8(6系列)
375*812 iPhoneX、XS
414*736 iPhone6/6s/7/8 Plus(Plus系列)
414*896 iPhoneXS Max、XR
iOS12|iOS12 UI适配
文章图片
两种宽度,四种高度 iOS12|iOS12 UI适配
文章图片
iPhone X与iPhone XS iOS12|iOS12 UI适配
文章图片
iPhone XR与iPhone XS Max iOS12|iOS12 UI适配
文章图片
Plus系列与iPhone XS Max 倍率
iPhone主要机型的倍率为@2x,@3x
倍率 机型
1x iPhone3GS
2x iPhone4、4s、5、5c、5s、SE、6、6s、7、8、XR
3x iPhone6/6s/7/8 Plus、X、XS、XS Max
全面屏/非全面屏
iPhoneX、iPhoneXS、XS Max、XR都采用了全面屏设计,之前的机型则为非全面屏
全面屏 机型
iPhone3GS、4、4s、5、5c、5s、SE、6、6s、7、8、iPhone6/6s/7/8 Plus
iPhoneX、XS、XS Max、XR
安全区计算
非全面屏的安全区域为可视区域,全面屏上下有两个区域为非安全区
1.页面内容不能超出安全区(Safe Area)
2.底部区域用于手势进入主屏或切换应用,如果将触发交互行为的按钮放在屏幕的底部,会破坏App操作体验
iOS12|iOS12 UI适配
文章图片
全面屏与非全面屏 全面屏安全区的计算方式:

iOS12|iOS12 UI适配
文章图片
iPhone 6系列与iPhone XR iOS12|iOS12 UI适配
文章图片
iPhone X与iPhone XS Max iOS12|iOS12 UI适配
文章图片
安全区域计算方式 常用宏 OC版本
// 判断是否是ipad #define isPad ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad) // 判断iPhone4系列 #define kiPhone4 ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(640, 960), [[UIScreen mainScreen] currentMode].size) : NO) // 判断iPhone5系列 #define kiPhone5 ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(640, 1136), [[UIScreen mainScreen] currentMode].size) : NO) // 判断iPhone6系列 #define kiPhone6 ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(750, 1334), [[UIScreen mainScreen] currentMode].size) : NO) //判断iphone6+系列 #define kiPhone6Plus ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(1242, 2208), [[UIScreen mainScreen] currentMode].size) : NO)// 判断iPHoneXR #define IS_IPHONE_XR ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(828, 1792), [[UIScreen mainScreen] currentMode].size) : NO) // 判断iPhoneX/XS #define IS_IPHONE_XS ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(1125, 2436), [[UIScreen mainScreen] currentMode].size) : NO) // 判断iPhoneXS Max #define IS_IPHONE_XS_Max ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(1242, 2688), [[UIScreen mainScreen] currentMode].size) : NO) // 判断iPhone X系列 //#define IS_IPHONE_Series IS_IPHONE_XR || IS_IPHONE_XS || IS_IPHONE_XS_Max #define IS_IPHONE_Series [UIScreen mainScreen].bounds.size.height >= 812.0#define Height_StatusBar (IS_IPHONE_Series ? 44.0 : 20.0) #define Height_NavBar (IS_IPHONE_Series ? 88.0 : 64.0) #define Height_TabBar (IS_IPHONE_Series ? 83.0 : 49.0)

【iOS12|iOS12 UI适配】Swift版本
public let kDevice_iPhone4 = CGSize.init(width: 640, height: 960).equalTo(UIScreen.main.currentMode?.size ?? CGSize.zero) public let kDevice_iPhone5 = CGSize.init(width: 640, height: 1136).equalTo(UIScreen.main.currentMode?.size ?? CGSize.zero) public let kDevice_iPhone6 = CGSize.init(width: 750, height: 1334).equalTo(UIScreen.main.currentMode?.size ?? CGSize.zero) public let kDevice_iPhone6_Plus = CGSize.init(width: 1242, height: 2208).equalTo(UIScreen.main.currentMode?.size ?? CGSize.zero)public let kDevice_iPhoneXR = CGSize.init(width: 828, height: 1792).equalTo(UIScreen.main.currentMode?.size ?? CGSize.zero) public let kDevice_iPhoneXS = CGSize.init(width: 1125, height: 2436).equalTo(UIScreen.main.currentMode?.size ?? CGSize.zero) public let kDevice_iPhoneXS_Max = CGSize.init(width: 1242, height: 2688).equalTo(UIScreen.main.currentMode?.size ?? CGSize.zero) //public let kDevice_iPhoneX_Series = kDevice_iPhoneXR || kDevice_iPhoneXS || kDevice_iPhoneXS_Max public let kDevice_iPhoneX_Series = UIScreen.main.bounds.size.height >= 812.0public let Height_StatusBar = (kDevice_iPhoneX_Series ? 44.0 : 20.0) public let Height_NavBar = (kDevice_iPhoneX_Series ? 88.0 : 64.0) public let Height_TabBar = (kDevice_iPhoneX_Series ? 83.0 : 49.0)

    推荐阅读