以编程方式处理自动版式
布局是事物的各个部分进行排列或布置的方式。 快速设计用户界面时,我们必须考虑元素的排列方式以及如何在不同的屏幕尺寸上重新排列元素。 为了对用户界面进行布局以使其能够迅速适应基于不同屏幕尺寸的更改,我们必须使用自动布局。
简单的自动布局意味着我们描述了接口的位置,然后系统将自动为我们定位接口。
自动布局是一个基于约束的描述系统,其中两个视图之间的关系可以表示为线性方程式
A1 =(M * A2)+ C,其中A1和A2引用视图的属性,
M是指乘数和
C称为常数
约束允许我们在单个视图的属性之间或与另一个视图的属性之间建立关系。
属性是视图的对齐矩形上的位置。 在上面的等式中,A1将是视图1的一个属性,而A2将是视图2的一个属性。一个视图的属性用于与另一个视图的属性建立关系。 第一组属性对应于视图的对齐矩形的边缘,即top
, bottom
, right
和left
属性。
第二组属性是leading
, trailing
, left
和right
属性。
下一组属性是height
和width
,height和width属性允许我们与视图或另一个视图的高度和宽度创建关系。
下一组是CenterX
和CenterY
属性,用于将视图的水平轴和垂直轴对齐。
我们还具有baseline
属性, first baseline
和last baseline
。 基线就像是一条假想的文本所在的行,如果有多个基线,则第一个是第一个基线,最后一个是最后一个基线。
每个视图都包含边距,这些边距允许您修改视图边缘和添加的任何子视图之间的空间,控制此关系的属性主要是top
, right
, bottom
和left
边距。 除了margin属性之外,我们还有leading margin
, trailing margin
, centerX with margin
, centerY with margin
。 我们还具有NotAnAttribute
,可让我们不在名为的其他视图上使用约束。 这些属性是我们在建立视图之间的关系时可以使用的选项。
由于我们已经知道必须使用属性来创建两个视图之间的关系,因此下一个决定是这些视图之间应该存在的关系类型。 视图之间可能存在三种可能的关系,但是我们一次只能使用一个: Equal
, Less than or equal
和Greater than or equal
。
Equal
意味着viewA的特定属性应等于viewB的特定属性。
Less than or equal
意味着viewA的特定属性应仅小于或等于viewB的特定属性。
Greater than or equal
意味着viewA的特定属性应仅大于或等于viewB的特定属性。
在方程式中以M
表示的乘法器用于将关系乘以某个浮点值。 我们可以说viewA.height应该是viewB.height的* 2(两倍)。
该常数用于使一个视图偏离另一个视图,它基本上用于在两个视图之间创建空间。
在以编程方式创建约束时,我们有三种选择,可以使用NSLayoutConstraint类,布局锚,也可以使用可视格式语言。 我们将使用NSLayoutConstraint
类和layout anchors
。
let horizontalConstraint = NSLayoutConstraint()
用于初始化新约束,其中item:newValue是我们要在其上添加约束的元素, 属性:第4行的NSLayoutAttribute.centerX告诉我们希望第1行的项目上的哪个属性添加约束。 relatedBy:NSLayoutRelation.equal用于指示关系的类型, toItem:视图用于指示要与之建立约束的另一个视图的属性。 在我们的例子中,它是窗口视图。 属性:第7行的NSLayoutAttribute.centerX用于告诉我们要与其建立关系的另一个视图上的属性。 然后乘数和常数。 创建约束后,我们需要立即将约束添加到在第12行完成的父视图。我们可以使用Layout anchor重复如下所示:
在哪里newView.centerXAnchor
是要添加与窗口视图centerXAnchor相等的centerXAnchor约束的视图。
如果您还不了解此处介绍的某些概念,请耐心等待。 我要写另一篇关于自动布局使用的视图属性的文章,然后是UIStackview,之后我将展示以编程方式编码不同视图的方法。