iOS应用适配iPhone X

作者: RockyRock | 来源:发表于2017-09-16 17:31 被阅读15525次

    前言

        苹果公司于2017年9月13日凌晨发布了两款新的手机——iPhon 8与iPhone X。令人惊艳的是,其中iPhone X采用了圆角显示屏和个人觉得奇丑无比的顶部“齐刘海”。感觉乔布斯如果看了这样的设计,气得可能从坟墓里钻出来。

    iPhone X.jpg

        开个玩笑,言归正传。
        作为开发者来说,最应该关心的是应用是否在iPhone X上显示正常和适配问题。
        不用我们去测试应用的显示问题,苹果官方就给出了相应的解决方案。
    具体地址为:Building Apps for iPhone X

        以下为视频要点总结。

    1.全屏视图底部

    Snip20170916_6.png

        如图所示,这是一个图片预览功能,可以通过左右滑动来切换图片,底部的PageControl控件显示了当前预览图片的索引。但是,PageControl已经抵住了底部显示的“home键”,这样页面UI显示很不雅观。

        解决方案如下:

    Snip20170916_7.png

        切换到视图Xib界面,将PageControl底部自动布局调整为与Safe Area对齐而不再是父视图。

        修改后的效果如下:

    Snip20170916_8.png

        这样,界面就明显好看多了。

    2.SearchBar

        SearchBar是很多界面搜索时都有的一个控件。其在iPhone X横屏状态下显示如下:

    Snip20170916_9.png

        从图片可以看出,SearchBar的左上部和右上部因为圆角屏幕的关系无法完全显示出来。
        当然,苹果不会让用户界面显示这样的UI效果的,解决方案如下:


        这是一个弹出SearchController的方法,为了适配iPhone X界面显示,我们添加了如阴影所示的两行代码。

        适配后的显示效果如下:

    Snip20170916_13.png

        这样显示就好看多了,再横屏状态下,SearchBar两端会自动居中缩进,错开了两端的圆角显示区域。

    3.HeaderView

        许多应用使用TableView时都会去设置HeaderView,我们看看在iPhone X下显示的效果。

    Snip20170916_15.png

        如图中的箭头标示,HeaderView的背景两端颜色出现了断层。我们来看看具体实现代码。

    Snip20170916_17.png

        我们设置的HeaderView的ContentView为我们的目标颜色,只有中间部分视图区域达到了显示效果,两端其他区域没有设置成功,那么两端的其他区域会是什么呢?我们来看看其原理。

    Snip20170916_24.png

        如示意图显示,当选中配置项Content View Insets To Safe Area时,这时,TableCell的ContentView视图区域是不会超出Safe Area。

    Snip20170916_19.png
        取消选中Content View Insets To Safe Area,那么这时TableCell的ContentView将不受到Safe Area的限制,填充满整个TableCell视图区域。

        来看看取消选中Content View Insets To Safe Area后的效果。

    Snip20170916_25.png

        这样HeaderView的背景设置就会好多了,是我们所要设置的效果。

    参考

        iPhone X 设计适配指南 & iOS 11 新特性 (中文)

      您在阅读该文章的过程中,如若对该文章有技术错误或值得优化的建议,欢迎大家加QQ:690091622 进行技术交流和探讨。

    相关文章

      网友评论

      • jiaxw32:"切换到视图Xib界面,将PageControl底部自动布局调整为与Sage Area对齐而不再是父视图", Safe area,不是Sage area
        RockyRock:感谢纠正
      • 6179a7c8f80c:楼主你好,我这边适配iPhone X从第一个页面push进第二个页面然后再pop回前一个页面的时候有时会出现页面白屏的情况,只有通过切换下面的Tab才能看到页面,但在其他机型上是不会出现这种情况的。请问楼主,这是怎么回事?
      • Maj_sunshine:我想问下我升了xcode9,不适配iphonex能上架么。因为好像safeArea只能在iOS9以上,在iOS8用不了,或者有什么解决办法么
      • a2677ffed2a3:这个X 过几年会不会成为一个笑话?
        258b1f72bd91:反正我觉着丑到爆炸
        飞鱼_all:不管谁是笑话,我先笑两声:smile:
        若小北00:哈哈,你这个问题就是个笑话
      • iOS虞:用代码在viewDidLoad中不能获取到safeAreaInsets的值改如何代码适配啊
        iOS虞:@Rocky_Hui 恩添加了一块安全区域后感觉用代码区适配好麻烦
        RockyRock:@一起去搬砖 获取的是self.view的,但获取的是只读的,暂时没找到用纯代码适配的方法,建议使用xib
      • 某非著名程序员:代码咋适配
        某非著名程序员:@Rocky_Hui :嗯呢,已经用Launch Screen.storyboard解决了
        RockyRock:@260d120058f7 暂时没找到代码适配的方式,建议使用xib
      • 212089fb695f:这样适配了在其他苹果机上跑不会出现问题?
      • 旭丶Joy:感谢分享

      本文标题:iOS应用适配iPhone X

      本文链接:https://www.haomeiwen.com/subject/eexusxtx.html