自动布局之Auto layout


通过上面一个章节的学习,我们了解了Auto resize的布局,这个方法看上去是一目了然的。但是在进入Xcode5以后,新的布局方法Auto layout更加的方便。


当我们勾选上Use Auto Layout选项之后,它的改变如下:右侧的控制器已经没有了,而右下侧却多出了几个按钮。


adopt1.png



图标介绍


1.第一个图标:布局与对齐相关的。


adopt2.png


2.第二个图标:定位相关,标示它的宽度,高度,左右间距等等。


adopt3.png


3.第三个图标:当发现问题时我们如何去更新这些约束。


adopt4.png


4.第四个图标:重新定义大小的一些行为。


adopt5.png



图标使用


1.第一个图标


这个场景我们看上去是居中对齐的,的确,竖屏状态下是对齐的,但是横屏状态下就不是居中对齐了。


adopt7.png


那么我们现在可以通过这种方法来使它居中对齐:选中控件,然后点击右下侧第一个按钮,在打开的弹出菜单中,有一些可选项,我们选中竖直居中,点击下面添加约束的按钮。


adopt8.png


这就是添加约束之后的场景,可以看到在三个地方都能看到约束的体现。右侧的属性观察器中实现代表已经有了这样一个水平约束。如果你想要删除这一个约束,我们可以点击右侧Aign center X to方框(还可以去编辑它),再按delete键就删除了。


adopt9.png


我们为两个控件选择水平居中的属性。


此时运行的结果又可以实现横屏状态下的居中了。


adopt90.png


刚才我们在选择Label控件时打开第一个按钮的时候有些属性是无法点击的,是因为有些属性是针对于两个控件的。比如左右对齐,在我们选中两个控件之后,可以看到这些属性已经可以勾选了。那我们为两个控件添加左对齐的属性。


adopt91.png


在添加了左对齐之后,我们可以看到这两个地方都有了一些改变。


adopt92.png


我们已经为两个控件选择在屏幕中间对齐,又选择它们的左对齐,那对齐方式是否会发生冲突呐?或者会丢弃一个对齐方式呐?下面是运行的结果,两个控件依然水平居中,而且似乎也实现了左对齐(Button控件的文字显示范围不是他的边界),只是Label控件的大小改变了。


adopt94.png


所以,我们知道如果遇到这种冲突它是会选择一个丢弃的,但是具体选择哪一个,就需要我们在具体实践中自己去体会了。


2.第二个图标


当我们看到第二个图标的内容时,可以看到类似于属性控制器里面的内容,依旧是实线(绝对距离)与虚线(相对距离)的选择。


adopt95.png


3.第三个图标


这里可以解决一些约束所产生的矛盾,,比如重设约束,更新约束,还有清理约束等等。


adopt96.png


4.第四个图标


我们重新变换尺寸大小的时候,包括在旋转的时候是否做一些旋转处理。


adopt97.png



Ctrl拖拽法快速设置布局


在以后的工作中,并不是以你对一门语言的熟练度或者你能把一门语言玩到什么样的程度来衡量你编程的价值的。而是在于你做出来的东西,你的设计模式,拓展性怎么样的来决定。所以有的时候头脑比手脚更为重要。


按住Ctrl,拖拽控件到上部边缘然后放开,然后放开就会显示一些布局方法。


adopt98.png


Top Space to Top Layout Guide:控件距离场景顶部的距离,选中之后就是绝对距离了。


Center horizontally In Container:在场景中水平对齐。


这就是我为大家介绍的Auto Layout布局的方法,以后大家会在实际的操作中去演练,那样你才会记忆的更深刻,理解得更加深入。



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 www.maiziedu.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部