【AutoLayout案例04-游戏图片-按钮适配 Objective-C语言】

一、好，我们再看一个案例，

刚才，这个案例，

这么一个案例

这个案例，是什么意思呢，

这里给大家做一个3.5英寸、4.0英寸的屏幕适配，

因为我们这里图片，只有一个，就是4英寸的这么一个图片

什么意思呢，要求我们在3.5英寸的屏幕、和4英寸的屏幕的时候，都能正常显示这个图片，

那么，先给大家做个什么呢，没有屏幕适配的时候，是什么样子

再让大家看一下，这个屏幕适配以后，的这么一个样子，

下面，我把这个思路，再给大家捋一下

因为我们只做3.5英寸、4英寸的适配吗，所以说，这里，

1）先把控制器改成4英寸，因为我们图片，没有更大的图片了

2）再一个，就是我们设置适配的一个大致思路，首先，设置图片框水平居中，垂直居中

3）设置图片距离左右是0，高度为568

4）修改距离左右为-16（或者把Constraint勾去掉，左右依然设置为0）

5）适配第一个按钮（设置按钮的大小，距离左边5，垂直居中对齐，然后修改按钮的垂直对齐时的constant值）。

6）依次适配每个按钮，两个按钮在同一条水平线上是要设置垂直居中

新建一个项目

Name：007游戏首页图片屏幕适配

看看

先把控制器改成4英寸的

然后，在控制器里面放一个图片框

让这个图片框填满整个屏幕

是这个

home_bg

好，拷过来

把这个拷过来以后，接下来，我们看一下，在我们这个控制器里面

在这个图片框中，设置一下图片，是那个home_bg

在当前，4英寸的这个屏幕上，我们把它改成iPhone5S

在4英寸屏幕下，因为这个图片本身，就是4英寸的大小

然后呢，在我们这个4英寸的屏幕下，是不是显示是刚刚好

这里显示，是不是刚刚好

然后，再把它改成我们的3.5英寸，给大家看一下

然后呢，我把这里的启动，改成我们的iPhone4S

command + R

看到啥了

是不是下面这边，短了不少

上面这边，是不是还是留着，长这么多啊

看到了吗

下边短了不少，上边是不是留出来不少空白啊

你说，这样不行吗

这样不行吧

这样是不是，我们下边这些按钮，就不全了吧

按钮都不全了

我们希望的效果，是什么效果呢

我们希望这里在iPhone5S、iPhone4S、在4英寸、3.5英寸下面

运行效果是什么效果呢，我们希望是这样的效果

如果说，我们现在是4英寸的主机

这时候，会把我们整个这个图片，都显示出来

如果是3.5英寸的屏幕，这个时候，怎么显示呢，

只显示中间这部分，就够了，

这个美工做图，其实它还是挺聪明的

上边是不是一堆砖头

下边是不是一堆地板

这堆地板，是不是要和不要，没啥关系

你在4英寸的屏幕上，你把它整个儿都显示出来，是不是也挺好的

你到3.5英寸下的时候，你把这个上面砖头去几块儿，下边这个地板少几块儿，是不是只显示中间这部分，也可以吧

这也是一种思路吗，这也是一种思路

所以，我们就用这种思路，做一下这个屏幕适配

我们怎么做呢，

二、屏幕适配

1.知道我现在在3.5英寸下、4英寸下、屏幕适配的思路吧

1）在4英寸下，显示整个图片

2）在3.5英寸下，只显示中间那一部分，

把上面的砖头，去掉，不要它了

把下面的地板，也去掉，不要它了

你看看，在3.5英寸的屏幕下，是如何显示的

在3.5英寸下，砖头一堆，下面的按钮，是不是少了

这样你就不合适了吧

我把上边的砖头去了，把下边的地板去一部分，中间的按钮，正常显示

我要的是这样的效果

2.首先，选中这个图片框

让这个图片框，是不是永远是居中显示啊

无论手机怎么做，是不是它永远是居中显示啊

好，我们选中这个图片框，设置它的约束

让它，水平居中、垂直居中

然后，把它勾上，点增加

设完水平居中、垂直居中以后，这里把它更新一下frame

这里的警告，给它解决一下

点击Fix Misplacement

解决完毕以后

解决完毕以后，看到啥了，是不是由于这个图片本身是比较大的，直接是不是放到很大很大了

这样做，肯定不是我们想要的吧

我们要的是这个图片，距离手机屏幕两边是0，这个图片，别超过手机宽度，

这个图片，距离手机两边，是不是都是0啊

那我们就设置一下，注意看

再选中这张图片

然后，让它设置距离左右的距离

先把这个勾去掉

距离左边、右边的竖线选上

把这个下拉菜单打开，看一下，选上View

数字改成0