IOS 自动布局指南2 自动布局概念(Auto Layout Concepts)

前言:

这一篇是翻译自动布局指南系列第二篇,书接上文,讲的是自动布局的概念

Auto Layout Concepts(自动布局概念)

The fundamental building block in Auto Layout is the constraint. Constraints express rules for the layout of elements in your interface; for example, you can create a constraint that specifies an element’s width, or its horizontal distance from another element. You add and remove constraints, or change the properties of constraints, to affect the layout of your interface.

When calculating the runtime positions of elements in a user interface, the Auto Layout system considers all constraints at the same time, and sets positions in such a way that best satisfies all of the constraints.


构建自动布局的基石是约束(constraint)。约束表达了你的界面元素的布局规则;举个例子,你可以创建一个约束,这个约束指定了元素的宽,或者和另一个元素的水平距离。你可以添加删除约束,或者可以改变约束的属性值,来影响你界面的布局。
当计算你的界面元素的运行时位置的时候,自动布局系统同时考虑了所有的约束,用最满足所有约束的方法的设置位置。

Constraint Basics(约束基础)

You can think of a constraint as a mathematical representation of a human-expressable statement. If you’re defining the position of a button, for example, you might want to say “the left edge should be 20 points from the left edge of its containing view.” More formally, this translates to button.left = (container.left + 20), which in turn is an expression of the form y = m*x + b, where:

  • y and x are attributes of views.

  • m and b are floating point values.


你可以把一个约束想成一个人类表达语句性的数学表述。如果你定义了一个按钮的位置,比如,你可能说“左边界距父视图的左边界20像素”。更正式的来说,这个可以写成 button.left=(container.left+20),这个是这个式子的一种表达  y=m*x+b,这里
  1. x 和y 是视图的属性
  2. m和b 是浮点型数值

An attribute is one of leftrighttopbottomleadingtrailingwidthheightcenterXcenterY, and baseline.

The attributes leading and trailing are the same as left and right for left-to-right languages such as English, but in a right-to-left environment such as Hebrew or Arabic, leading and trailing are the same as right and left. When you create constraints, leading and trailing are the default values. You should usually use leading and trailing to make sure your interface is laid out appropriately in all languages, unless you’re making constraints that should remain the same regardless of language (such as the order of master and detail panes in a split view).


属性为如下之一:左,右,上,下,领先,落后,宽,高,中心X,中心Y,基线。

领先(leading)和落后(trailing)属性就像左和右对于左右语言像英语,但是对于右左语境的语言像希伯来语和阿拉伯语,(leading)领先和落后(trailing)就像右左一样。当你创建约束的时候,领先和落后是默认值。你应该总是使用leading和trailing来保证适合所有的语言,除非你做这样的限制:所有语言保持一致(就像……不知道怎么翻译)。

(PS:这一段说了约束的几个属性)


Constraints can have other properties set:

  • Constant value. The physical size or offset, in points, of the constraint.

  • Relation. Auto Layout supports more than just constant values for view attributes; you can use relations and inequalities such as greater-than-or-equal to specify, for example, that a view’s width >= 20, or even that textview.leading >= (superview.leading + 20).

  • Priority level. Constraints have a priority level. Constraints with higher priority levels are satisfied before constraints with lower priority levels. The default priority level is required (NSLayoutPriorityRequired), which means that the constraint must be satisfied exactly. The layout system gets as close as it can to satisfying an optional constraint, even if it cannot completely achieve it.

    Priority levels allow you to express useful conditional behavior. For example, they are used to express that some controls should always be sized to fit their contents, unless something more important should take precedence. For more information about priority levels, see NSLayoutPriority.

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

常量。物理大小或相对原点偏移量,在约束(constraint)的points里面

关系。自动布局不仅仅支持视图属性的常量;你可以使用关系和不等式比如View的width>=20,或者 textview.leading>=(superview.leading+20)

优先级。约束有优先级。具有高优先级的约束比低优先级的约束先实现。默认的优先级是必要级(NSLayoutPriorityRequired),这意味着约束必须被完全满足(完全实现)。如果一个约束的优先级是选择完成,那么布局系统会尽量完成的接近这个约束,即使这个约束不能被完全实现。

优先级的存在允许你表达有用的约束行为。比如,他们常用来表达某些控件应该适应内容的大小,除非更重要的事情要被优先做。更多关于优先级的信息,请看《NSLayoutPriority

(PS:约束的优先级,关系)

Constraints are cumulative, and do not override each other. If you have an existing constraint, setting another constraint of the same type does not override the previous one. For example, setting a second width constraint for a view does not remove or alter the first width constraint—you need to remove the first constraint manually.

Constraints can, with some restrictions, cross the view hierarchy. In the Mail app in OS X, for example, by default the Delete button in the toolbar lines up with the message table; in Desktop Preferences, the checkboxes at the bottom of the window align with the split view pane they operate on.

You cannot set a constraint to cross the view hierarchy if the hierarchy includes a view that sets the frames of subviews manually in a custom implementation for the layoutSubviews method on UIView (or the layout method on NSView). It’s also not possible to cross any views that have a bounds transform (such as a scroll view). You can think of such views as barriers—there’s an inside world and an outside world, but the inside cannot be connected to the outside by constraints.


约束的作用是累计的,他们并不会相互覆盖。如果你有一个现成的约束,又设置了另一个相同类型的约束并不会覆盖掉先前的约束。举个例子,你给一个View第二次设置了宽度约束,这并不会删除或者改变你第一次设置的宽度约束——你需要手动删除第一个约束。

约束可以有限制的跨越视图(View)层次。在OSX 的邮件应用中,举个例子,(例子看不懂,不翻译)

你不能设置穿越视图层次的约束,如果这层次里面包含了一个通过手动实现UIView中layoutSubviews 方法(或者NSView 中的layout 方法)来设置子视图的View。当视图有bounds 变化的时候也不能穿越层次设置(比如scroll View)。你可以认为这些视图有内部壁垒,这些视图有内在世界和外在世界,可是两个世界不能通过约束连通。

Intrinsic Content Size (内在内容的大小)

Leaf-level views such as buttons typically know more about what size they should be than does the code that is positioning them. This is communicated through the intrinsic content size, which tells the layout system that a view contains some content that it doesn’t natively understand, and indicates how large that content is, intrinsically.

For elements such as text labels, you should typically set the element to be its intrinsic size (select Editor > Size To Fit Content). This means that the element will grow and shrink appropriately with different content for different languages.

叶子级别视图,比如button 通常知道他们的大小该是多少的情况多于使用代码定位他们。这种情况通过intrinsic content size(内在内容大小)表达,它(intrinsic content size)告诉布局系统一个View(视图)包含了一些布局系统通常不了解的内容,然后指示内容大小。
对于像textLabel的元素,你通常应该这样设置这类元素的intrinsic content size (内在内容大小)(选择  Editor->Size To Fit Content)。这意味着元素(textLabel)会根据不同语言的内容放大和缩小。

Application Architecture(应用程序中架构)

The Auto Layout architecture distributes responsibility for layout between controllers and views. Rather than writing an omniscient controller that calculates where views need to go for a given geometry, views become more self-organizing. This approach reduces the complexity of controller logic, and makes it easier to redesign views without requiring corresponding changes to the layout code.

You may still want a controller object that adds, removes, or adjusts constraints at runtime. To learn more about managing constraints in code, read Working with Auto Layout Programmatically.


自动布局可以分开控制器和视图之间的布局责任。相对于编写一个万能的可以计算出所有视图需要的集合图形的控制器类,视图可以更多的自我构建,这个进步减少了控制器逻辑的复杂性,同时可以相对轻松的重新设置视图的布局,不需要很大量的布局相关代码。
当然,你很可能仍然想要在运行时添加,删除,更改约束。那么你可以阅读如下文章来学习代码中修改约束:《自动布局编程》。



The Role of the Controller(控制器的角色)

Although a view specifies its intrinsic content size, the user of the view says how important it is. For example, by default, a button:

  • Strongly wants to hug its content in the vertical direction (buttons really ought to be their natural height)

  • Weakly hugs its content horizontally (extra side padding between the title and the edge of the bezel is acceptable)

  • Strongly resists compressing or clipping content in both directions



虽然view指定了他自身的固有内容大小,视图控制器依然起着很重要的作用。比如,在默认情况下,button有如下属性:
  • 垂直方向强限制:(会努力保持button自己的高度)
  • 水平方向上弱限制(可以根据标题的填充和边界来拉伸水平的长度
  • 在两个(水平垂直)方向上绝对不允许压缩和裁剪

In a user interface containing two buttons next to each other, for example, it’s up to the controller to decide how the buttons should grow if there’s extra room. Should just one of the buttons grow? Should both grow equally? Or maybe proportionally to each other? If there isn’t enough room to fit both buttons without compressing or clipping the content, should one button be truncated first? Or both equally? And so on.

You set the hugging and compression priorities for a UIView instance using setContentHuggingPriority:forAxis: and setContentCompressionResistancePriority:forAxis: (for NSView, you use setContentHuggingPriority:forOrientation: and setContentCompressionResistancePriority:forAxis:). By default, all UIKit- and AppKit-supplied views have a value of eitherNSLayoutPriorityDefaultHigh or NSLayoutPriorityDefaultLow.



在用户界面上有两个彼此相邻的button,比如,当有额外空间的时候控制器决定了button应该如何拉伸。是一个button拉伸呢?两个做同样的拉伸呢?也许两者按比例拉伸呢?在空间不足的时候在不压缩和裁剪button的时候对button进行调整,是某一个先变短呢?或者都做同样的变短?或者其他种种操作。

你设置一个UIView 的实例的huging 和compressing 属性通过以下两个方法:setContentHuggingPriority:forAxis: and setContentCompressionResistancePriority:forAxis: (NSView 有另外两个方法:)在默认的情况下,所有UIKit 和AppKit 支持的view都会有这两个属性:NSLayoutPriorityDefaultHigh or NSLayoutPriorityDefaultLow.

欢迎转载,转载请注明出处
本文地址:http://blog.csdn.net/zhenggaoxing/article/details/43447297







  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值