Auto Layout Guide----(二)-----Auto Layout Without Constraints

Auto Layout Without Constraints

没有约束的自动布局

Stack views provide an easy way to leverage the power of Auto Layout without introducing the complexity of constraints. A single stack view defines a row or column of user interface elements. The stack view arranges these elements based on its properties.

堆栈视图为衡量(leverage)自动布局的强大提供了一个简单的方法,它不需要介绍各个约束的复杂性。 单个堆栈视图定义了用户界面的一行或一列元素。 堆栈视图根据这些元素的特性把它们组织到一起。

  • axis: (UIStackView only) defines the stack view’s orientation, either vertical or horizontal.

    axis: (仅 UIStackView ) 定义了堆栈视图的方向,垂直或是水平。

  • orientation: (NSStackView only) defines the stack view’s orientation, either vertical or horizontal.

    orientation: (仅 NSStackView)定义了堆栈视图的方法,垂直或水平。

  • distribution: defines the layout of the views along the axis.

    distribution: 定义了沿着坐标轴的视图的布局。

  • alignment: defines the layout of the views perpendicular to the stack view’s axis.

    alignment: 定义了跟堆栈视图坐标轴垂直(perpendicular)的视图的布局。

  • spacing: defines the space between adjacent views.

    spacing: 定义了视图之间的间隔。

To use a stack view, in Interface Builder drag either a vertical or horizontal stack view onto the canvas. Then drag out the content and drop it into the stack.

要想使用一个堆栈视图,在界面构建器(Interface Builder)拖拉一个纵向或水平的堆栈视图到画布。然后拖拉content并把它放进栈中。

If an object has an intrinsic content size, it appears in the stack at that size. If it does not have an intrinsic content size, Interface Builder provides a default size. You can resize the object, and Interface Builder adds constraints to maintain its size.

如果一个对象有一个固定的内容尺寸,它在堆栈里的尺寸也不变。如果它没有一个固定的内容尺寸,Interface Builder将提供一个默认尺寸。 你可以重新定义该对象,Interface Builder添加各种约束来保持它的尺寸。

To further fine-tune the layout, you can modify the stack view’s properties using the Attributes inspector. For example, the following example uses an 8-point spacing and a Fills Equally distribution.

要想更进一步的微调布局,你可以使用属性检查器(Attributes inspector)来修改堆栈视图的特性。 比如,以下例子使用一个8点的间隔,并且填充时分布间隔也一样。

The stack view also bases its layout on the arranged views’ content-hugging and compression-resistance priorities. You can modify these using the Size inspector.

堆栈视图的布局还根据所组织视图的content-hugging 以及抗压缩(compression-resistance)优先级。你可以使用Size inspetor来修改这些特性。

NOTE

注意:

You can further modify the layout by adding constraints directly to the arranged views; however, you want to avoid any possible conflicts: As a general rule of thumb, if a view’s size defaults back to its intrinsic content size for a given dimension, you can safely add a constraint for that dimension. For more information on conflicting constraints, see Unsatisfiable Layouts.

你还可以通过直接添加各种约束到所组织的视图来更进一步的修改布局;但是,要避免任何可能的冲突:作为基本法则,如果一个视图的尺寸是它的原有的固定尺寸,则你可以安心地给那个尺寸添加一个约束。更多关于约束冲突的信息,请看Unsatisfiable Layouts

Additionally, you can nest stack views inside other stack views to build more complex layouts.

另外,堆栈视图里面还可以嵌套别的堆栈视图以构建更复杂的布局。

In general, use stack views to manage as much of your layout as possible. Resort to creating constraints only when you cannot achieve your goals with stack views alone.

For more information on using stack views, see UIStackView Class Reference or NSStackView Class Reference.

一般来说,尽可能使用堆栈视图来管理你的布局。只有当仅使用堆栈视图无法达到你的目标时,可以采用各种约束。

NOTE

注意:

Although the creative use of nested stack views can produce complex user interfaces, you cannot completely escape the need for constraints. At a bare minimum, you always need constraints to define the position (and possibly the size) of the outermost stack.

尽管创造性地使用嵌套堆栈视图可以生成复杂的用户界面,但是你不能完全逃脱约束的帮助。至少,你总是需要约束来定义最外层堆栈的位置(或者可能是尺寸)。

Understanding Auto Layout

Anatomy of a Constraint

时间: 2024-11-05 02:32:30

Auto Layout Guide----(二)-----Auto Layout Without Constraints的相关文章

IOS界面适配二: Auto Layout的使用(上)

上一篇讲了IOS中基础的距离单位,链接为 IOS界面适配一: Pt与Px的关系 ,使用距离单位可以定义我们程序中View的大小,但是,仅仅使用Pt定义大小是远远不够的. 比如,我们想让一个button距离手机左边界为20pt,右边界为20pt,距上为30pt,高度自身为20pt,如果在iphone5中(为320pt*568pt),我们要在代码中这么定义 以下代码写在ViewController中的viewDidLoad方法中: UIButton * button = [[UIButton all

Auto Layout Guide----(一)-----Understanding Auto Layout

Understanding Auto Layout 理解自动布局 Auto Layout dynamically calculates the size and position of all the views in your view hierarchy, based on constraints placed on those views. For example, you can constrain a button so that it is horizontally centered

Safe Area Layout Guide

原文:Safe Area Layout Guide Apple在iOS 7中引入了topLayoutGuide和bottomLayoutGuide作为UIViewController属性.它们允许您创建约束,以保持内容不被状态,导航或标签栏等UIKit栏隐藏. 这些布局指南在iOS 11中已被弃用,并被单个安全区域布局指南所取代. Top and Bottom Layouts Guides - 概述 使用嵌入在导航控制器和标签栏中的视图控制器使用顶部和底部布局指南的示例: 绿色内容视图对顶部布局

Cocos2d-x layout (二)

相对某个控件进行布局 Size widgetSize = Director::getInstance()->getWinSize(); Text* alert = Text::create("Layout", "fonts/Marker Felt.ttf", 30 ); alert->setColor(Color3B(159, 168, 176)); alert->setPosition(Point(widgetSize.width / 2.0f,

autolayout中 top layout guide详解

Top Layout Guide用于自动布局的辅助,在Storyboard中可以看到Top Layout Guide作为ViewController的属性存在,也就是topLayoutGuide,官方文档对这个属性的Discussion是: topLayoutGuide属性表示不希望被透明的状态栏或导航栏遮挡的内容范围的最高位置.这个属性的值是它的length属性的值(topLayoutGuide.length),这个值可能由当前的ViewController或这个ViewController所

Android学习笔记二-Linear Layout

1.LinearLayout是子view均为单方向的,即均为水平或垂直方向的布局.你可以用android:orientation属性来 定义layout方向 所有子view都是一个挨着一个的,所以一个垂直列表,不管它本身多宽,同时只能有一行.若是水平列表,则都等高. 2.LayoutWeight 用来操控各个子view的相对比例,,即各个子元素对空间的使用权重 Weight并非网上很多文章所叙述的那样(文章都过于片面),weight是指某个组件在布局中[剩余空间]中的显示权重,那么所谓的剩余空间

XAML学习笔记——Layout(二)

本篇随笔将简单介绍两种基本的布局——Grid布局和VariableSizedWrapGrid布局. Grid布局 顾名思义,Grid布局将布局容器以行和列的分割方法拆分成若干单元格,然后通过指定子元素所属单元格的行编号(Grid.Row)与列编号(Grid.Column)的方式将一个或多个子元素排列在指定的单元格中,从而以表格的形式排列子元素.从功能和设计方式上讲,Grid布局排列子元素的行为和HTML中的 table 类似,但是使用方式更加灵活.Grid布局在开发过程中多用于表单的开发设计,并

View的工作原理(二)——layout

1.当View的measure被确定后,会调用ViewGroup的layout方法,之后使用onLayout方法(同样也是系统未自动重写,要我们自己完成)遍历子View(根Measure的形式是一样得)与Measure不同的时候,允许重写layout()方法. 分析layout源码:(P194 ①) 原理:通过setFrame方法设定View的四个顶点的位置,接着调用onLayout方法确定子元素的位置. 以LinearLayout的onLayout方法(Vertial):遍历子元素的layou

【Css】Layout布局(二)

css定位(Positioning) 所谓定位,即允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置. css提供了三种基本的定位机制:普通流.浮动和绝对定位. position语法:  position : static absolute relative  普通流(static): 也有叫做文档流的,即元素按照其在 HTML 中的位置顺序决定排布的过程.并且这种过程遵循标准的描述. 相对定位(relative): 元素框偏移某个距离.元素仍保

ExtJs4学习(十二)layout布局

Fit布局 在Fit布局中,子元素将自动填满整个父容器.注意:在fit布局下,对其子元素设置宽度是无效的.如果在fit布局中放置了多个组件,则只会显示第一个子元素.典型的案例就是当客户要求一个window或panel中放置一个GRID组件,grid组件的大小会随着父容器的大小改变而改变. 示例代码: <span style="font-family:Courier New;font-size:14px;">Ext.application({ name : 'HelloExt