一、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 适配总结的更多相关文章

  1. css iphonex适配

    /*  iphonex适配 */ @media only screen and (device-width:375px) and (-webkit-device-pixel-ratio: 3) { . ...

  2. Cocos Creator iPhoneX适配的解决办法

    研究了5个小时的iPhoneX适配. 从catalog,storyboard,safearea等一系列文章中发现.如果我们想完全撑满全屏.那直接建一个storyboard就好了.但撑满全屏后,流海就是 ...

  3. iphonex适配

    这一篇具体适配步骤比较全面 iphonex适配 这一篇图文讲解比较全面 关于H5页面在iPhoneX适配

  4. IphoneX适配正确姿势

    IphoneX适配正确姿势 写在前面 距离18年9月iphonex发布以来已经快两年了(所以对于iphonex机型的头部刘海(sensor housing)和底部小黑条(Home Indicator) ...

  5. 关于H5页面在iPhoneX适配

    ​1.  iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...

  6. iphoneX适配!!!

    方法1.js判断(以下采用Jquery) //适配iphonex && $(window).height() === && window.devicePixelRati ...

  7. 关于H5页面在iPhoneX适配(转)

    ​1.  iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...

  8. iphoneX 适配

    1.iphoneX的尺寸  375*812   上边有44px的危险区,下边有34px的危险区,剩下的是安全区. 2.viewport设值cover <meta name="viewp ...

  9. 已有项目 iPhoneX 适配

    一.Assets 文件图片管理下的 LaunchImage 添加 iOS8.0 and latter 一项,并放一张 1125*2436 的LaunchPage 到对应的位置上. 二.有关 iPhon ...

  10. iPhoneX 适配H5页面的解决方案

    由于在iPhonex在状态栏增加了24px的高度,对于通栏banner规范的内容区域会有遮挡情况. 解决方案:在页面通栏banner顶部增加一层高度44px的黑色适配层,整个页面往下挪44px,这种做 ...

随机推荐

  1. tensorflow如何切换CPU和GPU

    import os if Bert_Use_GPU: os.environ['CUDA_VISIBLE_DEVICES'] = '0,1' #使用GPU0,1 else: os.environ['CU ...

  2. EventBridge 特性介绍|以 IaC 的方式使用 EventBridge

    ​简介:本文将重点介绍 EventBridge 和 IaC 的重点概念和特性,然后演示如何应用 IaC 理念自动化部署 EventBridge 来使用这些概念和特性. 作者:王川(弗丁) 引言 Eve ...

  3. Hologres揭秘:深度解析高效率分布式查询引擎

    简介: 从阿里集团诞生到云上商业化,随着业务的发展和技术的演进,Hologres也在持续不断优化核心技术竞争力,为了让大家更加了解Hologres,我们计划持续推出Hologers底层技术原理揭秘系列 ...

  4. Dubbo 跨语言调用神兽:dubbo-go-pixiu

    简介: Pixiu 是基于 Dubbogo 的云原生.高性能.可扩展的微服务 API 网关.作为一款网关产品,Pixiu 帮助用户轻松创建.发布.维护.监控和保护任意规模的 API ,接受和处理成千上 ...

  5. Flink 在爱奇艺广告业务的实践

    简介: 5 月 22 日北京站 Flink Meetup 分享的议题. 本文整理自爱奇艺技术经理韩红根在 5 月 22 日北京站 Flink Meetup 分享的议题<Flink 在爱奇艺广告业 ...

  6. 从技术到科学,中国AI向何处去?

    ​简介: 如果从达特茅斯会议起算,AI已经走过65年历程,尤其是近些年深度学习兴起后,AI迎来了空前未有的繁荣.不过,最近两年中国AI热潮似乎有所回落,在理论突破和落地应用上都遇到了挑战,外界不乏批评 ...

  7. [MongoDB] Mongo 表字段添加索引, 查看索引, 删除索引

    查看索引: db.getCollection('xx').getIndexes(); 创建索引: # 1 代表升序,-1代表降序,name 指定索引名 db.getCollection('xx').c ...

  8. dotnet C# 序列化 XML 时进行自动格式化

    默认的序列化对象为 XML 字符串时,是没有进行格式化的,也就是所有的内容都在相同的一行.本文告诉大家方法,在序列化对象时,转换的 XML 是格式化的.或者说拿到 XML 字符串,对这个 XML 字符 ...

  9. 为何 WPF 对 vcruntime140 有引用

    通过阅读 WPF 官方开源仓库的代码和文档,可以了解到在进行独立发布的时候会在仓库里面带上 vcruntime140 的原因 在独立发布的时候,可以在仓库里面找到 vcruntime140.dll 这 ...

  10. 如何拥有自己的专属GPT-本地部署目前最强大模型llama3

    你是不是苦于没法使用ChatGPT?或者访问了ChatGPT却没法使用GPT4?现在一切问题都可以解决了! 4月18日,Meta发布两款开源Llama 3 8B与Llama 3 70B模型,供外部开发 ...