iPhoneX 适配总结
一、iPhoneX适配第一步,根据iPhoneX的屏幕像素大小,引入对应的启动图,告诉系统,app兼容iPhoneX

需要在launchimage中引入一张 1125*2436的png,app将默认展示支持iPhoneX的效果
二、安全区域的概念
所谓的安全区域是一个虚拟出来的概念,因为iPhoneX独特的刘海,所以划定一个矩形的区域,在这个区域之内展示的内容不会被弯曲的屏幕切割,因此叫做安全区

安全区怎么定义?
每个viewcontroller对应一个view,view中的属性描述上面红色区域的距离
@property (nonatomic,readonly) UIEdgeInsets safeAreaInsets API_AVAILABLE(ios(11.0),tvos(11.0));
默认情况下面,在规则的屏幕比如iphone8,iphone8+ 上面, safeAreaInsets 中四个边距是0;如果是iPhoneX上面,苹果系统会自动给safeAreaInsets指定一些值,比如顶部距离64
怎么使用safeAreaInsets?
为了不要让view中的元素被遮挡,你需要动态调整view中元素的位置,比如下面的代码,
CGFloat xOffset = 0.0;
if (@available(iOS 11.0, *)) {
xOffset = self.view.safeAreaInsets.left;
}
self.resourceAllocView.left = xOffset + self.resourceAllocView.left;
self.liveDataView.left = xOffset + self.liveDataView.left;
self.splitView.left = xOffset + self.splitView.left;
self.labelTitle.left = xOffset + self.labelTitle.left;
_imageViewReturn.left = xOffset + _imageViewReturn.left;
如果你使用的是autolayout
if #available(iOS 11, *) {
let guide = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
greenView.topAnchor.constraintEqualToSystemSpacingBelow(guide.topAnchor, multiplier: 1.0),
guide.bottomAnchor.constraintEqualToSystemSpacingBelow(greenView.bottomAnchor, multiplier: 1.0)
])
} else {
let standardSpacing: CGFloat = 8.0
NSLayoutConstraint.activate([
greenView.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor, constant: standardSpacing),
bottomLayoutGuide.topAnchor.constraint(equalTo: greenView.bottomAnchor, constant: standardSpacing)
])
}
三、何时使用
当安全区边距变化之后,系统会在方法通知你
- (void)viewSafeAreaInsetsDidChange
这个方法存在于ViewController和View之中,你可以在这里对元素位置做出修正
四、Home键指示器
- (BOOL)prefersHomeIndicatorAutoHidden
{
return YES;
}
如果你需要隐藏Home键可以通过上面的方法
五、总结
苹果发展到现在,可以发现每个版本中都会新增一些界面布局的API和废弃一些API,这个让开发者增加了很多成本
autolayout布局的方式苹果也没有放弃,甚至用的更多。frame布局越来越不好用,看来要用autolayout才能拥抱未来了
希望苹果在排版上多多学习Android的xml布局方式,更容易理解和灵活
六、参考
iPhone X适配集合
https://github.com/2877025939/iOS11
iPhoneX 适配总结的更多相关文章
- css iphonex适配
/* iphonex适配 */ @media only screen and (device-width:375px) and (-webkit-device-pixel-ratio: 3) { . ...
- Cocos Creator iPhoneX适配的解决办法
研究了5个小时的iPhoneX适配. 从catalog,storyboard,safearea等一系列文章中发现.如果我们想完全撑满全屏.那直接建一个storyboard就好了.但撑满全屏后,流海就是 ...
- iphonex适配
这一篇具体适配步骤比较全面 iphonex适配 这一篇图文讲解比较全面 关于H5页面在iPhoneX适配
- IphoneX适配正确姿势
IphoneX适配正确姿势 写在前面 距离18年9月iphonex发布以来已经快两年了(所以对于iphonex机型的头部刘海(sensor housing)和底部小黑条(Home Indicator) ...
- 关于H5页面在iPhoneX适配
1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...
- iphoneX适配!!!
方法1.js判断(以下采用Jquery) //适配iphonex && $(window).height() === && window.devicePixelRati ...
- 关于H5页面在iPhoneX适配(转)
1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...
- iphoneX 适配
1.iphoneX的尺寸 375*812 上边有44px的危险区,下边有34px的危险区,剩下的是安全区. 2.viewport设值cover <meta name="viewp ...
- 已有项目 iPhoneX 适配
一.Assets 文件图片管理下的 LaunchImage 添加 iOS8.0 and latter 一项,并放一张 1125*2436 的LaunchPage 到对应的位置上. 二.有关 iPhon ...
- iPhoneX 适配H5页面的解决方案
由于在iPhonex在状态栏增加了24px的高度,对于通栏banner规范的内容区域会有遮挡情况. 解决方案:在页面通栏banner顶部增加一层高度44px的黑色适配层,整个页面往下挪44px,这种做 ...
随机推荐
- 构建RAG应用-day01: 词向量和向量数据库 文档预处理
词向量和向量数据库 词向量(Embeddings)是一种将非结构化数据,如单词.句子或者整个文档,转化为实数向量的技术. 词向量搜索和关键词搜索的比较 优势1:词向量可以语义搜索 比如百度搜索,使用的 ...
- 【GDKOI 2024 TG Day2】染色(set) 题解
发现我们给一个点染上色后有: 我们称这是一个大小为 1 的十字. 进一步地,我们给这 5 个点再次染上色后有: 我们称这是一个大小为 2 的十字. 同理可得,我们给这 5 个点染上相同的大小为 2 的 ...
- 痞子衡嵌入式:在i.MXRT1xxx系列上用NAND型启动设备时可用两级设计缩短启动时间
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是在i.MXRT1xxx系列上用NAND型启动设备时可用两级设计缩短启动时间. 去年痞子衡写过一篇骚操作文章 <借助i.MXRT10 ...
- Spring Cloud Bus 消息总线介绍
简介: 本文配套可交互教程已登录阿里云知行动手实验室,PC 端登录 start.aliyun.com 在浏览器中立即体验. 作者 | 洛夜来源 | 阿里巴巴云原生公众号 本文配套可交互教程已登录阿里云 ...
- [FAQ] FastAdmin epay 微信公众号支付 JSAPI 支付必须传 openid ?
使用 FastAdmin 的 epay 插件时,我们通过传不同的 method 决定支付方式. method=mp 时表示公众号支付,此时必须要 openid,但是插件里并没有说明如何获取. 其实这个 ...
- WPF 已知问题 dotnet 6 设置 InvariantGlobalization 之后将丢失默认绑定转换导致 XAML 抛出异常
在设置了 InvariantGlobalization 为 true 之后,将会发现原本能正常工作的 XAML 可能就会抛出异常.本文将告诉大家此问题的原因 这是有开发者在 WPF 仓库上给我报告的 ...
- Kafka 监听器详解
Kafka 监听器详解 Kafka Assistant 是一款 Kafka GUI 管理工具--管理Broker,Topic,Group.查看消费详情.监控服务器状态.支持多种消息格式. 目录 Kaf ...
- Ubuntu 20.04版本安装k8s控制节点与控制节点升级
一.环境配置 服务器配置:2核4G IP:192.168.10.23 主机名:master4将改主机加入此 集群 # 1.修改主机名 hostnamectl set-hostname master4 ...
- Rancher管理K8s集群(14)
一.Rancher介绍 1.1 Rancher简介 Rancher 是一个开源的企业级多集群 Kubernetes 管理平台,实现了 Kubernetes 集群在混合云+本地 数据中心的集中部署与管理 ...
- LVGL 字体
一.LVGL 内置字体 LVGL有几种不同大小的内置字体,可以通过 LV_FONT_MONTSERRAT_X 定义在 lv_conf.h 中启用. 普通字体 包含所有ASCII字符,度数符号(U + ...