天天看点

iOS 8 AutoLayOut入门

 iOS 8 AutoLayOut入门

自从iOS6带来 Auto Layout这个特性以来,用户界面的布局便变得简单起来。iOS8更是做的更好

本文主要针对初学者分享一下自己最近学习AutoLayout的心得体会。Let’s Start!

首先,什么是AutoLayout?

简单来说,就是自动布局,当你旋转屏幕或者缩放你的UI来适应不同大小的屏幕等,程序的视图看起来依然很nice,你通过可以在IB中增加或者编辑约束(constraints)来实现。

启用AutoLayout,可以直接在 Main.storyboard勾选AutoLayout

iOS 8 AutoLayOut入门

2.通过一个程序来认识Autolayout的一些操作和特性

首先在storyboard中拖入三个 UIButton建立如下的方块,竖屏下显示

iOS 8 AutoLayOut入门

(注意:Xcode6中,如果直接拖入UIView不增加constraint,当你拖入下一个UIView会直接导致前一个的长宽都为零,所以当拖入一个UIview必须设置为reset to suggested constrains)

不做任何的改变,横屏下

iOS 8 AutoLayOut入门

但是实际上,你想得到的是下面的效果

iOS 8 AutoLayOut入门

3.怎么做呢

选中两个Button,按住⌘,然后在Editor 菜单中,选择Pin\Widths Equally

iOS 8 AutoLayOut入门

同样地,选择Editor\Pin\Horizontal Spacing.

Tips:当然你也可以通过选中一个Button然后按住control拖到另一个Button,在菜单中选择这些。

接下来,对于这三个View分别应用:

左侧:    Top Space to Superview

                Leading Space to Superview

右侧: Top Space to Superview

            Trailing Space to Superview

下部: Leading Space to Superview

            Trailing Space to Superview

             Bottom Space to Superview

iOS 8 AutoLayOut入门

此时,“T”型的constraint还是橘黄色的,表示欠约束。

iOS 8 AutoLayOut入门

当然,从左侧的Document Outline也可以看到有一个红色的箭头,表示欠约束。

接下来选中三个View,添加Heights Equally。

iOS 8 AutoLayOut入门

此时,运行,ok搞定!

iOS 8 AutoLayOut入门

4.下面介绍几个常见的问题:

有些时候,我们运行程序会得到提示Unable to simultaneously satisfy constraints,表示constraints冲突,也就是过约束。一般来说,一个试图四个约束就够了,多了肯定得移去,不贵再多,恰到好处方好。

intrinsic content size(固有尺寸):

当我们拖入一个Button的时候会发现,button的大小是确定的。为什么呢?这是因为它可以根据文字和背景自动计算它的大小,想要改变它的大小可以通过移除Width constraint,再设置自己偏好的大小。如果想取消,只需要选择Editor \Size to Fit Content.

Hugging priority (拥抱优先级)确定view有多大的优先级阻止自己变大。

其实content Hugging就是要维持当前view在它的intrinsic content size,可以想象成给view添加了一个额外的width constraint,此constraint试图保持view的size不让其变大。

Compression Resistance priority(压缩阻抗优先级)确定有多大的优先级阻止自己变小。

Content Compression Resistance就是要维持当前view在他的optimal size(intrinsic content size),可以想象成给view添加了一个额外的width constraint,此constraint试图保持view的size不让其变小。

这两个概念很抽象,自己在程序里设置一下,运行几次就清楚了!

此外还有其他的一些属性,需要自己去查看帮助文档了。好了啰嗦这么多,逻辑性也不强,很杂,欢迎大家批评指正。

继续阅读