1

不同布局的預(yù)覽如下：

StackLayout：一維堆棧布局，只能進(jìn)行橫向或縱向布局，允許嵌套。可以理解為行或列為1的Grid

從左到右依次為縱向，橫向，嵌套

?嵌套部分代碼：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"x:Class="StackLayoutDemos.Views.CombinedStackLayoutPage"Title="Combined StackLayouts demo"><StackLayout Margin="20">...<Frame BorderColor="Black"Padding="5"><StackLayout Orientation="Horizontal"Spacing="15"><BoxView Color="Red" /><Label Text="Red"FontSize="Large"VerticalOptions="Center" /></StackLayout></Frame><Frame BorderColor="Black"Padding="5"><StackLayout Orientation="Horizontal"Spacing="15"><BoxView Color="Yellow" /><Label Text="Yellow"FontSize="Large"VerticalOptions="Center" /></StackLayout></Frame><Frame BorderColor="Black"Padding="5"><StackLayout Orientation="Horizontal"Spacing="15"><BoxView Color="Blue" /><Label Text="Blue"FontSize="Large"VerticalOptions="Center" /></StackLayout></Frame>...</StackLayout> </ContentPage>

AbsoluteLayout：絕對(duì)布局，以左上角為基點(diǎn)的布局，也支持按比例布局。對(duì)于Position只要把AbsoluteLayout.LayoutFlags設(shè)置為PositionProportional屬性，那么Position(x,y)就是比例值，其他所有值視為絕對(duì)值，對(duì)于X,Y,Width,Height,Position,Size等屬性也一樣。
最大的特點(diǎn)在于能夠定位子類。但是官方文檔有個(gè)警告

?使用絕對(duì)了絕對(duì)值坐標(biāo)的話，不同設(shè)備的中心坐標(biāo)可能會(huì)偏移，所以需要注意一下。

子級(jí)調(diào)整和比例布局示例如下：

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"x:Class="XamarinApp1.MainPage"><AbsoluteLayout Margin="20"><BoxView Color="Silver"AbsoluteLayout.LayoutBounds="0, 10, 200, 5" /><BoxView Color="Silver"AbsoluteLayout.LayoutBounds="0, 20, 200, 5" /><BoxView Color="Silver"AbsoluteLayout.LayoutBounds="10, 0, 5, 65" /><BoxView Color="Silver"AbsoluteLayout.LayoutBounds="20, 0, 5, 65" /><Label Text="Stylish Header"FontSize="24"AbsoluteLayout.LayoutBounds="30, 25" /><BoxView Color="Black"AbsoluteLayout.LayoutBounds="0.5,1,100,25"AbsoluteLayout.LayoutFlags="PositionProportional" /><Label Text="Centered text"AbsoluteLayout.LayoutBounds="0.5,0.5,110,25"AbsoluteLayout.LayoutFlags="PositionProportional" /></AbsoluteLayout></ContentPage>

注意：AbsoluteLayout.LayoutBounds（x,y,w,h）當(dāng)設(shè)置為百分比時(shí)
????????x表示應(yīng)該在控件左側(cè)的剩余空間百分比（即實(shí)際位置X=x*(父寬度?- 控件寬度)）
????????y表示應(yīng)該在控件頂部的剩余空間百分比（即實(shí)際位置Y=y*(父高度 - 控件高度)）
????????width是控件的寬度，以父寬度的百分比表示
????????height是控件的高度，以父高度的百分比表示

RelativeLayout：相對(duì)布局，以某個(gè)位置為基點(diǎn)的布局，允許創(chuàng)建跨設(shè)備大小按比例縮放的 UI，能夠定位子元素。也可以按比例布局。
指令說明起來(lái)比較麻煩，直接上代碼+注釋了，比絕對(duì)布局更麻煩了一點(diǎn)，但是思路是相似的。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"x:Class="XamarinApp1.MainPage"><RelativeLayout Margin="20" HorizontalOptions="Center" WidthRequest="300"><!--絕對(duì)值1--><BoxView Color="red"RelativeLayout.XConstraint="0"RelativeLayout.YConstraint="10"RelativeLayout.WidthConstraint="100"RelativeLayout.HeightConstraint="5" /><!--絕對(duì)值2--><BoxView Color="Chocolate"RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=20}"RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=20}"RelativeLayout.WidthConstraint="100"RelativeLayout.HeightConstraint="5" /><!--基于父對(duì)象，絕對(duì)值偏移--><BoxView Color="DarkGreen"RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Constant=-150}"RelativeLayout.YConstraint="30"RelativeLayout.WidthConstraint="100"RelativeLayout.HeightConstraint="5" /><!--基于父對(duì)象，比例偏移(并創(chuàng)建ViewBox基準(zhǔn))--><BoxView x:Name="ViewBox"Color="Silver"RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.2}"RelativeLayout.YConstraint="40"RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.6}"RelativeLayout.HeightConstraint="50" /><!--基于View對(duì)象的偏移--><BoxView Color="Black"RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ViewBox,Property=X, Constant=10}"RelativeLayout.YConstraint="50"RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=ViewBox,Property=Width, Factor=1.5}"RelativeLayout.HeightConstraint="5" /></RelativeLayout></ContentPage>

如果還有疑問，直接看官方文檔吧Xamarin.Forms RelativeLayout - Xamarin | Microsoft Docs

Grid：網(wǎng)格，可以跨行，均勻布局基礎(chǔ)上，可以合并行、列進(jìn)行布局。也可以嵌套Grid對(duì)象。
示例：

<!--創(chuàng)建一個(gè)間距5,0的3x3網(wǎng)格--><Grid RowSpacing="5"ColumnSpacing="0"ColumnDefinitions="Auto, *, 100"><!--Auto表示會(huì)隨需求變換大小--><!--空和* 表示剩余空間的一個(gè)權(quán)重，如下則是占比分別為 1:2:1--><Grid.RowDefinitions><RowDefinition/><RowDefinition Height="2*" /><RowDefinition Height="*" /></Grid.RowDefinitions><Label HorizontalOptions="Center"VerticalOptions="Center"Text="位置(0,0)"Grid.Row="0" Grid.Column="0"TextColor="White"BackgroundColor="Blue" /><BoxView Color="Silver"HeightRequest="0"Grid.Row="0" Grid.Column="1" /><BoxView Color="Teal"Grid.Row="1" Grid.Column="0" /><Label Text="中心"Grid.Row="1" Grid.Column="1"TextColor="Purple"BackgroundColor="Aqua"HorizontalTextAlignment="Center"VerticalTextAlignment="Center" /><Label Text="跨行"Grid.Row="0" Grid.Column="2" Grid.RowSpan="2"TextColor="Yellow"BackgroundColor="Blue"HorizontalTextAlignment="Center"VerticalTextAlignment="Center" /><Label Text="跨列"Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3"TextColor="Blue"BackgroundColor="Yellow"HorizontalTextAlignment="Center"VerticalTextAlignment="Center" /></Grid>

FlexLayout：彈性布局，說明篇幅比較長(zhǎng)，可以認(rèn)為是二維的StackLayout，嵌套比較靈活。
允許FlexLayout自身嵌套，自適應(yīng)布局等。

比如嵌套：

<FlexLayout Direction="Column"><!-- Header --><Label Text="HEADER"FontSize="Large"BackgroundColor="Aqua"HorizontalTextAlignment="Center" FlexLayout.AlignSelf="Center"/><!-- Body --><FlexLayout FlexLayout.Grow="1"><!-- Content --><Label Text="CONTENT"FontSize="Large"BackgroundColor="Gray"HorizontalTextAlignment="Center"VerticalTextAlignment="Center"FlexLayout.Grow="1" /><!-- Navigation items--><BoxView FlexLayout.Basis="50"FlexLayout.Order="-1"Color="Blue" /><!-- Aside items --><BoxView FlexLayout.Basis="50"Color="Green" /></FlexLayout><!-- Footer --><Label Text="FOOTER"FontSize="Large"BackgroundColor="Pink"HorizontalTextAlignment="Center" /></FlexLayout>

比如還有實(shí)現(xiàn)自適應(yīng)滾動(dòng)布局(橫、縱)，內(nèi)容自動(dòng)對(duì)齊，目錄，等。

對(duì)具體實(shí)現(xiàn)去官方文檔底下看視頻教程，或者下載demo自己動(dòng)手點(diǎn)一點(diǎn)。
地址：The Xamarin.Forms FlexLayout - Xamarin | Microsoft Docs

?
ScrollView：滾動(dòng)布局，顧名思義，能滾動(dòng)的視圖。ScrollView對(duì)象只允許一個(gè)子對(duì)象，且不應(yīng)提供其他同級(jí)滾動(dòng)控件。

<?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:local="clr-namespace:XamlNamedColorSamples"x:Class="XamlNamedColorSamples.MainPage"><AbsoluteLayout ><ScrollViewAbsoluteLayout.LayoutBounds="0,0,1,0.6"AbsoluteLayout.LayoutFlags="All"><StackLayout BindableLayout.ItemsSource="{x:Static local:NamedColor.All}"><BindableLayout.ItemTemplate><DataTemplate><StackLayout Orientation="Horizontal"><BoxView Color="{Binding Color}"HeightRequest="32"WidthRequest="32"VerticalOptions="Center" /><Label Text="{Binding FriendlyName}"FontSize="24"VerticalOptions="Center" /></StackLayout></DataTemplate></BindableLayout.ItemTemplate></StackLayout></ScrollView><ScrollViewAbsoluteLayout.LayoutBounds="0,1,1,0.5"AbsoluteLayout.LayoutFlags="All"BackgroundColor="#40ffff00"></ScrollView></AbsoluteLayout> </ContentPage>

直接跑會(huì)提示找不到NamedColor定義，官網(wǎng)代碼demo也是缺的，這玩意在代碼示例的“XamlSamples”工程里有個(gè)NamedColor.cs的文件，里面定義的NamedColor。為了方便我這里也直接附上代碼，記得吧名稱空間改成你自己的

using System; using System.Collections.Generic; using System.Reflection; using System.Text; using Xamarin.Forms;namespace XamlSamples {public class NamedColor{// Instance members.private NamedColor(){}public string Name { private set; get; }public string FriendlyName { private set; get; }public Color Color { private set; get; }// Static members.static NamedColor(){List<NamedColor> all = new List<NamedColor>();StringBuilder stringBuilder = new StringBuilder();// Loop through the public static fields of the Color structure.foreach (FieldInfo fieldInfo in typeof (Color).GetRuntimeFields ()){if (fieldInfo.IsPublic && fieldInfo.IsStatic &&fieldInfo.FieldType == typeof (Color)){// Convert the name to a friendly name.string name = fieldInfo.Name;stringBuilder.Clear();int index = 0;foreach (char ch in name){if (index != 0 && Char.IsUpper(ch)){stringBuilder.Append(' ');}stringBuilder.Append(ch);index++;}// Instantiate a NamedColor object.NamedColor namedColor = new NamedColor{Name = name,FriendlyName = stringBuilder.ToString(),Color = (Color)fieldInfo.GetValue(null)};// Add it to the collection.all.Add(namedColor);}}all.TrimExcess();All = all;}public static IEnumerable<NamedColor> All { private set; get; }} }

總結(jié)

以上是生活随笔為你收集整理的Xamarin 跨平台应用开发（4）—— 页面布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。