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

一、接下来,看看这个

【AutoLayout案例05-横竖屏效果 Objective-C语言】_第1张图片

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

需求是,无论在横屏、竖屏下:

1)首先,是不是有四个View啊

【AutoLayout案例05-横竖屏效果 Objective-C语言】_第2张图片

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

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

相等的吧

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

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

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

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

【AutoLayout案例05-横竖屏效果 Objective-C语言】_第3张图片

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

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

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

【AutoLayout案例05-横竖屏效果 Objective-C语言】_第4张图片

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

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

来,咱们一起来做一下

二、实现这个案例

1.新建一个项目

把这个名称,改成案例6

【AutoLayout案例05-横竖屏效果 Objective-C语言】_第5张图片

好,我们再新建一个项目

Name:008案例6适配

1)第一步:打开Main.storyboard

2)第二步:拖一个UIView过来

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

拽一个什么,UIView过来

设置这个UIView的背景色

设置为蓝色

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

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

【AutoLayout案例05-横竖屏效果 Objective-C语言】_第6张图片

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

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

把这个勾去掉

把两个竖线选上

数值改成0,

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

数值改成0

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

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

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

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

【AutoLayout案例05-横竖屏效果 Objective-C语言】_第7张图片

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

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

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

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

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

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

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

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

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

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

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

右边线,对

明白思路了吗

来,注意看,选中这个View

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

2)在父容器中,垂直居中

点击增加

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

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

你可能感兴趣的:(Objective-C,objective-c,ios,开发语言)