布局
在屏幕上放置视图。
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
类,将其子级别横跨页面排列,然后将后续子项的显示包装到其他行。
做你的选择
请注意,在大多数情况下,可以使用多个布局选择来实现所需的设计。当有多个有效的选择时,请考虑哪种方法对您的情况来说最简单。大多数设计无法通过一个布局实现,因此根据需要嵌套布局以创建更复杂的设计。