Xamarin+Prism開發詳解五：頁面布局基礎知識

說實在的研究Xamarin到現在，自己就沒設計出一款好的UI，基本都在研究后台邏輯之類的！作為Xamarin愛好者，一些簡單的頁面布局知識還是必備的。

布局常見標簽：

• StackLayout 
• AbsoluteLayout
• RelativeLayout 
• Grid 
• ScrollView

主要拿個人最喜歡的StackLayout和Grid做說明。

1、StackLayout

通過它可以設置內部子元素的縱向或者橫向布局，默認為縱向。

<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms" prism:ViewModelLocator.AutowireViewModel="True" x:Class="LayoutTest.Views.MainPage" Title="MainPage"> <StackLayout> <BoxView Color="Red"/> <BoxView Color="Green"/> <BoxView Color="Blue"/> <BoxView Color="Aqua"/> </StackLayout> </ContentPage>

顯示結果

1.1、通過設置Orientation的屬性可以切換縱向Vertical（默認）與橫向Horizontal顯示。

設置Horizontal(橫向)看看效果：

<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms" prism:ViewModelLocator.AutowireViewModel="True" x:Class="LayoutTest.Views.MainPage" Title="MainPage"> <StackLayout Orientation="Horizontal"> <BoxView Color="Red"/> <BoxView Color="Green"/> <BoxView Color="Blue"/> <BoxView Color="Aqua"/> </StackLayout> </ContentPage>

顯示結果

1.2、通過Spacing可以設置子元素間的間隔空白大小。

<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms" prism:ViewModelLocator.AutowireViewModel="True" x:Class="LayoutTest.Views.MainPage" Title="MainPage"> <StackLayout Orientation="Horizontal"

Spacing

="30"> <BoxView Color="Red"/> <BoxView Color="Green"/> <BoxView Color="Blue"/> <BoxView Color="Aqua"/> </StackLayout> </ContentPage>

顯示結果

1.3、通過HorizontalOptions和VerticalOptions可以設置子元素在Stacklayout里面的布局位置。

HorizontalOptions和VerticalOptions可以指定如下值：

• Start: 開始位置布局元素
• Center: 居中布局元素
• End: 結束位置布局元素
• Fill: 擴展元素占用整個布局寬帶 （默認設置）
• StartAndExpand: 開始位置布局元素並填充空白
• CenterAndExpand: 居中布局元素並填充空白
• EndAndExpand: 結束位置布局元素並填充空白
• FillAndExpand: 填充所有空白

首先看看Start，End，Center，Fill的效果：

<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms" prism:ViewModelLocator.AutowireViewModel="True" x:Class="LayoutTest.Views.MainPage" Title="MainPage"> <StackLayout Orientation="Horizontal"

Spacing

="30"> <BoxView Color="Red" VerticalOptions="Start"/> <BoxView Color="Green" VerticalOptions="End"/> <BoxView Color="Blue" VerticalOptions="Center"/> <BoxView Color="Aqua" VerticalOptions="Fill"/> </StackLayout> </ContentPage>

顯示結果

接下來看看AndExpand相關的設置。

首先設置StartAndExpand

<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms" prism:ViewModelLocator.AutowireViewModel="True" x:Class="LayoutTest.Views.MainPage" Title="MainPage"> <StackLayout> <BoxView Color="Red" VerticalOptions="StartAndExpand"/> <BoxView Color="Blue"/> </StackLayout> </ContentPage>

顯示結果

EndAndExpand情況

<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms" prism:ViewModelLocator.AutowireViewModel="True" x:Class="LayoutTest.Views.MainPage" Title="MainPage"> <StackLayout> <BoxView Color="Red" VerticalOptions="EndAndExpand"/> <BoxView Color="Blue"/> </StackLayout> </ContentPage>

顯示結果

FillAndExpand情況

<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms" prism:ViewModelLocator.AutowireViewModel="True" x:Class="LayoutTest.Views.MainPage" Title="MainPage"> <StackLayout> <BoxView Color="Red" VerticalOptions="FillAndExpand"/> <BoxView Color="Blue"/> </StackLayout> </ContentPage>

 

顯示結果

多個AndExpand設置的時候，空白大小是均等分配。比如下面兩個控件分別設置為FillAndExpand與StartAndExpand，上半部分全是紅色填充，后半部分開始位置為藍色。

<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms" prism:ViewModelLocator.AutowireViewModel="True" x:Class="LayoutTest.Views.MainPage" Title="MainPage"> <StackLayout> <BoxView Color="Red" VerticalOptions="FillAndExpand"/> <BoxView Color="Blue" VerticalOptions="StartAndExpand"/> </StackLayout> </ContentPage>

顯示結果

通過多個StackLayout配合也可以實現復雜的布局

代碼

<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms" prism:ViewModelLocator.AutowireViewModel="True" x:Class="LayoutTest.Views.MainPage" Title="MainPage"> <ContentPage.Padding> <OnPlatform x:TypeArguments="Thickness"

iOS

="0, 20, 0, 0"/> </ContentPage.Padding> <StackLayout> <!-- 第1個項目 --> <StackLayout Orientation="Horizontal"

VerticalOptions

="Start"> <BoxView Color="Red"/> <StackLayout HorizontalOptions="FillAndExpand"> <StackLayout Orientation="Horizontal"> <StackLayout Orientation="Vertical"

VerticalOptions

="FillAndExpand"> <StackLayout Orientation="Horizontal"> <Label Text="@lxb"/> <Label Text="@Xamarin" HorizontalOptions="FillAndExpand" /> </StackLayout> <Label Text="xxxxxxxxxxxxxx"/> </StackLayout> </StackLayout> <StackLayout Orientation="Horizontal"

HorizontalOptions

="EndAndExpand"> <Button Text="Like" HorizontalOptions="End"/> <Button Text="RT" HorizontalOptions="End"/> <Button Text="Quote" HorizontalOptions="End"/> </StackLayout> </StackLayout> </StackLayout> <!-- 第2個項目 --> <StackLayout Orientation="Horizontal"

VerticalOptions

="Start"> <BoxView Color="Red"/> <StackLayout HorizontalOptions="FillAndExpand"> <StackLayout Orientation="Horizontal"> <StackLayout Orientation="Vertical"

VerticalOptions

="FillAndExpand"> <StackLayout Orientation="Horizontal"> <Label Text="@lxb"/> <Label Text="@Xamarin" HorizontalOptions="FillAndExpand" /> </StackLayout> <Label Text="xxxxxxxxxxxxxx"/> </StackLayout> </StackLayout> <StackLayout Orientation="Horizontal"

HorizontalOptions

="EndAndExpand"> <Button Text="Like" HorizontalOptions="End"/> <Button Text="RT" HorizontalOptions="End"/> <Button Text="Quote" HorizontalOptions="End"/> </StackLayout> </StackLayout> </StackLayout> </StackLayout> </ContentPage>

 

2、Grid

Grid相當於表格布局，這在網頁布局用的最多。通過RowDefinitions屬性的RowDefinition定義一行，通過ColumnDefinitions屬性的ColumnDefinition定義一列。默認情況下是平均分配各個單元格大小。各個控件通過設置Grid.Row和Grid.Colum可以指定顯示在哪個單元格。

比如下面三行三列的例子：

<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms" prism:ViewModelLocator.AutowireViewModel="True" x:Class="LayoutTest.Views.MainPage" Title="MainPage"> <ContentPage.Padding> <OnPlatform x:TypeArguments="Thickness" iOS="20" /> </ContentPage.Padding> <Grid> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <BoxView Color="Red" /> <BoxView Color="Blue" Grid.Row="0" Grid.Column="1" /> <BoxView Color="Aqua" Grid.Row="0" Grid.Column="2" /> <BoxView Color="Maroon" Grid.Row="1" Grid.Column="0" /> <BoxView Color="Navy" Grid.Row="1" Grid.Column="1" /> <BoxView Color="Silver" Grid.Row="1" Grid.Column="2" /> <BoxView Color="Purple" Grid.Row="2" Grid.Column="0" /> <BoxView Color="Lime" Grid.Row="2" Grid.Column="1" /> <BoxView Color="Yellow" Grid.Row="2" Grid.Column="2" /> </Grid> </ContentPage>

顯示結果

2.1、大小設置

RowDefinition可以設置行高度Height，ColumnDefinition可以設置列寬度Width。設置的值可以為數字（固定大小），也可以為1*，2*之類帶*的（按比例分配大小），也可以設置為Auto（自動調整大小）。比如下面的例子：

<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms" prism:ViewModelLocator.AutowireViewModel="True" x:Class="LayoutTest.Views.MainPage" Title="MainPage"> <ContentPage.Padding> <OnPlatform x:TypeArguments="Thickness"

iOS

="0, 20, 0, 0"/> </ContentPage.Padding> <Grid> <!-- 行定義 --> <Grid.RowDefinitions> <RowDefinition Height="15" /> <!-- 固定 --> <RowDefinition Height="1*" /> <!-- 1比2分配 --> <RowDefinition Height="2*" /> </Grid.RowDefinitions> <!-- 列定義 --> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <!-- 根據布局自動設置 --> <ColumnDefinition Width="*" /> <!-- 默認值*(和1*一樣) --> <ColumnDefinition /> </Grid.ColumnDefinitions> <BoxView Color="Red" /> <!-- 默認設置在0,0單元格 --> <BoxView Color="Blue" Grid.Row="0"

Grid.Column

="1" /> <BoxView Color="Aqua" Grid.Row="0"

Grid.Column

="2" /> <BoxView Color="Maroon" Grid.Row="1"

Grid.Column

="0" /> <BoxView Color="Navy" Grid.Row="1"

Grid.Column

="1" /> <BoxView Color="Silver" Grid.Row="1"

Grid.Column

="2" /> <BoxView Color="Purple" Grid.Row="2"

Grid.Column

="0" /> <BoxView Color="Lime" Grid.Row="2"

Grid.Column

="1" /> <BoxView Color="Yellow" Grid.Row="2"

Grid.Column

="2" /> </Grid> </ContentPage>

顯示結果

2.2、復數行，復數列設置

Grid.RowSpan設置復數行，Grid.ColumnSpan設置復數列。

<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms" prism:ViewModelLocator.AutowireViewModel="True" x:Class="LayoutTest.Views.MainPage" Title="MainPage"> <ContentPage.Padding> <OnPlatform x:TypeArguments="Thickness"

iOS

="0, 20, 0, 0"/> </ContentPage.Padding> <Grid> <!-- 行定義 --> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <!-- 列定義 --> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <BoxView Color="Red" Grid.RowSpan="2" Grid.ColumnSpan="3" /> <BoxView Color="Blue" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2"/> </Grid> </ContentPage>

顯示效果

 

同樣可以簡單實現上面StackLayout的布局。

<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms" prism:ViewModelLocator.AutowireViewModel="True" x:Class="LayoutTest.Views.MainPage" Title="MainPage"> <ContentPage.Padding> <OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" /> </ContentPage.Padding> <StackLayout VerticalOptions="Start"> <Grid> <!-- 行定義 --> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <!-- 列定義 --> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <BoxView Color="Red" Grid.RowSpan="3" /> <StackLayout Orientation="Horizontal" Grid.Column="1" Grid.ColumnSpan="4"> <Label Text="@lxb" /> <Label Text="@Xamarin" /> </StackLayout> <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="4" Text="xxxxxxxxxx" /> <Button Grid.Row="2" Grid.Column="2" Text="Like" /> <Button Grid.Row="2" Grid.Column="3" Text="RT" /> <Button Grid.Row="2" Grid.Column="4" Text="Quote" /> </Grid> <Grid> <!-- 行定義 --> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <!-- 列定義 --> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <BoxView Color="Red" Grid.RowSpan="3" /> <StackLayout Orientation="Horizontal" Grid.Column="1" Grid.ColumnSpan="4"> <Label Text="@lxb" /> <Label Text="@Xamarin" /> </StackLayout> <Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="4" Text="xxxxxxxxxx" /> <Button Grid.Row="2" Grid.Column="2" Text="Like" /> <Button Grid.Row="2" Grid.Column="3" Text="RT" /> <Button Grid.Row="2" Grid.Column="4" Text="Quote" /> </Grid> </StackLayout> </ContentPage>

顯示效果

 

 

3、余白設置

余白通過使用Padding和Margin進行設置。Padding是設置控件外側余白，Margin是設置控件內側余白。

3.1、設置方法

• 四個方向一個值設置
• 左右和上下兩個值設置
• 四個方向不同值設置

（比如：

【20】：四個方向都自為20；

【20，10】左右為20，上下為10；

【10，15，20，25】左部余白為10，上部余白15，右余白為20，下部余白25。）

<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms" prism:ViewModelLocator.AutowireViewModel="True" x:Class="LayoutTest.Views.MainPage" Title="MainPage"> <ContentPage.Padding> <OnPlatform x:TypeArguments="Thickness" iOS="20" /> </ContentPage.Padding> <Grid Margin="20,10"> <BoxView Color="Red"/> </Grid> </ContentPage>

頁面距離邊框20，Grid左右距離頁面20，上下距離頁面10。

 

總結

使用xamarin.forms開發應用，只要掌握使用StackLayout與Grid布局，基本上可以實現各種想要的布局。當然要想UI很漂亮，圖片設計是必須的。