iOS11和iPhone X屏幕适配

作者: 遛遛食 | 来源:发表于2017-10-14 15:31 被阅读319次

iPhone X上市了,给设计师和开发工程师们又带了新的挑战,那一条齐刘海和四个圆角的屏幕,不得不去进行屏幕适配,并且苹果的iOS11也进行了一些方法的替换,这就让以前写的代码在iOS11的系统上跑起来有了不小挑战。

首先先说一下安全区

Safe Area

以往的其他iPhone屏幕都是长方形的,所以里面的显示区域不会存在遮挡的现象。iPhone X由于全面屏的设计,在屏幕的上方,下方都变成了弧形的,而控件都还是长方形,所以就会出现显示不全的情况。
为了解决遮挡的问题,所在在设计的时候就要避开这个区域,所以实际的iPhone X的安全区域就是图上所画的绿色的区域,而白色的区域,苹果会根据上下的颜色而自动填充。

高度对比图

在其他iPhone上状态栏的高度为20个像素,而在iPhone X上状态栏的高度变为了88个像素,并且在底部多出了48个像素。

当我们打印iPhone X的屏幕尺寸时[UIScreen mainScreen].bounds.size 打印值为375x812注意这个812是算上安全区域的大小

好了知道这些,我就就知道怎么去适配屏幕了

1.一个界面一般都会有UITableView、UIScrollView、UICollectionView,并且一般会把这些作为底部视图
这种情况下设置视图大小的时候个人建议直接使用self.view.bounds就可以了。
像iOS11中已经废除了automaticallyAdjustsScrollViewInsets这个方法,所以需要进行版本判断

 if (@available(iOS 11.0, *)) {
     self.tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
 }else {
     self.automaticallyAdjustsScrollViewInsets = NO;
 }

2.如果要拿出状态栏的高度可以使用一个宏

//屏幕宽高
#define kScreenW [UIScreen mainScreen].bounds.size.width
#define kScreenH [UIScreen mainScreen].bounds.size.height
// iPhone X 宏定义
#define iPhoneX (kScreenW == 375.f && kScreenH == 812.f ? YES : NO)
// 适配iPhone X 状态栏高度
#define CF_StatusBarHeight (iPhoneX ? 44.f : 20.f)

3.如果要拿出导航栏的高度可以使用一个宏

// 适配iPhone X 导航栏高度
#define CF_NavHeight (iPhoneX ? 88.f : 64.f)

4.如果要拿出Tabbar的高度可以使用一个宏

// 适配iPhone X Tabbar距离底部的距离
#define CF_TabbarSafeBottomMargin (iPhoneX ? 34.f : 0.f)
// 适配iPhone X Tabbar高度
#define CF_TabbarHeight (iPhoneX ? (49.f+34.f) : 49.f)

iOS 11中如果不实现-tableView: viewForFooterInSection:-tableView: viewForHeaderInSection:,那么-tableView: heightForHeaderInSection:- tableView: heightForFooterInSection:不会被调用。
这是因为estimatedRowHeight estimatedSectionHeaderHeight estimatedSectionFooterHeight三个高度估算属性由默认的0变成了UITableViewAutomaticDimension,导致高度计算不对,解决方法是实现对应方法或吧这三个属性设为0。

在使用图片方面

4.7‘’及以下的设备目前使用的图片全是@2x
plus系列和iPhone X使用的图片是@3x

相关文章

  • iOS11/iPhone X 适配简单,但你的Apple思维适配

    iOS11/iPhone X 适配简单,但你的Apple思维适配做好了么? iOS11/iPhone X 适配简单...

  • iOS开发之iOS11与iPhone X适配

    iOS11和iPhoneX适配 iOS11和iPhone X的适配 iOS引导页的镂空效果 iOS 人机交互指南 ...

  • iPhone X屏幕适配

    iPhone X开发设计屏幕适配。iPhone X(10)屏幕分辨率与适配,iOS开发适配与UI设计问题。 htt...

  • iOS11和iPhone X屏幕适配

    iPhone X上市了,给设计师和开发工程师们又带了新的挑战,那一条齐刘海和四个圆角的屏幕,不得不去进行屏幕适配,...

  • 2018-01-25

    iOS11和iPhone X 的简单适配 1、iPhone X 发布以后发现APP的启动页没有铺满 解决方法:在L...

  • iOS 11 和iPhone X适配问题总结

    前言 随着iOS11的发布,随之而来的适配也要开始同步进行了,下面是我对iOS11和iPhone X的适配总结。 ...

  • iOS 11适配

    = = 关于iOS11 和 iPhone X适配的问题 自行参考以下文章 https://www.lee1994...

  • 开发日常--适配iOS11和iPhone X

    终于我还是适配 iOS11 和 iPhone X 了。其实已经适配好几天了,今天发了版本,把这次在适配中遇到的问题...

  • iOS11 和 iPhone X适配的问题

    关于iOS11 和 iPhone X适配的问题 自行参考以下文章 https://www.lee1994.com ...

  • iOS11与iPhone X的适配

    iOS11与iPhone X的适配 文章讲解点:1.首先看一下iPhone X的模拟器样式吧2.iPhone X的...

网友评论

本文标题:iOS11和iPhone X屏幕适配

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