`

iOS 7 适配

    博客分类:
  • iOS7
阅读更多

适配iOS7开发

SEP 28TH, 2013

iOS7可以说是苹果一次革命性的变化,这样做为一个开发者需要做的事也不少。首先苹果的view布局有所变化,现在view默认是全屏模式,而所有的 bar(navigation bar, tool bar, search bars 与scope bars都是半透明),status bar则是全透明。有了这样的改变,写代码的时候就有我们折腾的了。 本文所说的适配是指:用xcode5+iOS7sdk编译的程序能正常的运行在iOS6及以下的设备上。

首先看一个例子,用xcode5创建一个Empty Application的工程, 然后新建一个继承UIViewController的类,并将这个类的一个实例做为window的rootViewController. 现在运行程序,将会看到一个空白页。 现在我们向里面加点东西。 在viewDidLoad中加入以下代码

1
2
3
4
5
6
7
8
self.view.backgroundColor = [UIColor grayColor];
UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
btn.frame = CGRectMake(0, 0, 100, 44);
btn.layer.cornerRadius = 0;
btn.layer.borderColor = [UIColor blackColor].CGColor;
btn.layer.borderWidth = 1;
[btn setTitle:@"Test" forState:UIControlStateNormal];
[self.view addSubview:btn];

现在运行,你将会看到在屏幕最顶处有一个黑色边框的button. 
注意没,是与statusBar重叠了。

下面我们做一些修改,修改AppDelegate中的window的rootViewController值:

1
2
3
ViewController *vc = [[ViewController alloc] init];
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:vc];
self.window.rootViewController = nav;

再运行,程序,你将看到 
我们的button到哪儿去了,其实它是被Navigation Bar档住了。细心的读者可能会问,你刚才不是说了Navigation Bar是半透明的吗?即然是半透明的为何我看不到button呢? 的确Navigation Bar是半透明的,不过透明度不高,然后看不清后成的button.如果你不相信,你可以再一个黑色的view看看效果。将下面代码放入 viewDidLoad

1
2
3
UIView *v = [[UIView alloc] initWithFrame:CGRectMake(100, 0, 100, 70)];
v.backgroundColor = [UIColor blackColor];
[self.view addSubview:v];

然后运行,看看效果: 
现在可以清楚的看到Navigation Bar后面的view, 可以看到,UIViewController的view是全屏的坐标系了。

这样与我们iOS6与以前的坐标不一样了,以前是从Navigation Bar底部开始计算y值的,现在却是从Status Bar开始计算y值。

不要着急,苹果公司有解决方案:将下面代码放在viewDidLoad中

1
self.edgesForExtendedLayout = UIRectEdgeNone;

再运行,看看效果: 
现在坐标就是开始从Navigation Bar开始计算了。然而这种情况只适合在Navigation Bar的情况,如果没有Navigation Bar, 坐标仍然是从Status Bar顶部开始计算的。

如果底部有Tab Bar的情况呢,如果要兼容以前的frame设置,那么就需要设置UIViewController的edgesForExtendedLayout为UIRectEdgeNone。

代码如何适配iOS7

如果我们的代码没有用storyboard, 没有用xib,纯代码的情况,如果要适配iOS7,那么上面只是介绍了有Navigation Bar, Tool Bar的情况,如果只是单纯的View,那么我们的代码运行在iOS7上,会有向上20px偏移,这需要手动修改:

1
2
3
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        self.view.bounds = CGRectMake(0, -20, self.view.frame.size.width, self.view.frame.size.height );
    }

这种方法需要对所有的UIViewController进行设置,比较麻烦,还有一种较为简单的方法,就是设置window,这样可以影响所有的subview, 参考自stackoverflow

1
2
3
4
5
6
7
8
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        [application setStatusBarStyle:UIStatusBarStyleLightContent];
        self.window.clipsToBounds =YES;
        self.window.frame =  CGRectMake(0,20,self.window.frame.size.width,self.window.frame.size.height-20);
        //Added on 19th Sep 2013
        self.window.bounds = CGRectMake(0, 20, self.window.frame.size.width, self.window.frame.size.height);
    }

下面是第二方法的运行效果: 
不过第二种方法有问题,当你Rotate Simulator的时候你将会看到问题,Status Bar位置将不动。所以我不推荐用第二种方法,可以写一个UIViewController的category方法,然后调用方法一中的代码。这样对全工 程进行修改以适配iOS7.

下面介绍一下xib的方法

新建一个UIViewController的子类,叫TestViewController,选中创建xib文件 然后,在在AppDelegate中将window的rootViewController换成我们新建的TestViewController实例,代 码如下:

1
2
TestViewController *vc2 = [[TestViewController alloc] init];
self.window.rootViewController = vc2;

用xcode4.6.3+ios6运行程序, 
现在我们在xib中拖入一个button,frame为(177, 0, 73, 44) 
由于iOS7中扁平化设计了,button没有了边框,等一下我们会用xcode5+ios7来运行本程序,为了更清楚的看清frame,在此我将 button的边框显示出来,前面代码生成的button也是显示了边框的,我们关系一个UIButton的变量textBtn到代码中,并用代码再生成 一个button

1
2
3
4
5
6
7
8
_testBtn.layer.borderWidth = 1;
UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
btn.frame = CGRectMake(0, 0, 100, 44);
btn.layer.cornerRadius = 0;
btn.layer.borderColor = [UIColor blackColor].CGColor;
btn.layer.borderWidth = 1;
[btn setTitle:@"Test" forState:UIControlStateNormal];
[self.view addSubview:btn];

运行程序,效果如下: 
关闭xocde4.5与Simulator,然后用xcode5打开用iOS7的效果: 
对比可以看出,iOS7是全屏的模式。 这样一来,从iOS6中升级过来的程序,布局就不正确了,有20px的偏移,上面介绍了用代码解决的方法,在这儿我们先用代码的方法来试试,在viewWillAppear中加入以下代码:

1
2
3
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        self.view.bounds = CGRectMake(0, -20, self.view.frame.size.width, self.view.frame.size.height );
    }

再运行程序,效果如下: 
其中代码加入的button,下移了20px, 可是xib中拖入的button还是以status bar顶为y=0开始计算frame.这可能是由于我们用到了auto layout, 所以xib有自己的frame计算方式. 代码生成的没有用auto layout约束,则受到了上面代码的影响。 我们在xocde5中选择xib,如果是xcode4.6创建的xib, xcode5会提示你升级,我们选择升级,如果你选择了忽略也没关系,可以在右边的open in下拉列表中选择xcode5. xcode5对xib做了很多优化,相比以前的xib,xcode5的xib文件不但小,而且功能更强大。 我们禁用xib的autolayout试试,再运行: 
这下由于没有auto layout的作用,都开始从status bar下面开始计算frame了。

如果你的程序view全是xib,没有用代码生成,那么这儿还有一种解决方法,()条件是xib中没有开启autolayout)不用代码控制self.view.bounds,所以我们先将viewDidLoad中的

1
2
3
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        self.view.bounds = CGRectMake(0, -20, self.view.frame.size.width, self.view.frame.size.height );
    }

删掉。

然后在在xcode5中选择我们的xib,并选择view中拖入的button,选择它的Size inspector,如图: 
细心的你可能发现了,右边较之前的版本多一些内容。多了一个ios6/ios7 Deltas.它就是用来做iOS6的xib适配到iOS7用的东西。 由于iOS7中,全屏的模式,所以我们需要设置我们的+20,这样才从status bar底部开始显示。现在我们将我们的button的y值设为20.如图: 
xcode5+ios7运行效果: 
由于它的frame是从20开始的,细心的读者可能会有疑问了,如果我们运行在iOS7以前的设备上,由于frame是从20开始的,不是我们想要的效果。的确是这样的,下面是iOS6上运行的效果: 
是从status bar下面20px.
也就是说适配工作不成功。 等等,刚才我们说的ios6/ios7 Deltas,现在是时候出场了。 现在我们在将Deltas中y值设为-20. 
再运行到iOS6的设备上,效果如下: 

小结: 从iOS7以前的工程适配到iOS7,且没有用autolayout,

  1. 在viewDidLoad中加入以下代码完成短配工作
1
2
3
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        self.view.bounds = CGRectMake(0, -20, self.view.frame.size.width, self.view.frame.size.height );
    }
  1. xib中用调整frame的y值+20,并设置Delats中y为-20. 如果是代码生成的view,则需要手动处理subview的frame的y值,所以都在原来基础上+20

最后我们要记住一点:iOS7默认是全屏的。 所以得有两套值。

 

适配iOS7开发2

SEP 28TH, 2013

在前一篇文章中介绍了非autolayout模式下iOS7的适配工作。 今天来介绍一下autolayout下的适配工作。

首先,我们用xcode4.6.3创建一个simgle view application. 选中Use storyboard.

拖一个UIButton到view中。 由于开启了autoLayout, 在xcode4.6.3中,自动会有两个auto layout约束,分别是水平与垂直的约束:

运行程序效果:



可以看到是垂直方向上距status bar底部是45px,距右边是186px.

现在我们用xcode5打开这个工程。会提示Upgrade storyboard,我们点击Upgrade. Upgrade后,你会发现,垂直方向上有变化了,约束是从顶部开始,不是从status bar底部开始计算。这也我们想要的结果不一样,我们还是希望约束是从status bar底部开始计算。

仔细看看storyboard中的View Controller, 你会发现,这儿多了两个东东,分别是Top Layout Guide,Bottom Layout Guide. 

选在我们的button,按住control键,然后拖到Top Layout Guide上,在弹出的对话框选择Vertical spacing



这样又建立了一个垂直约束,你会发现这个约束是从Status bar底部开始计算的。这个约束有点像是我们需要的, 
但是这个约束距status bar是25px,我们想要的是45px. 那只需要修改一下,将25px改为45px 
你会发现有storyboard中有红色提示,这说明约束条件发生了冲突,因为垂直约束的值都为45,显示冲突了。由于我们只需要status bar底部开始计算的那个约束,所以我们将旧的那个删掉即可。 

现在分别选择iOS6/iOS7来运行。都是距status bar下面45px显示button. 适配工程完成。

顺便介绍一下xcode5中,用xib或storyboard布局的时候,preview iOS7与iOS7以前版本的效果。 快捷键:option+command+enter 打开Assistant editor,然后选择右边的automatic->preview->xxxxx(preview)



然后在出现的画面下面有一个切换iOS7与以前版本的切换开关


这样可以方例你实时的查看布局效果以适配不同版本的iOS.

最后: auto layout是好东西,虽然只有>iOS6的版本才支持,但是我还是建意大家用auto layout,因为以后苹果也可能出现多种屏幕,到时候代码修改量将会减少。

参考:https://developer.apple.com/library/ios/qa/qa1797/_index.html

分享到:
评论

相关推荐

    ios项目适配ios6 ios7

    本项目主要关注的是如何将一个iOS项目适配到iOS6和iOS7这两个版本,因为它们之间存在显著的视觉和用户体验差异。iOS7引入了全新的设计语言,这使得许多在iOS6中正常工作的元素在新系统中可能需要调整。下面我们将...

    Ios7XIB适配

    在iOS开发中,当应用程序升级到iOS7时,开发者可能会遇到一些与用户界面相关的适配问题,特别是因为iOS7引入了全新的设计语言和状态栏透明特性。本篇将深入探讨如何解决iOS7中XIB(XML Interface Builder)文件在...

    ios6 7适配

    在iOS开发中,适配不同版本的操作系统是一项重要的工作,特别是在iOS 6和iOS 7之间,由于设计语言和用户界面的重大变化,适配显得尤为关键。标题"ios6 7适配"指的是针对这两种iOS版本进行应用兼容性的优化。 在iOS ...

    iOS自动适配

    // iOS适配 自动适配 手动适配 // 只需要在要适配的控制器上加下面3句话,即可完成自动适配 #pragma mark- AutoAjustAttag - (void)dealloc{ // 销毁参照 [self.view removeRelation]; } - (void)...

    ios7 UI过渡指南中文翻译版

    在开始适配iOS 7之前,开发者需要了解应用的特性,包括使用的设计方法(标准、自定义或混合)。同时,需要考虑是否支持iOS 6,以及如何使用AutoLayout来减少适配工作量。 3. 应用图标更新: 每个应用必须更新其图标...

    IOS7 UI适配

    ### IOS7 UI适配策略与实践 随着iOS系统的不断更新,开发者们面临着应用程序在新旧系统版本间保持一致用户体验的挑战。iOS7作为苹果操作系统的一个重大转折点,引入了全新的设计语言,对UI元素进行了彻底的重塑,这...

    IOS屏幕适配

    "IOS 屏幕适配" IOS 屏幕适配是 IOS 开发中非常重要的一方面,涉及到应用程序在不同 IOS 设备上的显示效果。IOS 屏幕适配可以分为两种方法:自动布局(AutoLayout)和autosize。 在 IOS6 之前,屏幕适配一般使用 ...

    ios页面适配

    ### iOS 页面适配详解 #### 一、iOS设备像素简介 在进行iOS页面适配之前,我们首先要了解iOS设备的像素特性。自iPhone 4引入Retina显示屏以来,苹果不断改进其显示技术,使得不同型号的iPhone具有不同的分辨率。...

    ios7 ios6(3.5inch,4inch)适配

    在iOS开发中,适配不同屏幕尺寸是至关重要的任务,特别是在iOS7和iOS6这两个操作系统版本之间,因为它们支持3.5英寸和4英寸两种不同的屏幕尺寸。此压缩包文件"IOS7AdaptDemo"提供了一个示例项目,旨在帮助开发者理解...

    ios9.2适配插件

    7. **安全更新**:iOS 9.2可能包含重要的安全补丁,开发者需确保应用不会因为忽视这些补丁而导致用户数据泄露或系统被攻击。 8. **设备支持**:iOS 9.2支持的设备范围可能与之前的版本不同,适配插件需要考虑各种...

    IOS版本兼容与屏幕适配

    IOS 版本兼容与屏幕适配 IOS 版本兼容与屏幕适配是移动应用开发中非常重要的一方面。随着 iPhone OS 的版本越来越多,用户由于各种原因没有升级到最新版,作为开发者,我们需要考虑这些用户的需求,使我们的软件能...

    ios-ios 11 适配.zip

    "ios-ios 11 适配.zip" 文件包含了一个名为 "IOS11AdapterDemo" 的示例项目,这显然是为了帮助开发者了解如何在Xcode 9中为iOS 11进行应用适配。以下是关于iOS 11适配的一些关键知识点: 1. **UI设计更新**:iOS 11...

    单纯聊一聊iOS10适配

    iOS10适配是开发者在升级到新操作系统版本时必须考虑的重要环节,以确保应用程序能够兼容并顺畅地运行。以下是一些关键知识点: 1. **工程改动**: - **工程配置**:Xcode8引入了新的签名设置,用"signing"选项...

    iOS 10 适配知识点总结 - 简书1

    iOS 10 适配知识点总结 iOS 10 适配知识点总结是指在 iOS 10 系统中,开发者需要注意的一些关键点,以确保 App 的正常运行和适配。下面是 iOS 10 适配知识点总结: 1. Xcode 8.0 的使用 在 iOS 10 中,Xcode 8.0...

    iOS 自动布局及适配iPhone6

    iOS自动布局及适配iPhone6的知识点涵盖了iOS应用开发中界面布局与适配的关键技术,主要包括自动布局(Auto Layout)的使用、屏幕分辨率和像素的处理,以及使用Size Classes来适配不同尺寸的屏幕。 1. 自动布局...

    iOS适配YYAnimatedImageView

    iOS14 适配 YYAnimatedImageView不显示图片的问题,iOS14 适配 YYAnimatedImageView不显示图片的问题,iOS14 适配 YYAnimatedImageView不显示图片的问题,iOS14 适配 YYAnimatedImageView不显示图片的问题,

    几行代码帮你完成ios屏幕适配Demo

    在iOS开发中,屏幕适配是一项至关重要的任务,因为设备的屏幕尺寸和分辨率各不相同,包括iPhone、iPad以及不同版本的iOS系统。本Demo旨在通过几行代码帮助开发者快速理解并实现iOS应用的屏幕适配,确保在各种设备上...

    swift-iOS9适配系列教程

    总的来说,适配iOS9不仅仅是更新Swift语法,还包括理解并利用新引入的特性,如Swift 2、ATS、Split View、SiriKit、Spotlight集成以及Xcode 7的改进。通过本系列教程,你将学会如何让你的Swift应用在iOS9上运行得...

    Ios 15.3 真机调试适配包

    这里提到的"Ios 15.3 真机调试适配包"是针对苹果最新操作系统版本iOS 15.3的调试工具集合,用于帮助开发者在iOS 15.3设备上进行应用程序的测试和优化。 首先,我们需要了解Xcode。Xcode是Apple官方提供的集成开发...

    ios-iOS不同屏幕字体适配.zip

    iOS不同屏幕字体适配 详情查看简书:http://www.jianshu.com/p/72c3c55429c3 github地址:https://github.com/bobtaocool/TBFontAdjust

Global site tag (gtag.js) - Google Analytics