autoLayer:一基本布局

我不会写博客,写的不好请物见怪,这个autoLayer我就直接上图了:

本人环境:IDE(Xcode6)SDK(IOS8)

准备工作:找一个横图psd(由于我不会切图,我只会简单的描述一下图片处理),首先切除三份图,320px(w)*xxx(h)、640px(h)*xxx(h)、

1242px(w)*xxx(h)。

1、随便新建一个工程(带storyboard),在view 上拖一个imageview;

autoLayer:一基本布局_第1张图片

2、建立约束条件:

autoLayer:一基本布局_第2张图片

这个 准确的描述我不知道;

3、修改约束条件

由于本人的一倍图是320*128的所以我将宽高比修改为320:180

autoLayer:一基本布局_第3张图片

模拟器运行图:

autoLayer:一基本布局_第4张图片autoLayer:一基本布局_第5张图片autoLayer:一基本布局_第6张图片

因为4s~5s  还有6  他们调用的都是***@2x.png ,如果我们建立的约束是左边距0、右边距0、上边距0、固高,那么在4s、5s上边图片是没有问题的,但此时在6、plus上边运行时图片就会被左右拉伸;同理如果我建立的是左边距0、右边距0、上边距0、下边距(固定值或比例(呵呵,这个比例我试过反正我是算不出来合适的)),这时候的情况就是刚好或是上下被拉升了。

如果我们采用宽高比例的话就不会出现这样的问题了,当然如果你用代码写的话那就不说了。

图片简单处理:

我的图是在千图下的:图片链接:http://www.58pic.com/psd/11926594.html(这个源文件太大了)

先打开原文件,然后选择切片工具

autoLayer:一基本布局_第7张图片

 接下来,全部都选进去

autoLayer:一基本布局_第8张图片

然后

autoLayer:一基本布局_第9张图片autoLayer:一基本布局_第10张图片

autoLayer:一基本布局_第11张图片autoLayer:一基本布局_第12张图片

依次将3张图全都倒出来

本人纯是小白,如有错误敬请指正,同时希望看到博客的同学们能够加群交流,我的群号是:151180718

你可能感兴趣的:(auto)