溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文翻譯自CodeProject文章：https://www.codeproject.com/Articles/1227733/Xamarin-Notes-Xamarin-Forms-Layouts
轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
在本篇教程中，我們將了解Xamarin.Forms中幾個常用的Layout類型并介紹使用這幾種布局類似進行跨平臺移動開發時的示例。
StackLayout允許您將視圖以垂直方向堆疊或以水平方向堆疊，這是最常用的布局。查看文檔以獲取更多詳細信息。
<StackLayout> <Label x:Name="MainLable" HorizontalOptions="Center" FontSize="30" TextColor="Black"></Label> </StackLayout>
Orientation
設置 Horizontal 或者 Vertical。默認值是Vertical。
<StackLayout Orientation="Horizontal"> or <StackLayout Orientation="Vertical">
LayoutOptions定位
視圖可以根據相對于布局的視圖位置設置為 VerticalOptions 或者 HorizontalOptions ，在這一部分我們中，我們將描述如何使用StackLayout面板將視圖組裝到水平或垂直堆疊中。
<StackLayout Orientation="Horizontal"> <Button x:Name="Button1" Text="Button1" BackgroundColor="Red"></Button> <Button x:Name="Button2" Text="Button2" BackgroundColor="Aqua"></Button> </StackLayout> <StackLayout Orientation="Vertical"> <Button x:Name="Button1" Text="Button1" BackgroundColor="Red"></Button> <Button x:Name="Button2" Text="Button2" BackgroundColor="Aqua"></Button> </StackLayout>
在我們的示例中，我們將兩個按鈕組合成一個水平堆疊效果（如第一張圖片所示）。
VerticalOptions 以及 HorizontalOptions 使用以下值：
Start：該選項將View放置在布局的起始位置。
End：該選項和Start剛好相反，將View放置在布局的結束位置。
Fill：該選項將View撐滿布局，不留白。
Center：該選項將視圖放置在布局的正中。
視圖是如何在父視圖中對齊的？
<StackLayout> <Label HorizontalOptions="Start" BackgroundColor="Blue" Text="Start"></Label> <Label HorizontalOptions="End" BackgroundColor="Red" Text="End"></Label> <Label HorizontalOptions="Center" BackgroundColor="Yellow" Text="Center"></Label> <Label HorizontalOptions="Fill" BackgroundColor="Green" Text="Fill"></Label> </StackLayout>
用C#代碼設置如下
var stack = new StackLayout();
var labelStart = new Label()
{
HorizontalOptions = LayoutOptions.Start,
BackgroundColor = Color.Blue,
Text = "Start"
};
var labelEnd = new Label()
{
HorizontalOptions = LayoutOptions.End,
BackgroundColor = Color.Red,
Text = "End"
};
var labelCenter = new Label()
{
HorizontalOptions = LayoutOptions.Center,
BackgroundColor = Color.Yellow,
Text = "Center"
};
var labelFill = new Label()
{
HorizontalOptions = LayoutOptions.Fill,
BackgroundColor = Color.Green,
Text = "Fill"
};
stack.Children.Add(labelStart);
stack.Children.Add(labelEnd);
stack.Children.Add(labelCenter);
stack.Children.Add(labelFill);
Content = stack;
<StackLayout Orientation="Vertical"> <Label HeightRequest="100" BackgroundColor="Blue" Text="One"/> <Label HeightRequest="50" BackgroundColor="Red" Text="Two"/> <Label HeightRequest="200" BackgroundColor="Yellow" Text="Three"/> </StackLayout>
var stack = new StackLayout()
{
Orientation = StackOrientation.Vertical
};
var labelOne = new Label()
{
HeightRequest = 100,
BackgroundColor = Color.Blue,
Text = "One"
};
var labelTwo = new Label()
{
HeightRequest = 50,
BackgroundColor = Color.Red,
Text = "Two"
};
var labelThree = new Label()
{
HeightRequest = 200,
BackgroundColor = Color.Yellow,
Text = "Three"
};
stack.Children.Add(labelOne);
stack.Children.Add(labelTwo);
stack.Children.Add(labelThree);
Content = stack;
Spacing
可以設置為整數或者小數。
<StackLayout Orientation="Vertical" BackgroundColor="Gray"> <StackLayout Orientation="Horizontal"> <Label BackgroundColor="Blue" Text="Start"></Label> <Label BackgroundColor="Red" Text="End"></Label> <Label BackgroundColor="Yellow" Text="Center"></Label> </StackLayout> <StackLayout Orientation="Vertical" BackgroundColor="DarkBlue"> <Button x:Name="Button1" Text="Button1" BackgroundColor="Red"></Button> <Button x:Name="Button2" Text="Button2" BackgroundColor="Aqua"></Button> </StackLayout>
如果我們在第一個StackLayout設置了Spacing：
<StackLayout Orientation="Horizontal" Spacing="-6"> or <StackLayout Orientation="Horizontal" Spacing="0">
Padding 和 Margin
以下是一個示例：
<StackLayout Orientation="Vertical" BackgroundColor="Gray" > <StackLayout Orientation="Horizontal" Spacing="10" Padding="50,20,100,150"> <Label BackgroundColor="Blue" Text="Start"></Label> <Label BackgroundColor="Red" Text="End"></Label> <Label BackgroundColor="Yellow" Text="Center"></Label> </StackLayout> <StackLayout Orientation="Vertical" BackgroundColor="DarkBlue" Spacing="50"> <Button x:Name="Button1" Text="Button1" BackgroundColor="Red"></Button> <Button x:Name="Button2" Text="Button2" BackgroundColor="Aqua"></Button> </StackLayout> </StackLayout>
AbsoluteLayou允許你在指定的絕對位置放置子元素。
有時，你可能希望更多地控制屏幕上某個對象的位置，比如說，你希望將它們錨定到屏幕的邊緣，或者希望覆蓋住多個元素。
在AbsoluteLayou中，我們會使用最重要的四個值以及八個設置選項。
四個值是由X、Y、Width、Height組成，通過這四個值可以為你的布局進行定位，它們中的每一個都可以被設置為比例值或絕對值。
可以是絕對值（以像素為單位）或者比例值（從0到1）
位置：
X：視圖錨定位置的水平位置。
Y：視圖錨定位置的垂直位置。
尺寸：
Width：定義當前視圖的寬度。
Height：定義當前視圖的高度。
值被指定為邊界和一個標志的組合。LayoutBounds是由四個值組成的矩形：x，y，寬度和高度。
可以是絕對值Absolute標志（以像素為單位）或者比例值Proportional標志（從0到1）
None：全部的數值是絕對值（數值以像素為單位）。
All：表示布局邊界的全部數值均表示一個比例值（數值從0到1）。
WidthProportional：表示寬度是比例值，而其它的數值以絕對值表示。
HeightProportional：表示高度是比例值，而其它的數值以絕對值表示。
XProportional：表示X坐標值是比例值，而將其它的數值作為絕對值對待。
YProportional：表示Y坐標值是比例值，而將其它的數值作為絕對值對待。
PositionProportional：表示X和Y的坐標值是比例值，而將表示尺寸的數值作為絕對值表示。
SizeProportional：表示Width和Height的值是比例值，而表示位置的數值是絕對值。
更多詳細內容請參見本鏈接。
結構：
<AbsoluteLayout> <BoxView Color="Olive" AbsoluteLayout.LayoutBounds="X, Y, Width, Height" AbsoluteLayout.LayoutFlags="FlagsValue" /> </AbsoluteLayout>
Proportional 比例示例 1：
<BoxView Color="Blue" AbsoluteLayout.LayoutBounds="0, 0, 0.1, 0.5" AbsoluteLayout.LayoutFlags="All" />
Proportional 比例示例 2：
<BoxView Color="Blue" AbsoluteLayout.LayoutBounds="0, 0, 1, 0.5" AbsoluteLayout.LayoutFlags="All" />
Absolute 絕對值示例 1：
<BoxView Color="Blue" AbsoluteLayout.LayoutBounds="0, 75, 250, 410" AbsoluteLayout.LayoutFlags="None" />
RelativeLayout使用約束來對子視圖進行布局。更多詳細信息請參見此鏈接。
與AbsoluteLayout類似，在使用RelativeLayout時，我們可以將元素疊加在一起，但是它比AbsoluteLayout更加強大，因為你可以將相對于另一個元素的位置或大小的約束應用于一個元素。它提供了與元素位置和大小相關的更多控制。
以下是一個示例：
Type：它定義了約束是相對于父還是另一個視圖，我們可以使用以下值：RelativeToParent或Constant或RelativeToView。
Property：它定義了我們需要使用哪個屬性作為約束的基礎。它的值可以是Width或Height或者X再或者Y。
Factor：被用來應用屬性的值，該值是一個小數，介于0和1之間，可以寫成0.5e5的格式。
Constant：可以被用作指示一個偏移量的值。
ElementName：該約束相對于的視圖的名稱，如果我們使用關聯到某個視圖的約束關系的話。
<ScrollView>
<RelativeLayout>
<BoxView Color="Gray" HeightRequest="200"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=1}" />
<Button BorderRadius="35"
x:Name="ImageCircleBack"
BackgroundColor="Blue"
HeightRequest="70" WidthRequest="70"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=.5, Constant = -35}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Factor=0, Property=Y, Constant=70}" />
<Label Text="Hamida REBA?" FontAttributes="Bold" FontSize="26" HorizontalTextAlignment="Center"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=140}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" />
</RelativeLayout>
</ScrollView>
我們可以得到以下結果：
Grid和一個表格一樣。它比StackLayout更加通用，提供列和行兩個維度以供輔助定位。在不同行之間對齊視圖也很容易。實際使用起來與WPF的Grid非常類似甚至說沒什么區別。
在這一部分，我們將學習如何創建一個Grid并指定行和列。
<Grid> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Button Text="7" Grid.Row="1" Grid.Column="0" BackgroundColor="White" TextColor="Black" FontSize="36" BorderRadius="0" /> <Button Text="8" Grid.Row="1" Grid.Column="1" BackgroundColor="White" TextColor="Black" FontSize="36" BorderRadius="0" /> <Button Text="9" Grid.Row="1" Grid.Column="2" BackgroundColor="White" TextColor="Black" FontSize="36" BorderRadius="0" /> <Button Text="4" Grid.Row="2" Grid.Column="0" BackgroundColor="White" TextColor="Black" FontSize="36" BorderRadius="0" /> <Button Text="5" Grid.Row="2" Grid.Column="1" BackgroundColor="White" TextColor="Black" FontSize="36" BorderRadius="0" /> <Button Text="6" Grid.Row="2" Grid.Column="2" BackgroundColor="White" TextColor="Black" FontSize="36" BorderRadius="0" /> <Button Text="1" Grid.Row="3" Grid.Column="0" BackgroundColor="White" TextColor="Black" FontSize="36" BorderRadius="0" /> <Button Text="2" Grid.Row="3" Grid.Column="1" BackgroundColor="White" TextColor="Black" FontSize="36" BorderRadius="0" /> <Button Text="3" Grid.Row="3" Grid.Column="2" BackgroundColor="White" TextColor="Black" FontSize="36" BorderRadius="0" /> <Button Text="0" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3" BackgroundColor="White" TextColor="Black" FontSize="36" BorderRadius="0" /> <Button Text="/" Grid.Row="1" Grid.Column="3" BackgroundColor="#FFA500" TextColor="White" FontSize="36" BorderRadius="0" /> <Button Text="X" Grid.Row="2" Grid.Column="3" BackgroundColor="#0000ff" TextColor="White" FontSize="36" BorderRadius="0" /> <Button Text="-" Grid.Row="3" Grid.Column="3" BackgroundColor="#8000ff" TextColor="White" FontSize="36" BorderRadius="0" /> <Button Text="+" Grid.Row="4" Grid.Column="3" BackgroundColor="#0080ff" TextColor="White" FontSize="36" BorderRadius="0" /> <Button Text="C" Grid.Row="5" Grid.Column="0" BackgroundColor="#808080" TextColor="White" FontSize="36" BorderRadius="0" /> <Button Text="=" Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="3" BackgroundColor="#000066" TextColor="White" FontSize="36" BorderRadius="0" /> </Grid>
我們首先在Grid中使用這些標記定義行數和列數。
<Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions>
在此之后，我們將在其中排布視圖
例如：
<Button Text="7" Grid.Row="1" Grid.Column="0" BackgroundColor="White" TextColor="Black" FontSize="36" BorderRadius="0" />
該按鈕將被放置在第二行（Grid.Row="1"）第一列（Grid.Column="0"）。
使用Height屬性定義行的高度：
<Grid.RowDefinitions> <RowDefinition Height="Auto" />
該值可以是Auto或者100或者星號（*），我們可以指定2*（甚至n*）。
使用Width屬性定義列的寬度：
<Grid.ColumnDefinitions> <ColumnDefinition Width="*"/>
該值可以是Auto或者100或者星號（*），我們可以指定2*（甚至n*）。
<Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="100" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="2*"/> </Grid.ColumnDefinitions> <Label Grid.Column="0" Grid.Row="0" Text="1" BackgroundColor="Red" ></Label> <Label Grid.Column="1" Grid.Row="0" Text="2" BackgroundColor="Red"></Label> <Label Grid.Column="0" Grid.Row="1" Text="3" BackgroundColor="Red"></Label> <Label Grid.Column="1" Grid.Row="1" Text="4" BackgroundColor="Red"></Label> <Label Grid.Column="0" Grid.Row="2" Text="5" BackgroundColor="Red"></Label> <Label Grid.Column="1" Grid.Row="2" Text="6" BackgroundColor="Red"></Label> </Grid>
ScrollView是一個可以滾動的內容。
如果不使用ScrollView：
<StackLayout> <BoxView Color="Blue" HeightRequest="200"/> <BoxView Color="Green" HeightRequest="200"/> <BoxView Color="Firebrick" HeightRequest="200"/> <BoxView Color="YellowGreen" HeightRequest="300"/> </StackLayout>
在以上示例中，顏色為Yellow Green的BoxView將不顯示，然后我們向其中添加一個ScrollView，通過滾動，我們就可以看到全部的內容。ScrollView將向界面UI添加一個滾動指示器。當我們需要指定水平滾動或者垂直滾動，再或者雙向滾動時，我們可以使用到Orientation屬性。
<ScrollView Orientation="Horizontal"> or <ScrollView Orientation="Vertical"> or <ScrollView Orientation="Both"> <ScrollView> <StackLayout> <BoxView Color="Blue" HeightRequest="200"/> <BoxView Color="Green" HeightRequest="200"/> <BoxView Color="Firebrick" HeightRequest="200"/> <BoxView Color="YellowGreen" HeightRequest="300"/> </StackLayout> </ScrollView>
更多詳細信息，請參見此鏈接。
ScrollView通常被用來顯示一個列表（ListView）。
下篇文章我們將說一說Page（頁面）相關的內容。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
