IOS学习——iphone X的适配
2017-11-07 10:03
351 查看
说实话,对于一个刚入门iOS两个月的新手而言,在拿到这个任务的时候整个人都是懵逼的,怎么做适配?哪些地方需要适配?该怎么做?一个个问题搞得头都大了。
首先,啥都不管,先在iPhone X上运行起来看看效果在说,运行之后出现的问题主要有如下几个:
屏幕尺寸还是6S上的尺寸大小,用 [[UIScreen mainScreen] bounds] 打印log确实如此
自定义的导航栏的返回按钮右移明显
UISearchBar的高度有变化,而且点击之后背景颜色和原先不一致
UITableview的header高度变大,有的地方会出现空白cell格
UITableview出现的位置不对
某些控件的相对位置不对
粗略发现这些变化问题之后,思考一下,主要问题分为两类:一是iPhone X的屏幕尺寸变化带来的变化,二是iOS 11新特性引起的问题。iPhone X屏幕尺寸的变化主要出现在屏幕的头部和底部,头部设置了导航栏,基本没有出现什么问题,尾部主要就是某些控件的位置出现变化,可能是因为设置的相对位置是相对view的mas_bottom设置的(项目中是纯代码布局,使用AutoLayout框架Masonry进行布局),这一块的问题很少,也很简单,改变一下相对位置的值看看效果就ok。那么剩下的问题应该就是因为iOS 11新特性的问题。因此,首先我们就需要好好研究一下iOS 11有那些新特性,在项目中会出现什么样的变化呢?
了解iOS 11新特性的方法很多,网上也有很多解析的博客文档,但是最直接最准确的学习方法就是看官方文档:Human Interface Guidelines ,这个文档中介绍了iOS 11的新特性,还有iPhone X的变化和特点都有所介绍,大家可以参考一下,下面我主要列举一下跟界面相关的新特性,jut8大家也可以参考下面的一些博客的分析链接:
导航栏变化,大号字体的变化,iOS 11之前的导航栏高度是64px,其中状态栏的高度是20px,iOS 11中状态栏的盖度是44px。
底部tabBar的高度变化,iOS 11中底部tabBar的高度由之前的49px变为83px,增高了34px。
提出了safeArea的概念,新概念。
关于iPhone X、iOS 11 、Xcode9,我们应该知道这些
iOS 11 安全区域适配总结(转)
iOS11及iPhoneX适配-思源探索方案
了解完iOS 11的新特性之后,接着就分析上面出现的问题的原因与适配方法。
屏幕尺寸还是6S上的尺寸大小,用[[UIScreen mainScreen] bounds]打印log确实如此
这个的主要问题就在于没有适配iPhone X的启动页,如果你的项目中没有自定义的启动页则无所谓,否则要进行适配。设置方法是选中Images.xcassets中的LaunchImage,右边选中图片右上角红框中iOS8.0 and later下面的勾,然后就会出现图片左上角红框内关于iPhone X的启动页的空白框。然后将切好的iPhone X的启动页的图(这个图要先放进Images.xcassets中)拖进图片左上角箭头所指的框中就可以了。By the way,启动页的图的大小一般是按照iPhone X的大小来切,具体尺寸在上面提到的官网有说到,就是:1125px × 2436px (375pt × 812pt @3x),如果还有导航页、广告页也基本上都可以按照这个尺寸来切图。
启动页加载好了之后,在运行的时候会发现界面已经是带刘海的界面了,至此,第一个问题解决。
2. 自定义的导航栏的返回按钮右移明显
iOS 11改动相当大的就是导航栏的部分,除了新加入了largeTitles和searchController两个新特性,还对导航栏的图层结构进行了调整,在原来的已经复杂的不要的图层中又新增了新的图层!是的你没有看错,_UINavigationBarContentView和_UIButtonBarStackView和_UITAMICAdaptorView 而我们之前的leftBarButtonItem什么的现在都在UIButtonBarStackView中了。
我们可以看到一个_UIButtonBarStackView占掉了12个像素的左边约束,_UITAMICAdaptorView又占据了8个像素的左边约束,所以说我们很无语的就被占据了20px,更可气的是,都是私有对象,不容易修改!这也就是为什么我们的返回键的位置会右移的原因了。
为了解决这一问题,直接通过 self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView: backButton]; 将自定义的按钮Button赋值给self.navigationItem.leftBarButtonItem,则其而位置由系统确定,则会出现上面的右移的情况。我们知道,Button中其实是由一个UIImage和一个UILabel组成的,然后我们可以通过contentEdgeInsets、imageEdgeInsets、titleEdgeInsets来设置button本身、button中的图片以及button中的label的相对位置,这个相对位置是相对初始位置而言的,所以我们这里只需要对自定义的button进行这三个值的设定就可以解决按钮右移的问题了,具体向左偏移量可以自己设置。效果图如下图所示,左边是修复前,右边是修复后的图。
3. UISearchBar的高度有变化,而且点击之后背景颜色和原先不一致
上图右边图是点击搜索框之前和点击结束输入后正常情况下的效果,左边图是iOS 11下点击点击结束输入后的效果。因为在这里项目中并没有对搜索栏进行自定义或者修改参数,但是iPhone X的自带系统软件中搜索点击之后很正常,所以猜测很可能是默认布局的一些参数被修改了。参看项目源代码,发现我们对setExtendedLayoutIncludesOpaqueBars进行了设置为YES。这个参数的设置会有什么影响呢?ExtendedLayoutIncludesOpaqueBars参数的含义是不透明的导航栏条下是否可以扩展,默认是NO,如果设为YES,则表示可以扩展,即可能会受到导航栏的影响,我们知道在iOS 11中导航栏的变化非常大。所以试了一下将其设置为NO之后的效果,还真是。。。适配代码如下:
虽然问题解决了,但是岁这个参数还是了解不够,后面自己查了一些资料,觉得这一篇博客写的比较直观,感兴趣的可以看下:与导航栏下控件的frame相关的edgesForExtendedLayout、translucent、extendedLayoutIncludesOpaqueBars、automaticallyAdjustsScrollViewInsets等几个属性的详解
4. UITableview的header高度变大,有的地方会出现空白cell格
iOS 11中对UITableview的改变也是蛮大的,原本的automaticallyAdjustsScrollViewInsets竟然过期了,在IOS 11下 APPLE推荐使用UIScrollView的contentInsetAdjustmentBehavior属性进行设置自动计算滚动视图的内容边距。 并且在iOS 11中如果没有重写header、footer的height和view函数,iOS 11中系统不会像之前那样自动调用。所以出现空白cell格的原因应该就是缺少footer的height和view函数,加上就没什么问题了。这个就不放图了,很简单
5. UITableview出现的位置不对
和问题4中的问题一样,都是UITableview的问题,主要原因还是iOS 11中automaticallyAdjustsScrollViewInsets过期了,加上导航栏的高度的变化和safeArea的概念的提出,使得UITableview在iOS 11的布局上会出现一些偏差,因为涉及到项目信息,所以就不放图了。解决方案如下
6. 某些控件的相对位置不对
这个的主要问题就是跟iPhone X的屏幕特性有关,之前都是用纯代码用相对布局进行画的图,iPhone X的屏幕高度增加之后,再加上iPhone X的刘海特性和底部圆角的特点,相对屏幕的top、bottom这些参数设定之后显然会引起布局效果的不同。解决方案显然就是改变相关参数看效果就好了。
未完待续,目前就发现这些问题,后面再有啥问题继续加上。。。。
首先,啥都不管,先在iPhone X上运行起来看看效果在说,运行之后出现的问题主要有如下几个:
屏幕尺寸还是6S上的尺寸大小,用 [[UIScreen mainScreen] bounds] 打印log确实如此
自定义的导航栏的返回按钮右移明显
UISearchBar的高度有变化,而且点击之后背景颜色和原先不一致
UITableview的header高度变大,有的地方会出现空白cell格
UITableview出现的位置不对
某些控件的相对位置不对
粗略发现这些变化问题之后,思考一下,主要问题分为两类:一是iPhone X的屏幕尺寸变化带来的变化,二是iOS 11新特性引起的问题。iPhone X屏幕尺寸的变化主要出现在屏幕的头部和底部,头部设置了导航栏,基本没有出现什么问题,尾部主要就是某些控件的位置出现变化,可能是因为设置的相对位置是相对view的mas_bottom设置的(项目中是纯代码布局,使用AutoLayout框架Masonry进行布局),这一块的问题很少,也很简单,改变一下相对位置的值看看效果就ok。那么剩下的问题应该就是因为iOS 11新特性的问题。因此,首先我们就需要好好研究一下iOS 11有那些新特性,在项目中会出现什么样的变化呢?
了解iOS 11新特性的方法很多,网上也有很多解析的博客文档,但是最直接最准确的学习方法就是看官方文档:Human Interface Guidelines ,这个文档中介绍了iOS 11的新特性,还有iPhone X的变化和特点都有所介绍,大家可以参考一下,下面我主要列举一下跟界面相关的新特性,jut8大家也可以参考下面的一些博客的分析链接:
导航栏变化,大号字体的变化,iOS 11之前的导航栏高度是64px,其中状态栏的高度是20px,iOS 11中状态栏的盖度是44px。
底部tabBar的高度变化,iOS 11中底部tabBar的高度由之前的49px变为83px,增高了34px。
提出了safeArea的概念,新概念。
关于iPhone X、iOS 11 、Xcode9,我们应该知道这些
iOS 11 安全区域适配总结(转)
iOS11及iPhoneX适配-思源探索方案
了解完iOS 11的新特性之后,接着就分析上面出现的问题的原因与适配方法。
屏幕尺寸还是6S上的尺寸大小,用[[UIScreen mainScreen] bounds]打印log确实如此
这个的主要问题就在于没有适配iPhone X的启动页,如果你的项目中没有自定义的启动页则无所谓,否则要进行适配。设置方法是选中Images.xcassets中的LaunchImage,右边选中图片右上角红框中iOS8.0 and later下面的勾,然后就会出现图片左上角红框内关于iPhone X的启动页的空白框。然后将切好的iPhone X的启动页的图(这个图要先放进Images.xcassets中)拖进图片左上角箭头所指的框中就可以了。By the way,启动页的图的大小一般是按照iPhone X的大小来切,具体尺寸在上面提到的官网有说到,就是:1125px × 2436px (375pt × 812pt @3x),如果还有导航页、广告页也基本上都可以按照这个尺寸来切图。
启动页加载好了之后,在运行的时候会发现界面已经是带刘海的界面了,至此,第一个问题解决。
2. 自定义的导航栏的返回按钮右移明显
iOS 11改动相当大的就是导航栏的部分,除了新加入了largeTitles和searchController两个新特性,还对导航栏的图层结构进行了调整,在原来的已经复杂的不要的图层中又新增了新的图层!是的你没有看错,_UINavigationBarContentView和_UIButtonBarStackView和_UITAMICAdaptorView 而我们之前的leftBarButtonItem什么的现在都在UIButtonBarStackView中了。
<_UIButtonBarStackView: 0x7ff988074290; frame = (12 0; 48 44); layer = <CALayer: 0x60000042bc80>> Printing description of $11: <UIView: 0x7ff9880764a0; frame = (0 22; 8 0); layer = <CALayer: 0x60000042b7c0>> Printing description of $12: <_UITAMICAdaptorView: 0x7ff988076790; frame = (8 2; 40 40); autoresizesSubviews = NO; layer = <CALayer: 0x60000042b8a0>>
我们可以看到一个_UIButtonBarStackView占掉了12个像素的左边约束,_UITAMICAdaptorView又占据了8个像素的左边约束,所以说我们很无语的就被占据了20px,更可气的是,都是私有对象,不容易修改!这也就是为什么我们的返回键的位置会右移的原因了。
为了解决这一问题,直接通过 self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView: backButton]; 将自定义的按钮Button赋值给self.navigationItem.leftBarButtonItem,则其而位置由系统确定,则会出现上面的右移的情况。我们知道,Button中其实是由一个UIImage和一个UILabel组成的,然后我们可以通过contentEdgeInsets、imageEdgeInsets、titleEdgeInsets来设置button本身、button中的图片以及button中的label的相对位置,这个相对位置是相对初始位置而言的,所以我们这里只需要对自定义的button进行这三个值的设定就可以解决按钮右移的问题了,具体向左偏移量可以自己设置。效果图如下图所示,左边是修复前,右边是修复后的图。
//自定义button按钮 CLBackButton *backButton = [CLBackButton createBackButtnWithPopVc:returnTitle]; //ios11 返回按钮右移 适配 if (@available(iOS 11.0, *)) { backButton.contentEdgeInsets = UIEdgeInsetsMake(0, -15,0, 0); backButton.imageEdgeInsets = UIEdgeInsetsMake(0, -15,0, 0); backButton.titleEdgeInsets = UIEdgeInsetsMake(0, -10,0, 0); } //将自定义的按钮添加到返回键上 self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView: backButton];
3. UISearchBar的高度有变化,而且点击之后背景颜色和原先不一致
上图右边图是点击搜索框之前和点击结束输入后正常情况下的效果,左边图是iOS 11下点击点击结束输入后的效果。因为在这里项目中并没有对搜索栏进行自定义或者修改参数,但是iPhone X的自带系统软件中搜索点击之后很正常,所以猜测很可能是默认布局的一些参数被修改了。参看项目源代码,发现我们对setExtendedLayoutIncludesOpaqueBars进行了设置为YES。这个参数的设置会有什么影响呢?ExtendedLayoutIncludesOpaqueBars参数的含义是不透明的导航栏条下是否可以扩展,默认是NO,如果设为YES,则表示可以扩展,即可能会受到导航栏的影响,我们知道在iOS 11中导航栏的变化非常大。所以试了一下将其设置为NO之后的效果,还真是。。。适配代码如下:
//适配iOS 11的搜索栏点击之后颜色变化问题 if (@available(iOS 11.0, *)) { [self setExtendedLayoutIncludesOpaqueBars:NO]; }else{ [self setExtendedLayoutIncludesOpaqueBars:YES]; }
虽然问题解决了,但是岁这个参数还是了解不够,后面自己查了一些资料,觉得这一篇博客写的比较直观,感兴趣的可以看下:与导航栏下控件的frame相关的edgesForExtendedLayout、translucent、extendedLayoutIncludesOpaqueBars、automaticallyAdjustsScrollViewInsets等几个属性的详解
4. UITableview的header高度变大,有的地方会出现空白cell格
iOS 11中对UITableview的改变也是蛮大的,原本的automaticallyAdjustsScrollViewInsets竟然过期了,在IOS 11下 APPLE推荐使用UIScrollView的contentInsetAdjustmentBehavior属性进行设置自动计算滚动视图的内容边距。 并且在iOS 11中如果没有重写header、footer的height和view函数,iOS 11中系统不会像之前那样自动调用。所以出现空白cell格的原因应该就是缺少footer的height和view函数,加上就没什么问题了。这个就不放图了,很简单
5. UITableview出现的位置不对
和问题4中的问题一样,都是UITableview的问题,主要原因还是iOS 11中automaticallyAdjustsScrollViewInsets过期了,加上导航栏的高度的变化和safeArea的概念的提出,使得UITableview在iOS 11的布局上会出现一些偏差,因为涉及到项目信息,所以就不放图了。解决方案如下
//ios11 tableview 适配 if (@available(iOS 11.0, *)) { if ([self.tableView respondsToSelector:@selector(setContentInsetAdjustmentBehavior:)]) { self.tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever; } }
6. 某些控件的相对位置不对
这个的主要问题就是跟iPhone X的屏幕特性有关,之前都是用纯代码用相对布局进行画的图,iPhone X的屏幕高度增加之后,再加上iPhone X的刘海特性和底部圆角的特点,相对屏幕的top、bottom这些参数设定之后显然会引起布局效果的不同。解决方案显然就是改变相关参数看效果就好了。
未完待续,目前就发现这些问题,后面再有啥问题继续加上。。。。
相关文章推荐
- ios学习7_iPhone屏幕尺寸、分辨率及适配
- ios学习7_iPhone屏幕尺寸、分辨率及适配
- ios学习7_iPhone屏幕尺寸、分辨率及适配
- 【IOS学习】iPhone屏幕尺寸、分辨率及适配
- Iphone分辨率和IOS启动画面和图标设置(适配IOS7 and Xcode5)
- iOS学习 IOS 9 适配系列教程(HTTP转HTTPS的两种方法)
- App适配iPhone 6/ Plus和iOS 8:10条小秘诀
- [源码、文档、分享] iOS/iPhone学习系列、代码教程----~~~持续更新中~~~
- ios学习--iphone 实现下拉菜单
- iOS APP启动图片适配iPhoneX
- iOS/iPhone学习系列、代码教程----~~~
- iOS 11 IPhoneX 适配不得不说的一些事儿
- iOS 11及iPhone X适配
- [iphone 学习] IOS框架介绍
- ios学习--iphone ipa打包文件制作
- 【iOS-Cocos2d游戏开发之八】开启高清(960*640)模式问题与解答、图片适配以及设置iphone横竖屏
- iOS:界面适配(二)--Universal通用程序 iPhone、iPad适配(关于xib)
- ios学习笔记之UI篇(四):美化按钮使其看起来具有iphone风格
- 适配 iOS App 到 iPhone 5 和 iOS 6
- iOS 11以及iPhone X的适配(转)