Xamarin 中的布局选项Layout Options in Xamarin.iOS

调整视图的大小或旋转时,有两种不同的机制来控制布局:There are two different mechanisms for controlling the layout when a view is resized or rotated:

  • 自动调整–设计器中的自动调整检查器提供了一种设置 AutoresizingMask 属性的方法。Autosizing – The Autosizing inspector in the designer provides a way to set the AutoresizingMask properties. 这会使控件锚定到其容器的边缘,并/或修复其大小。This will let a control be anchored to the edges of their container and/or fix their size. 自动调整适用于所有版本的 iOS。Autosizing works in all versions of iOS. 下面更详细地介绍了这一点This is described in more detail below
  • 自动布局– iOS 6 中引入的一项功能,可用于对 UI 控件的关系进行精细的控制。Auto Layout – A feature, introduced in iOS 6 that allows fine-grained control over the relationships of the UI controls. 它将允许控制相对于设计图面上的其他元素的元素位置。It will allow control of the positions of elements relative to other elements on the design surface. 本主题将在具有 Xamarin IOS 设计器指南的自动布局中更详细地介绍。This topic is covered in more detail in the Auto Layout with the Xamarin iOS Designer guide.

自动调整Autosizing

当用户调整窗口大小时,如设备旋转和方向发生变化时,系统会根据自动调整规则自动调整该窗口内的视图的大小。When a user resizes a window, such as when the device is rotated and the orientation changes, the system will automatically resize the Views inside that window according to their autosizing rules. 可以C#使用UIViewAutoresizingMask属性或 IOS 设计器的Properties Pad设置这些规则,如下所示:These rules can be set in C# using the AutoresizingMask property of the UIView or in the Properties Pad of the iOS Designer, as illustrated below:

选择控件后,可以手动指定控件的位置和尺寸,还可以选择 "自动调整行为"。When a control is selected, this allows you to manually specify the location and dimensions of the control, as well as choosing Autosizing behavior. 如以下屏幕截图所示,我们可以使用自动调整控件中的弹簧和 struts 来定义所选视图与父视图的关系:As illustrated in the screenshot below, we can use the springs and struts in the autosizing control to define the selected View's relationship to it's parent:

调整弹簧会使视图根据其父视图的宽度或高度进行调整。Adjusting a spring will cause the view to resize based on the width or height of its parent view. 调整strut将使视图在该特定边缘上维持其自身与其父视图之间的恒定距离。Adjusting a strut will make the view maintain a constant distance between itself and its parent view, on that particular edge.

还可以在代码中设置这些设置:These settings can also be set in code:

textfield1.Frame = new RectangleF(15, 277, 79, 27);
textfield1.AutoresizingMask = UIViewAutoresizing.FlexibleRightMargin | UIViewAutoresizing.FlexibleBottomMargin;

若要测试自动调整设置,请在项目的选项中启用不同的受支持设备方向To test the Autosizing settings, enable different Supported Device Orientations in the project’s options:

在后面的代码中,我们可以使用以下代码,这会导致两个文本控件水平调整大小:In the code behind we can use the following code, which causes the two text controls to resize horizontally:

textview1.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
textfield1.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
imageview1.AutoresizingMask = UIViewAutoresizing.FlexibleTopMargin | UIViewAutoresizing.FlexibleLeftMargin;

我们还可以使用设计器调整控件。We can also adjust the controls using the Designer. 选择如下所示的 "struts" 将使图像保持右对齐状态,而不会被剪裁到视图底部:Selecting the struts as exhibited below will cause the image to stay right-aligned without being clipped off the bottom of the view:

这些屏幕截图显示了在屏幕旋转时控件如何调整大小或重新定位:These screenshots show how the controls resize or reposition themselves when the screen is rotated:

请注意,由于 "FlexibleWidth" 设置的原因,文本视图和文本字段都延伸以保持相同的左右边距。Notice that the text view and text field both stretch to keep the same left and right margins, due to the FlexibleWidth setting. 图像的上边缘和左边距是灵活的,这意味着它将保留下边距和右边距–旋转屏幕时,使图像处于视图中。The image has the top and left margin flexible, which means it preserves the bottom and right margins – keeping the image in view when the screen is rotated. 复杂布局通常需要在每个可见控件上组合这些设置,以使用户界面保持一致,并防止控件在视图的边界发生更改时(由于旋转或其他调整大小事件)。Complex layouts typically require a combination of these settings on every visible control to keep the user-interface consistent and to prevent controls from overlapping when the view’s bounds change (due to rotation or other resizing event).