使用autoLayout实现适配iPhone5

最新推荐文章于 2018-07-04 12:14:11 发布

JKay_Wong

最新推荐文章于 2018-07-04 12:14:11 发布

阅读量5.7k

点赞数

分类专栏： iOSDev

iOSDev 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

这篇文章是我看到的关于适配iPhone5的文章里写的最好的，所以在这里转发并翻译

有能力的朋友请直接看原文How to Update Your Apps For the 4-Inch iPhone 5 Display

Getting Started

因为是使用AutoLayout实现适配，所以要求Xcode版本至少是4.5.项目是基于作者之前的一个项目的，这里不讨论那个项目，只关注怎一样适配，有兴趣的直接去原文找。

这就是作者的iOS diner project，当这个项目不做任何修改运行在4-inch的iphone模拟器上时，是这样的

出现了正常的黑边。

之前很多人都说，要让苹果认为你已经适配了iphone5 只需要加多一张568高度的launch图就好了，但并不是所有项目都可以不修改任何东西，加多一张图片就可以解决，但是第一步，肯定是要加这张568高度的launch图

加了之后再运行，就会发现黑边不见了，但是..

出现这种情况的原因呢，是因为在写程序的时候，位置都是基于3.5-inch的大小定位。

Working With Constraints

使用autolayout，可以设置view和边界的距离以及设置view的自动扩展和拉伸。

要使用autolayout，首先就要在storyboard的file inspector中勾选。

现在回到Diner这个应用的界面，选择指向右边的红色箭头，可以看到在这个箭头上，已经有AutoLayout的约束(constraints)存在了。

要为view添加相应的约束，可以按storyboard右下角的中间那组按钮的中间那个

下图示添加了一个leading space to superview(和父视图左边界的距离)之后的效果

下面看看此时在4-inch屏下的显示效果

我们看到箭头被拉伸了，此时右边的属性试图显示，这个箭头有三个约束，第二个trailing space to superview，并不是我们加的，是系统给我们加上去的

被拉伸的原因是：这个箭头同时有左边和右边的约束，为了在4-inch情况下，依旧满足这两个约束，图片只能从中间拉伸。

要解决这个问题，只需要将右边的约束去掉就好了。不过我们要确保是在3.5-inch的大小下进行操作。

之所以要在3.5-inch下删除右边的约束，而不是在4-inch情况下的原因是：

当你在4inch情况下删除右边约束的话，Xcode会自己帮你重新加上一个新的width constraint，来保证箭头保持现在这个拉伸的状态，所以在这种情况下删除的话，不仅仅4inch的情况下图标变形，就算是回到3.5inch也会是这样。之所以会这样，是因为当autolayout被启用之后，我们对view所做的任何改变或者约束都会引起Xcode重新计算当前的约束集，并自动添加他觉得有必要的约束去保证让view显示的样子和现在是一样的。

所以这也是为什么当我们在使用autolayout的时候，会经常发现一些你不想要的约束。出现这种情况的时候，删除这个约束是没用的，因为Xcode又会自动帮你加上，你要做的是，创建一个新的约束，知道Xcode觉得你要删除的那个约束是没必要存在的。

回到项目中，当我们在3.5inch下删除右边的约束后，再在4inch状态下显示，就是下面这样啦

不再被拉伸了，下面要做的就是背景要满屏。

因为这张图片并不是为iPhone5的尺寸设计的，所以我们需要有两张不同的背景，当在3.5的时候使用小的那张，4.0得时候使用大的那张。

要判断设备是不是4inch屏幕，可以在XXXX-prefix.pch文件中，在最后一个#endif上面加上下面这句

#define IS_IPHONE5 (([[UIScreen mainScreen] bounds].size.height-568)?NO:YES)

就是测试当前设备的屏幕的高度是不是568

只需要在添加背景的controller中判断一下是不是iphone5就可以设置相应的背景了

if (IS_IPHONE5) {
    self.ibBackgroundImage.image = [UIImage imageNamed:@"bg_wall-568h.png"];
    self.ibCounter.image = [UIImage imageNamed:@"bg_counter-568h.png"];
}