本文转载至 http://jingyan.baidu.com/article/8cdccae97a5c2b315413cda9.html
- 1
- 2
- 3
- 4
- 5
- 6
- 7
随着苹果公司持续推出新产品，480x960的固定坐标时代悄然过去，iPhone6、iPhone6 plus的问世，无疑给了我们这些做iOS开发的，深刻的打击。坐标再也不能写成固定坐标了，但是随着发展AutoLayout和SizeClass的出现，无疑是一种福音，值得庆贺一点的是，iPhone6也好6plus也好，屏幕比例和iPhone5与5s比例都是一样的，相差一两像素，无伤大碍。今天笔者给大家推荐一种较为轻便的屏幕适配方法。这里笔者就给大家以iPhone工程为例，简单讲述一下。该方法只用在控件中的AutoSizing只勾选宽和高约束，其他约束去掉，即可实现iPhone5与iPhone6、iPhone6plus等比布局，进而实现简单适配。当然iPhone4 需要刷新布局高度。
工具/原料
- Xcode6.0
- Mac OS操作系统
- 电脑
- 三张图片
方法/步骤
-
首先，先创建一个简单地工程。如图。
这里我们选择“Single View Application”工程。
名字就叫“ZYScreenTest”。
位置选择桌面就可以了。
-
我们在Main.storyboard中把“Use Auto Layout”和“Use Size Classes”选项勾掉，默认的是勾选上的。
在把我们的ViewController尺寸调节成5s的尺寸或者4的尺寸都行，看个人习惯是在5s上做布局还是4上做布局。笔者这里就以5的屏幕给大家介绍。
选中当前ViewController，中间的选项，进行XIB尺寸调整，这里可以根据习惯选择是3.5寸还是4寸等。
-
之后我们拖拽一个imageView，放在（110，50）的位置，尺寸设置为（100，100）。如图。
再拖拽一个imageView，尺寸一样，位置放置在（110，240）的位置作对比。如图。
我们的目的是随着屏幕变化，对应控件坐标宽高发生相应可控的变化，以达到屏幕适配的目的。
修改两个ImageView背景颜色作为区分，修改两个ImageView的Autoresizing相同，都已第二个拖拽的imageView为准，选择居上，居右位置不变的约束。如图。
-
之后，我们给下面的imageView再AutoSizing添加如图约束。去掉上下左右约束，保留内部宽高约束。如图。
好，用5模拟器运行。运行效果如图。会发现没有什么变化，因为我们毕竟是用5的屏幕布局的，所以在5上运行效果和我们布局的界面差不多的。如图。
-
接下来再用iPhone6plus 模拟器运行，如图。
我们会发现上面的ImageView的autoSizing只添加向上向下约束坐标和宽高都没变，下边的ImageView坐标和宽高都相应的变化了，基本和我们刚才在iPhone5模拟器上运行的基本比例一样。但是两个控件之间的布局已经和我们在StoryBoard上的布局不一样了。
我们给第一个ImageView添加同样约束，再在6plus模拟器上运行，如图，我们会发现其布局和我们在StoryBoard上布局一致。
-
也就是说在AutoSizing只添加宽高约束的控件，会按照屏幕比例放大。我们都知道iPhone6以上使用的是三倍图，好我们准备三张不同的图片，分别是原图，二倍图，三倍图。这里笔者就随便找三张图了，分别命名为“test.png”(100p*100px)，"test@2x.png"(200*200px)，“test@3x.png”(300*300px)，用来判断分辨率，iPhone6plus和iPhone6默认使用的是@3x图片，iPhone5和5s以及4s使用的是@2x图片。这里是用来验证我们的适配。
在“Images.xcassets”里面创建一个“New Image Set”，重命名为“test”，把我们刚才的三张图片拖进去。如图。
-
然后对我们刚才拖拽的imageView设置图片。设置图片，直接在“image”属性里面写我们刚才对ImageSet命的名字“test”。我们再用iPhone5模拟器运行，运行效果如图。我们看到5模拟器上运行加载的图片都是@2x图片，也就是二倍图。两个imageView都加载了，说明，我们在AutoSizing中只勾选宽高约束，不影响iPhone5界面布局。我们用iPhone6 plus模拟器运行。如图，说明约束也是不影响加载三倍图的。
-
接下来，我们进行如图布局，把第一个图片也进行AutoSizing中宽和高约束，去掉上下左右约束，放置同一排，再两个图片中间再添加一个红色的View，放置最上层，依然添加同样约束。如图。用6Plus模拟器运行。发现间距和相对位置和iPhone5上布局一直。
故此，我们可以用这种方法进行界面布局，省去了用SizeClass和AutoLayout的困扰。
END
注意事项
- 如果是iPhone4布局，只用修改一下高度即可，iPhone4布局比例和iPhone5以上不同
- 如果是到屏幕底端的列表，一定要再AutoSizing添加上向下约束。