前天9月21日,手机更新到iOS 11, 看了一下早期上架 App Store 的应用, 啥问题都没有, 心里正沾沾自喜也松了一口气......
可昨夜更新到 Xcode9后编译代码,发现还有一些问题的, 因为同时管理了好几个应用,其他应用也是需要同步作 iOS 11适配, 所以好记不如赖笔头, 省得适配其他应用的时候忘记.....
问题 1: UINavigationBar 内UIBarButtonItem按钮错位拉伸
问题描述:
好在公司的几个应用的导航栏设计并不复杂, 不需要自定义 titleView,所以不涉及到自定义导航titleView的宽度适配问题.
但是,自定义的 MANavigationController里所重写的UIBarButtonItem返回按钮 icon 被拉宽,并且各界面导航栏UIBarButtonItem按钮, 也同样挤压和错位,设置的 title 也看不到了.
以下2张截图就是Xcode9编译代码发现的iOS 11下UIBarButtonItem按钮出现的问题:
-
图1: 主界面顶部左右3个按钮被拉伸
[图片加载中,请耐心等待....]
IMG_4897.PNG 图2: 顶部导航栏中间的 title 消失, 3个按钮错位和被拉伸
[图片加载中,请耐心等待....]
解决方案:
最简单的解决方案: 将 UIbutton 包装到 UIview 内, 再通过initWithCustomView方法传递给UIBarButtonItem
//针对 iOS11适配改写 的关键性代码, 就这么几行,完全搞定了
UIView *containVew = [[UIView alloc] initWithFrame:btn.bounds];
[containVew addSubview:btn];
return [[UIBarButtonItem alloc]initWithCustomView:containVew];
以下代码摘自 MISSAJJ 写的MAButtonTool工具类,为了节约时间,提高创建按钮控件的效率,特抽出一个创建各种按钮的类方法
支持：
1,图片按钮 (默认居中按钮，左返回按钮，右分享按钮)
2,自定义文字图片靠左靠右按钮
3,按项目需求，设定了按钮样式和位置样式
4,只要修改一下分享和返回按钮图片就可以直接应用到项目中了
5,由于美工给的图片素材尺寸会不同,所以按钮的frame和setImageEdgeInsets可根据项目素材情况在VC层创建后重写调整
6,支持block调用按钮事件
使用方法请看:https://github.com/MISSAJJ/MAButtonTool
^_^ 我只要在这个工具类里针对 iOS 11增加几行包装代码,
就解决了全部项目在 iOS 11下导航栏按钮错位问题,
这就是包装工具类的好处......
#pragma mark ==[自定义 block 导航栏 按钮]==
+(UIBarButtonItem *)createButtonWithImage:(NSString * __nullable)imageStr position:(MAButtonToolPostion)position type:(MAButtonToolType)type actionBlock:(ButtonItemBlock)block
{
UIButton* btn;
if (position == MAButtonToolPostionLeft) { //位置靠左
if (type ==MAButtonToolTypeBack) { //返回按钮
btn = [self createLeftBackButton];
}else{
btn = [self createLeftButton:imageStr]; //默认靠左按钮
}
}else if (position == MAButtonToolPostionRight) { //位置靠右
if (type ==MAButtonToolTypeShare) { //分享按钮
btn = [self createRightShareButton];
}else{
btn = [self createRightButton:imageStr];//默认考右按钮
}
}else { //位置中间
btn = [self createButton:imageStr];
}
[btn addTouchAction:^(UIButton *btn) {
if (block)
{
block(btn);
}
}];
//针对 iOS11适配改写
UIView *containVew = [[UIView alloc] initWithFrame:btn.bounds];
[containVew addSubview:btn];
return [[UIBarButtonItem alloc]initWithCustomView:containVew];
}
#pragma mark ==[左自定义图片按钮]==
+ (UIButton *)createLeftButton:(NSString *)imageStr
{
UIButton* btn= [self createButton:imageStr];
[btn setImageEdgeInsets:UIEdgeInsetsMake(0, -10, 0, 10)];
return btn;
}
#pragma mark ==[右自定义图片按钮]==
+ (UIButton*)createRightButton:(NSString*)imageStr
{
UIButton* btn=[self createButton:imageStr];
[btn setImageEdgeInsets:UIEdgeInsetsMake(0, 10, 0, -10)];
return btn;
}
#pragma mark ==[左返回按钮]==
+ (UIButton*)createLeftBackButton
{
UIButton* btn= [self createButton:@"backarrow_white"];
btn.frame = CGRectMake(0, 0, 50, 50);
[btn setImageEdgeInsets:UIEdgeInsetsMake(0, -20, 0, 20)];
return btn;
}
#pragma mark ==[右分享按钮]==
+ (UIButton*)createRightShareButton
{
UIButton* btn= [self createButton:@"share_white"];
btn.frame = CGRectMake(0, 0, 35, 35);
[btn setImageEdgeInsets:UIEdgeInsetsMake(0, 10, 0, -10)];
return btn;
}
解决问题后的导航栏显示截图
-
图1: 导航栏左右3个按钮显示正常, 中间的标题也显示正常了
[图片加载中,请耐心等待....]
IMG_4901.PNG -
图2: 主界面顶部左右3个按钮显示正常了
[图片加载中,请耐心等待....]
IMG_4901.PNG
问题 2 : Xcode9下相册等访问权限问题
查了资料说iOS11下，苹果对相册的权限key做了调整，原来的 NSPhotoLibraryUsageDescription ，在iOS11之后，改成了NSPhotoLibraryAddUsageDescription。
针对于此测试了一下应用,果然毫无悬念, 立即去 info.plist 把 key 改成NSPhotoLibraryAddUsageDescription, 很快解决问题了.
图3: info.plist内设置NSPhotoLibraryAddUsageDescription权限
[图片加载中,请耐心等待....]
问题 3 : 等我好好睡个美容觉之后, 再继续写吧....... : )
昨夜熬到凌晨3点,适配发布好了[AR 扫描器]APP应用,已经提交审核,
今夜适配另外一个[乐游博物馆]APP 应用, 不知不觉又已经凌晨1:00了,
这两个星期几乎每天都只睡了几个小时,
好怕自己迅速变老,
好怕自己肾衰竭猝死,
好怕自己吃东西没滋味,
好怕自己神经衰落睡不着,
今天可是周末啊! ~周末啊! ~周末啊! ~
.........哎........
问题 4 : MJRefresh下拉刷新适配 iOS 11和 iPhone X问题
熬夜完成了公司的2个应用的 iOS 11适配之后, 今晚开始适配自己的一些项目,打开其中一个项目在不同的模拟器下分别编译看效果, 底部自定义 tabbar 显示没有问题, 但顶部是隐藏了 NavigationBar并采用了MJRefresh下拉刷新,发现有错位..
图4: iOS 11下拉刷新出现错位问题
[图片加载中,请耐心等待....]
图4: iPhone X下拉刷新出现错位问题
[图片加载中,请耐心等待....]
我的解决方案: (灰常简单)
因为我的布局是 CollectionView, 所以只要设置 iOS 11的新特性方法contentInsetAdjustmentBehavior为UIScrollViewContentInsetAdjustmentNever就可以了
以此类推,如果是 UITableView 布局的,也是设置contentInsetAdjustmentBehavior
判定 iOS 11的方法, 官方建议的方法:
以下是官方的屏幕尺寸, 原本最初的想法就是根据屏幕的高度812pt来判定
官方建议的方法 :
if (@available(iOS 11.0, *)) {
}else{
}
我的适配代码:
if (@available(iOS 11.0, *)) {
_collectionView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
} else {
// Fallback on earlier versions
}
判定iPhoneX的方法 :
#define isIPhoneX ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? [[UIScreen mainScreen] currentMode].size.height==2436 : NO)
其他的一些相关适配方法：(摘自 MJRefresh讨论区的解决方案)
注：首先这个下拉刷新的偏移量并不是MJRefresh造成的，但是确实需要适配，比如通栏ViewController显示的时候，刘海会遮住下拉刷新的组件，解决办法是对下拉刷新控件自定义，调整内部组件的布局，通栏的ViewController地方使用自定义的下拉控件。
对于iOS11下的iPhoneX适配下拉刷新有以下几点：
1，首先请配置相应的启动图，尺寸是1125*2436；
2，对于通栏ViewController中的UIScrollView，系统会默认根据contentInsetAdjustmentBehavior属性改变其bounds的y值为-44，导致UIScrollView中的所有子控件下移，解决办法是，对于通栏ViewController，请设置其UIScrollView的contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever。
其他适配点：
1，iOS11下的iPhoneX的导航栏为高度44，状态栏高度也调整为44，所以整个顶部状态栏的高度和导航栏的高度一起是88，自定义导航栏的同学需要根据系统机型控制导航栏高度；
2，iOS11下的iPhoneX的tabBar的高度调整为83，自定义tabBar的同学建议使用Frame布局；
3，iOS11下的iPhoneX下，屏幕底部默认显示了长条状的Home键指示器，可以通过UIViewController (UIHomeIndicatorAutoHidden)分类中的prefersHomeIndicatorAutoHidden来隐藏，但是官方并不建议这样做。
适配 iOS 11和 iPhone X 之后的界面效果
我的建议:
在 iPhone X 下还是最好还是有导航栏的设计比较美观, 因为隐藏导航栏后, 刘海会把顶部控件切割掉, 画面就比较尴尬了....哈哈~~
图5: 适配后的截图
[图片加载中,请耐心等待....]
图6: 适配后的下拉刷新,同时隐藏导航栏的截图
图7: 界面上滑显示导航栏的效果
iPhone X 导航栏错位问题
iOS11下的iPhoneX的导航栏为高度44，状态栏高度也调整为44，所以整个顶部状态栏的高度和导航栏的高度一起是88,所以在自定义导航栏里针对 iPhone X 修改的高度
我的解决方法:
我所有的项目都是使用了宏定义参数的方法来设置各种控件的, 所以只要改写这些相关宏定义参数, 整个项目都同步做好了适配, 所以平时的积累和归纳思维很重要,关键时刻可以减轻很多不必要的重复工作量.
/*****宏定义 *****/
//导航栏高度
#define MANavBarHeight isIPhoneX ? 88 : 64
//底部Tabbar 高度
#define MATabBarHeight isIPhoneX ? 83 : 49
//状态栏高度
#define MAStatusBarHeight isIPhoneX ? 44 : 20
//一些相关同步对应的代码
// set navigationBar backgroundImage
- (void)MA_setBackgroundImage:(UIImage *)image
{
[self.backgroundView removeFromSuperview];
self.backgroundView = nil;
if (self.backgroundImageView == nil)
{
// add a image(nil color) to _UIBarBackground make it clear
[self setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
self.backgroundImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.bounds), MANavBarHeight)];
self.backgroundImageView.autoresizingMask = UIViewAutoresizingFlexibleWidth;
// _UIBarBackground is first subView for navigationBar
[self.subviews.firstObject insertSubview:self.backgroundImageView atIndex:0];
}
self.backgroundImageView.image = image;
}
// set navigationBar barTintColor
- (void)MA_setBackgroundColor:(UIColor *)color
{
[self.backgroundImageView removeFromSuperview];
self.backgroundImageView = nil;
if (self.backgroundView == nil)
{
// add a image(nil color) to _UIBarBackground make it clear
[self setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
self.backgroundView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.bounds), MANavBarHeight)];
self.backgroundView.autoresizingMask = UIViewAutoresizingFlexibleWidth;
// _UIBarBackground is first subView for navigationBar
[self.subviews.firstObject insertSubview:self.backgroundView atIndex:0];
}
self.backgroundView.backgroundColor = color;
}
其他方法:
网络里也有相关这种重写layoutSubviews的方法,我试过之后发现导航栏变透明,并且颜色怪怪的了, 所以最终还是用了上面的方法解决了问题, 下面的这种方法大家也可是尝试一下
自定义的navigationBar，在iOS11上运行就可能出现布局错乱的bug，
解决办法是重写UINavigationBar的layoutSubviews方法调整布局：
- (void)layoutSubviews {
[super layoutSubviews];
//注意导航栏及状态栏高度适配
self.frame = CGRectMake(0, 0, CGRectGetWidth(self.frame), MANavBarHeight);
for (UIView *view in self.subviews) {
if([NSStringFromClass([view class]) containsString:@"Background"]) {
view.frame = self.bounds;
}
else if ([NSStringFromClass([view class]) containsString:@"ContentView"]) {
CGRect frame = view.frame;
frame.origin.y = statusBarHeight;
frame.size.height = self.bounds.size.height - frame.origin.y;
view.frame = frame;
}
}
}
适配 iPhone X 之后的截图
问题 5 : XCode9打包上传遇到的问题和解决方式
问题:上传后返回警告,缺失1024px的图标
原因和解决: 升级Xcode9后Assets/AppIcon下多了一个1024pt的icon框,需要补上缺失的图标
问题 6 : iPhone X下自定义键盘的高度如何增加34px 的高度
iPhone X 的默认系统键盘 : 底部会自动加上高度
问题: 自定义的表情键盘的底部在 iPhone X 下没有增加高度
将自定义表情emojiToolBarView设置为 UITextView输入框的inputAccessoryView,emojiToolBarView会置顶于系统键盘,并且跟随系统键盘向上向下移动
self.customTextView.inputAccessoryView = self.emojiToolBarView;
//点击自定义表情按钮事件的逻辑
- (IBAction)emotionBtnClicked:(id)sender {
UIButton *button = sender;
if (!isEmotionShow) {
[button setImage:[UIImage imageNamed:@"board_system"] forState:UIControlStateNormal];
isEmotionShow = YES;
isKeyboard = NO;
// self.customEmojiBoardView为自定义表情键盘 View
self.customTextView.inputView = self.customEmojiBoardView;
[self.customTextView resignFirstResponder];
}else{
[button setImage:[UIImage imageNamed:@"board_emoji"] forState:UIControlStateNormal];
isEmotionShow = NO;
isKeyboard = YES;
self.customTextView.inputView = nil;
[self.customTextView resignFirstResponder];
}
}
解决办法: 将你自定义的键盘的customEmojiBoardView 的高度加上34就可以了
//自定义表情键盘的宽高
CGFloat viewWidth = [UIScreen mainScreen].bounds.size.width - 16;
//原本自定义的高度是 216, 那就判定 iPhone X 下高度 再加上 34 为: 216+34 ;
CGFloat viewHeight = isPhoneX ? 250 : 216;
//自定义表情键盘customEmojiBoardView 的初始化
- (instancetype)init {
self = [super initWithFrame:CGRectMake(0, 0,viewWidth, viewHeight)];
if (self) {
以下代码省略......
}
return self;
}
最后:
Contact 联系方式:
希望能有更多的狮子一起共勉探讨学习，愉快奔跑！
联系方式: QQ 996174446 ［验证：iOS 攻城狮］
MISSAJJ网站 : http://www.MISSAJJ.com
Github : https://github.com/MISSAJJ
GitBook : https://www.gitbook.com/@missajj
MISSAJJ琴瑟静听（ Swift 和 Objective-C ）iOS 开发项目电子书
https://github.com/MISSAJJ/MISSAJJ_IOS_DEVELOPMENT_BOOK
