iPhone X屏幕适配

作者: 碧海云天V | 来源:发表于2018-03-15 15:10 被阅读35次

前言

iPhone X出来后,屏幕顶部的齐刘海曾让许多人病垢,使用者看了会不爽,App开发者对这个齐刘海也深恶痛绝,还得重新做适配。不过,不得不承认iPhone X的全面屏是目前业界做的最好的,屏占比是最高的,再加上流畅简洁的iOS系统,让iPhone X的体验非常不错。

  作为一个App开发者当然也要对现有的App做适配,下面就说一下我是怎么适配的。

  • 首先看一下启动页

  如果用LaunchScreen.storyboard,那么就在其view上面放一些相对布局的控件,启动的时候就可以充满iPhone X的整个屏幕了。

image.png
  如果使用的是LaunchImage,那么需要添加一张尺寸为1125x2436的图片,否则在iPhone X上会出现上下两条黑边的现象。
image.png
  • 没添加尺寸为1125x2436的图片前


    image.png
  • 添加尺寸为1125x2436的图片后


    image.png
  • 下面是iPhone X的安全区

  iPhoneX竖屏下,顶部为了适应齐刘海,状态栏高度由以前的20px变为了44px,底部为了适应上滑的Home条,苹果建议预留高度为34px的空白区域。


image.png

  iPhoneX横屏下,由于一边会有齐刘海的影响,左右分别设置边距为44px,同时底部为了适应上滑的Home条,设置距离为21px。


image.png
  iPhoneX每一段的高度
image.png
  • 适配时常用的宏
// 屏幕宽度
#define ScreenWidth [UIScreen mainScreen].bounds.size.width

// 屏幕高度
#define ScreenHeight [UIScreen mainScreen].bounds.size.height

// 判断是否为iPhone X 
#define IsiPhoneX (ScreenWidth == 375.f && ScreenHeight == 812.f ? YES : NO)
#define Is_iPhoneX ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(1125, 2436), [[UIScreen mainScreen] currentMode].size) : NO)

// 状态栏高度
#define StatusHeighe [[UIApplication sharedApplication] statusBarFrame].size.height

//导航栏高度
#define NaviBarHeight self.navigationController.navigationBar.frame.size.height

//状态栏和导航栏的高度
#define NaviBarStatusBarHeight ([[UIApplication sharedApplication] statusBarFrame].size.height+self.navigationController.navigationBar.frame.size.height)

//底部菜单栏高度
#define TabBarHeight self.tabBarController.tabBar.frame.size.height

//安全区
#define ViewSafeAreInsets(view) ({UIEdgeInsets insets; if(@available(iOS 11.0, *)) {insets = view.safeAreaInsets;} else {insets = UIEdgeInsetsZero;} insets;})

注:竖屏时底部间距为:34,横屏时为:21
  在没又做iPhone X屏幕适配之前,我在心中会默默的问候苹果的设计师一万遍,做了适配之后,我发现并没有想象中的那么多困难,需要改动的地方并不是很多,这要得益于苹果软件工程师给的调整方案相对简单,不过总的来说,苹果的硬件设计和软件设计在业界都是一流的,作为开发者,通过不断的学习和开发,能给用户良好的体验,还是值得的。

相关文章

  • iPhone X屏幕适配

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

  • 适配iPhoneX和Xcode9

    一、iPhone X的适配 1、iPhone X, 5.8 英寸,屏幕分辨率为 1242 x 2800 除去底部固...

  • 适配iPhone XR/iPhone XS Max

    iPhone X系列屏幕相关信息: 1.启动图适配:iPhone XR:828px x 1792pxiPhone ...

  • ios, iOS11适配,iphoneX适配

    一. iPhone X 适配 1.iPhone X 屏幕上下有黑道,没有沾满全屏 解决办法:LaunchImage...

  • iPonex系列适配

    iPhone X系列屏幕相关信息: 1.启动图适配:iPhone XR:828px x 1792pxiPhone ...

  • IOS 适配&开发策略

    屏幕尺寸适配 2007 年,初代 iPhone发布,其拥有 3.5寸屏幕,运行 iPhone OS X。在后续几年...

  • 所有iOS设备的屏幕

    屏幕适配比例.png iPhone 设备: iPhone 1G --- 320x480 iPhone 3G ---...

  • iPhone X 屏幕适配,没有铺满屏幕的情况

    今天在适配iPhone X的时候,发现iPhone X的屏幕上下没有铺满。新建的项目,以及写的Demo都是铺满屏幕...

  • iPhone X屏幕适配

    前言 iPhone X出来后,屏幕顶部的齐刘海曾让许多人病垢,使用者看了会不爽,App开发者对这个齐刘海也深恶痛绝...

  • iPhone X 屏幕适配

    iPhone X : 5.8寸 分辨率:375 x 812 1.LaunchImage添加新尺寸图片来使用 iPh...

网友评论

    本文标题:iPhone X屏幕适配

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