Xamarin.Forms 用户界面——控件——Layouts

布局

在屏幕上放置视图。

PDF用于离线使用

• 下载PDF

示例代码：

• 布局
• BusinessTumble示例

让我们知道你对此的感受

最后更新：2016年7月

Xamarin.Forms有几个布局和功能，用于在屏幕上组织内容。下面介绍每个布局控制，以及如何处理屏幕方向更改的详细信息：

• StackLayout - 用于水平或垂直线性排列视图。StackLayout中的视图可以对齐到布局的中心，左侧或右侧。
• AbsoluteLayout - 用于通过根据绝对值或比率设置坐标和大小来排列视图。AbsoluteLayout可用于层次化视图，并将其锚定到左侧，右侧或中心。
• RelativeLayout - 用于通过设置与父母的尺寸和位置相关的约束来排列视图。
• 网格 - 用于在网格中排列视图。可以使用绝对值或比率来指定行和列。
• ScrollView - 用于在视图无法完全符合屏幕范围内时提供滚动。
• LayoutOptions - 定义视图相对于其父对象的对齐和展开。
• 边距和填充 - 演示了如何在用户界面中呈现元素时控制布局行为。
• 设备方向 - 说明如何处理设备方向更改。
• 平板电脑和桌面设备上的布局 - 显示了如何优化每个平台上的较大屏幕。
• 创建自定义布局 - 介绍如何创建自定义布局类。

平台控件也可以直接在Xamarin.Forms布局中使用Native Embedding（Xamarin.Forms 2.2中新增），您可以创建自定义布局以满足特定要求。

以下图形可视化布局控件：

选择正确的布局

您在应用程序中选择的布局可以帮助或伤害您，因为您正在创建一个有吸引力和可用的Xamarin.Forms应用程序。花一些时间考虑每个布局如何工作可以帮助您编写更干净，更可扩展的UI代码。屏幕可以组合不同的布局来实现特定的设计。

StackLayout

所述StackLayout用于显示沿着线即水平或垂直的景色。布局中的位置和大小的基础上确定一个观点的HeightRequest，WidthRequest，HorizontalOptions和VerticalOptions。StackLayout经常用作基本布局，在屏幕上布置其他布局。

有关什么时候StackLayout是一个很好的选择的例子，请考虑一个需要显示按钮和标签的应用程序，标签左对齐，按钮右对齐。

<StackLayout Orientation="Horizontal">  <Label HorizontalOptions="StartAndExpand" Text="Label" />  <Button HorizontalOptions="End" Text="Button" /></StackLayout>

AbsoluteLayout

在AbsoluteLayout用于显示图，其中的大小和位置被指定相对于布局的尺寸或者作为明确的值或值。不像StackLayout和Grid，AbsoluteLayout让孩子的意见重叠。不像RelativeLayout，AbsoluteLayout不让你把元素放在屏幕之外。

对于什么时候AbsoluteLayout是一个很好的选择的例子，考虑一个应用程序需要将对象的集合作为堆栈。当提供照片或歌曲的相册时，经常会出现这种情况。以下代码给出了一个堆的外观，元素旋转以提示桩的内容：

在XAML中：

<AbsoluteLayout Padding="15">  <Image AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100" Rotation="30"    Source="bottom.png" />  <Image AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100" Rotation="60"    Source="middle.png" />  <Image AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"    Source="cover.png" /></AbsoluteLayout>

注意上述代码的以下几个方面：

• 每个Image显示在相同的位置（在水平空间的中间）
• 在Padding被认为AbsoluteLayout不像RelativeLayout，而忽略它。
• AbsoluteLayout.LayoutFlags指定如何解释布局界限。在这种情况下PositionProportional，意味着坐标将是布局大小的比例，而大小将被解释为显式大小。
• AbsoluteLayout.Layoutbounds 以该顺序指定水平位置，垂直位置，宽度和高度。

的RelativeLayout

所述RelativeLayout用于显示的观点，具有的尺寸和指定为相对于布局或另一视图的值的值的位置。相关值不需要在相关视图中匹配相应的值。作为示例，可以将视图的Width属性设置为与另一视图的X属性成比例。

RelativeLayout可用于创建跨设备大小成比例缩放的UI。以下XAML实现了一个设计，最顶端的是一个盒子，中间有一个标志杆：

<RelativeLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">  <BoxView Color="Blue" HeightRequest="50" WidthRequest="50"    RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = 0}"    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = 0}" />  <BoxView Color="Red" HeightRequest="50" WidthRequest="50"    RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = .9}"    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = 0}" />  <BoxView Color="Gray" WidthRequest="15" x:Name="pole"    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.75}"    RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = .45}"    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = .25}" />  <BoxView Color="Green"    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.10, Constant=10}"    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width, Factor=.2, Constant=20}"    RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToView, ElementName=pole, Property=X, Constant=15}"    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pole, Property=Y, Constant=0}" /></RelativeLayout>

注意上述代码的以下几个方面：

• 位置和大小都被指定为约束。
• 旗杆被命名，以便可以相对于旗杆设置标志（绿色框的）位置。
• 约束表达式具有Factor和Constant属性，可用于将位置和大小定义为其他对象的属性的倍数（或分数），加上常量。常数可以是负数。

格

的Grid用于显示在行和列元素。请注意，网格不是表，因此它不具有单元格，页眉和页脚行或行和列之间的边界的概念。一般来说，Grid不适合显示表格数据。为此，请考虑使用ListView或TableView。

有关何时Grid使用正确的布局的示例，请考虑计算器的数字输入。计算器的数字输入可能由四行和三列组成，每列有一个按钮。以下代码实现了此设计：

<Grid>  <Grid.RowDefinitions>    <RowDefinition Height="*" />    <RowDefinition Height="*" />    <RowDefinition Height="*" />    <RowDefinition Height="*" />  </Grid.RowDefinitions>  <Grid.ColumnDefinitions>    <ColumnDefinition Width="*" />    <ColumnDefinition Width="*" />    <ColumnDefinition Width="*" />  </Grid.ColumnDefinitions>  <Button Text="1" Grid.Row="0" Grid.Column="0" />  <Button Text="2" Grid.Row="0" Grid.Column="1" />  <Button Text="3" Grid.Row="0" Grid.Column="2" />  <Button Text="4" Grid.Row="1" Grid.Column="0" />  <Button Text="5" Grid.Row="1" Grid.Column="1" />  <Button Text="6" Grid.Row="1" Grid.Column="2" />  <Button Text="7" Grid.Row="2" Grid.Column="0" />  <Button Text="8" Grid.Row="2" Grid.Column="1" />  <Button Text="9" Grid.Row="2" Grid.Column="2" />  <Button Text="0" Grid.Row="3" Grid.Column="1" />  <Button Text="<-" Grid.Row="3" Grid.Column="2" /></Grid>

注意上述代码的以下几个方面：

• 明确指定网格和列，不从内容推断。
• Height并且Width值可以设置为star，这意味着Grid将设置这些值来填充可用空间。
• 每个按钮的位置由Grid.Row＆Grid.Column属性指定。

LayoutOptions

该LayoutOptions结构可用于定义视图相对于其父对象的对齐和展开。

保证金和填充

当用户界面中呈现元素时，该属性Margin和Padding属性控制布局行为。

设备方向

Xamarin.Forms及其内置布局能够处理设备方向的变化。考虑您的应用程序将支持哪些方向，以及如何利用横向和纵向模式提供的空间。

本地嵌入

平台特定的控件可以直接添加到Xamarin.Forms布局中。此外，可以覆盖自定义控件的布局，以便更正其测量API使用情况。

平板电脑和桌面应用程式的布局

iOS，Android和Windows平台都支持平板设备（以及Windows的笔记本电脑和台式机）上的较大屏幕尺寸。Xamarin.Forms允许您通过检测设备类型和调整页面布局，或者对于较大的屏幕完全使用完全不同的页面，来优化您的应用程序以实现较大的屏幕。

创建自定义布局

Xamarin.Forms定义了四种布局类- ，StackLayout，AbsoluteLayout，RelativeLayout和Grid，每个排列其子以不同的方式。但是，有时使用Xamarin.Forms不提供的布局来组织页面内容是必要的。本文介绍如何编写自定义布局类，并演示一种方向敏感WrapLayout类，将其子级别横跨页面排列，然后将后续子项的显示包装到其他行。

做你的选择

请注意，在大多数情况下，可以使用多个布局选择来实现所需的设计。当有多个有效的选择时，请考虑哪种方法对您的情况来说最简单。大多数设计无法通过一个布局实现，因此根据需要嵌套布局以创建更复杂的设计。