首页 > 代码库 > ios UI开发之使用xcode5自动布局

ios UI开发之使用xcode5自动布局

自动布局的概念

自动布局的基本构建块 约束 。 约束表达规则的布局元素在界面;例如,您可以创建一个约束,指定元素的宽度,或它的水平距离另一个元素。 你添加和删除约束,或者改变属性的约束,影响你的界面的布局。

在计算运行时用户界面元素的位置,自动布局系统同时考虑所有约束,并设置位置最好的方式满足所有的约束。

约束基础知识

你能想到的一个约束条件的数学表示形式human-expressable声明。 如果你定义一个按钮的位置,例如,您可能想说“左边缘应该是20分包含视图的左边缘。 “更正式,这意味着 按钮。 左=(容器。 左+ 20) ,是一种表达的形式 y = m * x + b ,地点:

  • Y  X 属性的观点。

  • m B 浮点值。

一个 属性 是其中之一 离开了 , 正确的 ,  ,  , 领先的 , 落后于 , 宽度 , 高度 , centerX , centery , 基线 

的属性 领先的  落后于 是一样的 离开了  正确的 从左到右语言如英语,但在从右到左的环境中如希伯来语或阿拉伯语, 领先的  落后于 是一样的 正确的  离开了 。 当您创建约束, 领先的  落后于 是默认值。 通常应该使用 领先的  落后于 确保你的界面布局适当在所有语言,除非你的约束应该保持相同的语言(如主和细节窗格的顺序在一个分割视图)。

约束可以有其他属性设置:

  • 常数值。 物理大小或抵消,点的约束。

  • 关系。 自动布局视图属性的支持不仅仅是常量值;您可以使用和不平等现象,如大于或等于指定的关系,例如,一个视图 宽度> = 20 ,甚至 TextView。 > =(superview领先。 领导+ 20) 

  • 优先级。 约束有一个优先级。 约束与更高的优先级水平感到满意之前约束优先级较低的水平。 默认的优先级是必需的( NSLayoutPriorityRequired ),这意味着必须满足约束。 布局系统得到尽可能接近满足一个可选的约束,即使它不能完全实现它。

    优先级级别允许你表达有用的条件的行为。 例如,它们是用来表达一些控件应该大小适合他们的内容,除非更重要的是应该优先考虑的东西。 关于优先级级别的更多信息,请参阅NSLayoutPriority 

约束是累积,不要互相覆盖。 如果你有一个现有的约束,设置另一个相同类型的约束不覆盖前一个。 例如,设置第二个宽度约束视图不删除或改变第一宽度约束需要手动删除第一个约束。

一些限制,约束可以穿过视图层次。 在OS X邮件应用程序,例如,默认情况下,删除按钮在工具栏和消息表中;在桌面偏好,窗口的底部的复选框结合分割视图窗格他们操作。

你不能设置一个约束的视图层次如果设置框架的层次结构包括一个视图中的手工定制实现的 layoutSubviews 方法 uiview (或 布局 方法 NSView )。 也不可能跨越任何视图有一个界限转换(如滚动视图)。 你可以认为这些观点是障碍的一个内部世界和外部世界,但内部不能连接到外部的约束。

内在内容的大小

子级视图如按钮通常知道更多关于什么他们应该比大小定位他们的代码。 这是通过沟通 内在内容的大小 告诉布局系统,一个视图包含一些内容本身,它不明白,和显示内容有多大,本质上。

等元素的文本标签,你应该通常设置元素是其内在的大小(选择编辑>大小以适应内容)。 这意味着元素将适当的增长和收缩与不同的内容不同的语言。

应用程序体系结构

自动布局结构分配负责控制器和视图之间的布局。 而不是写一个无所不知的控制器,计算视图需要为给定的几何的观点变得更加自组织。 这种方法减少了控制器逻辑的复杂性,并使它更容易设计视图不需要相应的修改布局代码。

您可能还想要一个控制器对象,补充说,在运行时删除或调整约束。 学习更多的关于管理约束在代码中,阅读 “使用自动布局以编程方式。”

控制器的作用

尽管一个视图指定其内在内容大小、视图的用户说它是多么重要。 例如,在默认情况下,一个按钮:

  • 强烈想要拥抱它的内容在垂直方向(按钮真的应该自然高度)

  • 弱拥抱它的内容水平(额外的标题和边框的边缘之间的填充是可以接受的)

  • 在两个方向强烈抵制压缩或剪切的内容

在用户界面包含两个按钮,例如,它由控制器来决定如何按钮应该成长如果有额外的房间。 应该只有一个按钮生长? 应该都种植同样的吗? 或者按比例呢? 如果没有足够的空间来适应两个按钮没有压缩或剪切的内容,一个按钮应该先截吗? 或者两者都同样吗? 等等。

你的拥抱和压缩的优先级设置 uiview 实例使用 setContentHuggingPriority:forAxis:  setContentCompressionResistancePriority:forAxis: ( NSView,可以使用 setContentHuggingPriority:forOrientation:  setContentCompressionResistancePriority:forAxis: )。 默认情况下,所有UIKit——AppKit-supplied观点的价值 NSLayoutPriorityDefaultHigh  NSLayoutPriorityDefaultLow

使用约束界面构建器

最简单的方法添加、编辑或删除约束是使用可视化布局工具界面构建器。 创建两个观点之间的约束和Control-dragging一样简单,或者一次添加多个约束,你简单地使用各种弹出窗口。

添加约束

当你拖动出一个元素从对象库并把它放在界面构建器画布,一开始无约束,使其容易原型界面通过拖动元素。 如果你没有添加任何的约束,构建和运行一个元素,您会发现界面构建器修复元素的宽度和高度,和固定针的位置相对于左上角superview;这意味着不移动或改变窗口大小调整的元素。 让你的界面反应正确大小或方向的改变,你需要开始添加约束。

重要的是: 尽管Xcode不生成警告或错误当你构建一个用户界面,没有适当的约束,你不应该船您的应用程序在这种状态。

有几种方法可以添加约束根据你想要的的精度水平和约束的数量你想添加一次。

添加约束和Control-Drag

添加一个约束的最快的方法是按住ctrl键并拖动一个视图在画布上,就像你创建链接网点或行为的方式。 这Control-drag方法是一种快速、精确的工具用于创建一个约束,当你知道你想要什么类型的约束和你想要的地方。

你可以从一个元素Control-drag本身,它的容器,或者到另一个元素。 根据你和哪个方向你拖,拖自动布局适当限制约束的可能性。 举个例子,如果你拖动水平向右的元素的容器,你有选择销或元素的尾随空格中心垂直的容器。

../Art/trailing_2x.png

tip icon

提示: 一次选择多个约束的Control-drag菜单,按住命令或Shift键。

添加约束对齐和销菜单

你也可以添加约束使用 自动布局菜单 ,位于界面构建器画布。

../Art/al_menu_2x.png

除了添加约束对齐或间距外,您还可以使用该菜单解决布局问题,并确定约束调整行为。

../Art/al_menu_callouts.png

  • align。 视图创建对齐约束,比如定心的容器,或调整两个视图的左边。

  • pin。 创建间隔约束,比如定义一个视图的高度,从另一个视图或指定其水平距离。

  • issues。 解决布局问题通过添加基于建议(见或重置约束 “解决自动布局问题” )。

  • resizing。 指定调整如何影响约束。

../Art/align_and_pin_menus_2x.png

约束选项,需要多个元素被禁用如果您只有一个元素被选中。

bullet
添加一个约束对齐或销菜单

添加缺失或建议约束

使用 菜单的问题 添加约束布局如果你需要一个起点,或者如果你需要快速做出很多改变。

如果你需要添加大量的约束来描述你的界面布局和你不想添加约束一次,选择问题>添加丢失的约束添加一组nonambiguous的约束。 这个命令推断约束基础上,事情了。

如果您需要恢复到一组约束没有错误,或者你只是想重新开始,选择问题>重置为建议约束删除错误的约束和添加nonambiguous的一组约束。 这相当于明确约束添加丢失的约束。

编辑约束

可以更改常数、关系和约束的优先级。 您可以编辑这些属性可以通过双击画布上的约束和编辑的价值,或通过选择约束和使用属性检查员。 然而,你不能改变一个约束的类型(例如,你不能改变宽度约束到一个高度约束)。

删除约束

删除任何约束在任何时候通过选择它在画布上或在outline视图和按下删除键。

ios UI开发之使用xcode5自动布局