当先锋百科网

首页 1 2 3 4 5 6 7

【AutoLayout案例05-横竖屏效果 Objective-C语言】

一、接下来，看看这个

通知

我们一看这个效果，就知道需求了吧

需求是，无论在横屏、竖屏下：

1）首先，是不是有四个View啊

通知

无论在横屏、竖屏、下，都有这么四个View吧

这四个View的高和宽，是什么，

相等的吧

这四个View的高和宽，是相等的

那么，既然这四个View的高和宽，是相等的，也就是说，我们只要确定了一个View的高和宽，让其他三个、和它一样，是不是就OK了

然后，接下来，第一个View中，有一个图片

然后，接下来，第一个View中，有一个图片，高和宽都是100

通知

有一个图片框，高和宽都是100

并且，这个图片框，在第一个View中，水平、垂直、居中显示

并且，第一个View中，还有一个Label，这个Label是紧贴底部显示

通知

左、右、紧贴两边，然后高度是设置一个高度，紧贴底部显示

是不是基本就这么一个效果

来，咱们一起来做一下

二、实现这个案例

1.新建一个项目

把这个名称，改成案例6

通知

好，我们再新建一个项目

通知

Name：008案例6适配

通知

1）第一步：打开Main.storyboard

2）第二步：拖一个UIView过来

通知

我们除了刚才那个有点儿特殊，是一个图片以外，我们其他的是不是都是在一个四方块儿里头做啊

拽一个什么，UIView过来

通知

设置这个UIView的背景色

通知

设置为蓝色

通知

设置这个UIView，来、来、来、写约束了

通知

这个UIView，距我们，哪里，注意看屏幕

通知

第一个View，距左边、距上边，都是0，0

通知

第一个View，距左边、距上边，都是0，0

把这个勾去掉

把两个竖线选上

数值改成0，

把下拉菜单打开，看一下，选择View

通知

数值改成0

通知

好，这个是不是搞定了，点击增加

通知

这个蓝色View，距离左边、距离上边，这个X和Y是不是确定了

这个蓝色View的高和宽、是不是还没确定

如何确定这个蓝色View的高和宽呢

通知

看，这么来确定蓝色View的高和宽

通知

1）我们设置第一个控件的右边，和中线对齐，

第一个控件的左边，紧贴控制器左边，右边和中线对齐

通知

第一个控件的右边，和中线对齐

也就意味着，第一个控件的宽度，就是控制器的一半儿吧

那么，第一个控件的底边，和我们这个控制器的水平的中线对齐，证明它高度，是不是我们控制器高度的一半儿，

通知

是高度的一半儿，所以说，垂直的中线，应该是，

所以说，我们，要想让这个View的宽度，等于控制器的一半儿，

你要让这个View的高度，等于控制器的一半儿

1）首先，要设置这个View，垂直居中，水平居中，对齐吧，

2）然后，设置完这个以后，再把那个，再改一下，不是这个控件的中点，和它的那个中线对齐，而是它的右边，和中线对齐

右边线，对

通知

明白思路了吗

来，注意看，选中这个View

通知

通知

1）我首先，设置这个View，在父容器中，水平，在父容器中，水平对齐，水平居中，在父容器中，水平居中

2）在父容器中，垂直居中

通知

点击增加

好，这样的话，这个View，是不是在我们的父容器中，水平居中、垂直居中了

通知

那么，哪个是水平居中呢，注意看看