当前位置: 首页 > 科技观察

iOS9新增UIStackView官方文档翻译

时间:2023-03-16 14:21:22 科技观察

1.继承关系、协议遵从、从属框架和可用平台UIStackView类提供了一个高效的平铺一行或一列视图组合的接口。Stack视图使您能够依靠AutoLayout的强大功能来创建可根据设备方向、屏幕大小和任何其他可用更改动态调整的用户界面。Stack视图在其arrangedSubviews属性中管理所有视图的布局。这些视图根据它们在arrangedSubviews数组中的顺序沿Stack视图的轴排列。确切的布局变量是根据Stack视图的轴、分布、对齐方式、间距和其他属性确定的。使用堆栈视图,打开要编辑的情节提要,从对象库中拖动水平堆栈视图或垂直堆栈视图,并将其放置在所需位置。在下一步中,将控件或视图拖放到堆栈中。如有必要,您可以继续向指定堆栈添加视图或控件。InterfaceBuilder会根据堆栈的内容自动调整大小。您还可以通过在属性面板中修改堆栈视图的属性来调整堆栈内容的外观。注意:您负责指定堆栈视图的位置和大小(可选)。然后堆栈视图将管理其内容的布局和尺寸。二、Stackview和自动布局Stackview使用自动布局来定位和控制它管理的视图的大小。堆栈视图沿其轴将第一个和最后一个托管视图缝合在一起,以便它们的边界齐平。对于水平堆栈视图,这意味着第一个托管视图的左边界与堆栈的左边界齐平,最后一个托管视图的右边界与堆栈的右边界齐平。对于垂直堆叠,顶部和底部边框分别齐平。如果将堆栈视图的layoutMarginsRelativeArrangement属性设置为YES,则堆栈视图将使用相对边距而不是边框??来对齐其内容。对于UIStackViewDistributionFillEqually分布之外的分布,堆栈视图使用托管视图的intrinsicContentSize属性来计算沿堆栈轴的视图大小。UIStackViewDistributionFillEqually该分布将调整所有托管视图,使其沿堆栈轴具有相同的大小以填充堆栈视图。如果可能,堆栈视图将拉伸所有托管视图以匹配其在堆栈轴上最长的原始大小。对于UIStackViewAlignmentFill对齐方式以外的对齐方式,堆栈视图使用它管理的视图的intrinsicContentSize属性来计算垂直于堆栈轴的视图的大小。UIStackViewAlignmentFill重新缩放它管理的所有视图,以便它们填充垂直于其轴的堆栈视图的空间。如果可能,堆栈视图将拉伸其所有托管视图以匹配其垂直于堆栈轴的最大固有尺寸。三、定位和调整Stackview的大小虽然Stackview允许您在不直接使用自动布局的情况下对其内容进行布局,但您仍然需要使用自动布局来定位stackview。通常,这意味着将至少两个边界相邻的堆栈拼凑在一起以定义其位置。在没有额外约束的情况下,系统会计算一个stackview的大小来适应它的内容:沿着stackview轴,它的适应大小等于它的managedview大小和间距之和;垂直于堆栈视图轴,其适配大小等于其管理的最大视图的大小;如果堆栈视图的layoutMarginsRelativeArrangement属性设置为YES,则堆栈视图的适合大小包括边距空间。您可以提供额外的约束来指定堆栈视图的高度、宽度或两者。在这些情况下,堆栈视图会调整它管理的视图的布局和大小以填充指定区域。确切的布局变体是从堆栈视图的属性中获得的。请参阅UIStackViewDistribution和UIStackViewAlignment枚举以获取有关堆栈视图如何处理其内容空间过多或不足的完整描述。您还可以根据其第一个或最后一个基线定位堆栈视图,而不是使用顶部、底部或中心Y值。类似于堆栈视图的适合大小,这些基线是根据堆栈视图的内容计算的。水平堆栈视图在调用viewForFirstBaselineLayout方法或viewForLastBaselineLayout方法时返回其最新视图。如果最后一个视图也是堆栈视图,则返回在嵌套堆栈视图上调用viewForFirstBaselineLayout方法或viewForLastBaselineLayout方法的结果。垂直堆栈视图在调用viewForFirstBaselineLayout方法时返回它管理的第一个视图,在调用viewForLastBaselineLayout方法时返回它管理的最后一个视图。如果这两个视图中的一个也是堆栈视图,那么它将分别返回嵌套堆栈视图上调用viewForFirstBaselineLayout方法或viewForLastBaselineLayout方法的结果。注意:基线对齐仅适用于高度与其原始内容高度匹配的视图。如果视图被拉伸或压缩,基线将出现在错误的位置。4.一般堆栈视图布局堆栈视图有一些通用方法。此清单旨在突出显示堆栈视图灵活性的一些有用示例。目前这不是完整列表。只需定义位置。您可以通过固定两个与其父视图相邻的边框来定义堆栈视图的位置。在这里,stackview的大小会根据它所管理的视图在两个维度上自由扩展。当您希望stackview的内容显示其原始内容大小,以及当您想要管理与stackview关联的其他UI元素时,这尤其有用。例如,在图1中,堆栈视图的左边框和上边框已相对固定到其父视图。这些标签将根据两者之间的空间以8个点作为最佳基线进行校准。这对于相对于自身左对齐的堆栈视图内容有效。图1.定义位置定义了堆栈视图沿轴的大小。在这里,您沿堆栈视图的轴相对于其父视图固定两个边界,定义堆栈视图沿其轴的尺寸。您将需要固定其他边界之一来定义堆栈视图的位置。堆栈视图将沿其轴更改大小和位置以填充定义的空间;然而,不固定的边界将根据其管理的顶视图的大小自由移动。例如,在图2中,堆栈视图的左、上和右边框相对于其父视图是固定的。使用UIStackViewDistributionFill分发会导致其内容调整大小以填充其宽度,并且由于文本框的内容压缩优先级低于标签,因此它会在必要时被拉伸。图2.定义沿堆栈视图轴的维度定义垂直于堆栈视图轴的维度。这与前面的示例类似,但是您固定了两个垂直于堆栈视图轴的边界和一个沿轴的边界。这使得堆栈视图在您添加或删除它管理的视图时沿其轴扩展和收缩。除非您使用UIStackViewDistributionFillEqually分配,否则托管视图将调整为原始大小。垂直于其轴的视图将根据其堆栈视图的对齐模式在其定义的边界内平铺。例如,图3显示了一个带有四个标签和一个按钮的垂直堆栈视图。堆栈视图使用8点的间距和UIStackViewAlignmentCenter对齐方式。堆栈视图的高度将根据堆栈内元素的数量增加或缩小。图3.定义垂直于stackview轴的大小,定义stackview的位置和大小。在这里,您修复了堆栈视图的所有四个边框。堆栈视图将在提供的范围内平铺其内容。例如,图4显示了一个垂直堆栈视图,其所有四个边框相对于其父视图都是固定的。通过使用UIStackViewAlignmentCenter对齐和UIStackViewDistributionFill分布,堆栈视图确保其内容将水平和垂直居中以填充屏幕。但是,获得所需的布局需要两个额外的步骤。默认情况下,堆栈视图垂直拉伸标签而不是图像。要缩放图像控件,请将其内容压缩优先级降低到标签的优先级以下。此外,为了在缩放图像时保持宽高比,您必须将图像视图的模式设置为AspectFit。在图像视图和堆栈视图之间添加等宽约束将有助于确保缩放图像以填充可用空间。图4.同时定义堆栈视图的位置和大小5.管理堆栈视图的呈现UIStackView是UIView的非渲染子类。它不提供自己的任何用户界面。相反,它只管理它管理的视图的位置和大小。因此,某些属性(例如backgroundColor)在堆栈视图中无效。同样,您不能覆盖layerClass、drawRect:或drawLayer:inContext:方法。有一系列属性定义堆栈视图如何平铺其内容。axis(轴向)属性决定了堆栈的方向,只能垂直或水平;分布(distribution)属性决定了它所管理的视图沿其轴的布局;对齐(alignment)属性决定了它所管理的视图中与其轴垂直的布局;spacing(间隙)属性决定了它管理的视图之间的最小间隙;baselineRelativeArrangement属性决定其视图之间的垂直间隙是否根据基线测量;layoutMarginsRelativeArrangement属性确定堆栈视图是否平铺是否根据布局边距管理视图。通常,您将使用堆栈视图来布置少量视图。您可以通过在其他堆栈视图中嵌套多个堆栈视图来创建更复杂的视图层次结构。例如,图5显示了一个包含两个水平堆栈视图的垂直堆栈视图。每个水平堆栈视图都包含一个标签和一个文本字段。图5.Stack视图的嵌套您还可以通过向托管视图添加额外的约束来微调托管视图的表示。例如,您可以使用约束类来设置视图的最小或最大高度或宽度。或者您可以定义纵横比。堆栈视图在平铺其内容时将使用这些约束。例如,在图4中,当图像被缩放时,图像视图上的纵横比约束将通过纵横比常数强制执行。注意:在堆栈视图中向视图添加约束时,请特别注意避免传入冲突。作为惯例,如果视图的大小默认为其在给定维度上的原始内容大小,那么您可以安全地在该维度上添加约束。6.保持其管理的视图与其子视图之间的统一性。Stack视图确保其arrangedSubviews属性始终是其subviews属性的子集。具体来说,stackview强制执行以下规则:每当stackview添加一个视图到它的arrangedSubviews数组时,它也会将该视图添加为一个子视图,如果它还没有这样做的话。每当从堆栈视图中删除子视图时,堆栈视图也会将其从arrangedSubviews数组中删除。从arrangedSubviews中删除视图不会将其作为子视图删除。堆栈视图将不再管理视图的大小和位置,但视图仍将是视图结构的一部分,并且在可见时仍将渲染到屏幕上。虽然arrangedSubviews数组始终包含子视图数组的子集合,但这些数组的顺序保持独立。arrangedSubviews数组的顺序定义视图在堆栈中的显示顺序。对于水平堆栈视图,视图将按阅读顺序平铺,即索引较小的视图位于索引较大的视图的左侧。对于垂直堆栈视图,视图从上到下平铺,较小的索引视图位于较大的索引视图之上。子视图数组中的顺序定义了子视图沿Z轴的顺序。如果视图重叠,索引较小的子视图将出现在索引较大的子视图后面。七、动态改变Stackview的内容当视图被添加、移除或插入到arrangedSubviews数组中,或者当一个托管子视图的隐藏属性改变时,stackview会自动更新它的布局。OC代码如下://Appearstoremovethefistrarrangedviewfromthestack.//Theviewisstillinsidethestack,it'sjustnolongervisible,andnologercontributestothelayout.UIView*firstView=self.stackView.arrangedSubviews[0];firstView.hidden=YES;Swift代码如下://Appearstoremovethefistrarrangedviewfromthestack/Thesideistilinsidethestack/Theviewisfrom'sjustnolongervisible,andnolongercontributestothelayout.letfirstView=stackView.arrangedSubviews[0]firstView.hidden=truestack该视图还将自动响应其任何属性的更改。例如,您可以更新堆栈视图的轴属性以动态更改其方向。OC代码如下://Togglebetweenverticalandhorizo??ntalstackif(self.stackView.axis==UILayoutConstraintAxisHorizo??ntal){self.stackView.axis=UILayoutConstraintAxisVertical;}else{self.stackView.axis=UILayoutConstraintAxisHorizo??ntal;}Swift代码如下://Togglebetweenverticalandhackaxis==UILayoutConstraintAxisHorizo??ntal){self.stackView.axis=UILayoutConstraintAxisVertical;}else{self.stackView.axis=UILayoutConstraintAxisHorizo??ntal;}对于managedsubview的hidden属性的改变和stackview属性的改变,可以改变这些动画块中内置代码的动画方式。OC代码如下://Animatesremovingthefirstiteminthack.[UIViewanimateWithDuration:0.25animations:^{UIView*firstView=self.stackView.arrangedSubviews[0];firstView.hidden=YES;}];Swift代码如下://Animatesremovingthefirstiteminthack.UIView.animateWithDuration(0.25){()->VoidinletfirstView=stackView.arrangedSubviews[0]firstView.hidden=true}***,可以直接在Interface中为很多stackview属性定义具体的“sizeclass”类型值生成器。当堆栈视图的大小类发生变化时,系统将对这些变化进行动画处理。8.创建Stack视图的常用方法-initWithArrangedSubviews:(NewiniiOS9.0)ManageArrangedSubviews-addArrangedSubview:(NewiniiOS9.0)arrangedSubviewsProperty(NewiniiOS9.0)-insertArrangedSubview:atIndex:(NewiniiOS9.0)-removeArrangedSubview:(NewiniiOS9.0)设置布局alignmentProperty(NewiniiOS9.0)axisProperty(NewiniiOS9.0)baselineRelativeArrangementProperty(NewiniiOS9.0)distributionProperty(NewiniiOS9.0)layoutMarginsRelativeArrangementProperty(NewiniiOS9.0)spacingProperty(NewiniiOS9.0)constantUIStackViewDistributionUIStackViewAlignenment(010)68476606]