第十四章：绝对布局（五）

3650阅读　0评论2018-09-01　renxiao2003
分类：Android平台

AbsoluteLayout和XAML

如您所见，您可以使用Children集合中可用的Add方法之一或通过静态方法调用设置附加属性，在代码中定位和确定AbsoluteLayout的子项的大小。
但是，你如何在XAML中设置AbsoluteLayout子项的位置和大小？
涉及一种非常特殊的语法。 这个语法由早期Abso？luteDemo程序的XAML版本说明，名为AbsoluteXamlDemo：

点击(此处)折叠或打开

  1. <ContentPage xmlns=""
  2.              xmlns:x=""
  3.              x:Class="AbsoluteXamlDemo.AbsoluteXamlDemoPage">
  4.     <AbsoluteLayout Padding="50">
  5.         <BoxView Color="Accent"
  6.                  AbsoluteLayout.LayoutBounds="0, 10, 200, 5" />
  7.         <BoxView Color="Accent"
  8.                  AbsoluteLayout.LayoutBounds="0, 20, 200, 5" />
  9.         <BoxView Color="Accent"
  10.                  AbsoluteLayout.LayoutBounds="10, 0, 5, 65" />
  11.         <BoxView Color="Accent"
  12.                  AbsoluteLayout.LayoutBounds="20, 0, 5, 65" />
  13.         <Label Text="Stylish Header"
  14.                FontSize="24"
  15.                AbsoluteLayout.LayoutBounds="30, 25, AutoSize, AutoSize" />
  16.         <Label AbsoluteLayout.LayoutBounds="0, 80, AutoSize, AutoSize">
  17.             <Label.FormattedText>
  18.                 <FormattedString>
  19.                     <Span Text="Although " />
  20.                     <Span Text="AbsoluteLayout"
  21.                           FontAttributes="Italic" />
  22.                     <Span Text=
  23. " is usually employed for purposes other
  24. than the display of text using " />
  25.                     <Span Text="Label"
  26.                           FontAttributes="Italic" />
  27.                     <Span Text=
  28. ", obviously it can be used in that way.
  29. The text continues to wrap nicely
  30. within the bounds of the container
  31. and any padding that might be applied." />
  32.                 </FormattedString>
  33.             </Label.FormattedText>
  34.         </Label>
  35.     </AbsoluteLayout>
  36. </ContentPage>
代码隐藏文件仅包含InitializeComponent调用。
这是第一个BoxView：

点击(此处)折叠或打开

  1. <BoxView Color="Accent"
  2.          AbsoluteLayout.LayoutBounds="0, 10, 200, 5" />
在XAML中，附加的可绑定属性表示为由类名（Ab？soluteLayout）和以句点分隔的属性名（LayoutBounds）组成的属性。 每当您看到这样的属性时，它始终是一个附加的可绑定属性。 这是该属性语法的唯一应用。
总之，类名和属性名的组合仅在三个特定上下文中出现在XAML中：如果它们显示为元素，则它们是属性元素。 如果它们显示为属性，则它们是附加的可绑定属性。 并且类名和属性名的唯一其他上下文是对x：Static标记扩展的定义。
AbsoluteLayout.LayoutBounds属性通常设置为由逗号分隔的四个数字。 您还可以将AbsoluteLayout.LayoutBounds表示为属性元素：

点击(此处)折叠或打开

  1. <BoxView Color="Accent">
  2.     <AbsoluteLayout.LayoutBounds>
  3.         0, 10, 200, 5
  4.     </AbsoluteLayout.LayoutBounds>
  5. </BoxView>
这四个数字由BoundsTypeConverter而不是RectangleTypeConverter解析，因为BoundsTypeConverter允许对宽度和高度部分使用AutoSize。 您可以在AbsoluteXamlDemo XAML文件中看到AutoSize参数：

点击(此处)折叠或打开

  1. <Label Text="Stylish Header"
  2.        FontSize="24"
  3.        AbsoluteLayout.LayoutBounds="30, 25, AutoSize, AutoSize" />
  4. Or you can leave them out:
  5. <Label Text="Stylish Header"
  6.        FontSize="24"
  7.        AbsoluteLayout.LayoutBounds="30, 25" />
您在XAML中指定的附加可绑定属性的奇怪之处在于它们并不存在！ AbsoluteLayout中没有名为LayoutBounds的字段，属性或方法。有一个名为LayoutBoundsProperty的BindableProperty类型的公共静态只读字段，并且有名为SetLayoutBounds和GetLayoutBounds的公共静态方法，但没有任何名为LayoutBounds的方法。 XAML解析器将语法识别为引用附加的可绑定属性，然后在AbsoluteLayout类中查找LayoutBoundsProperty。从那里，它可以使用该BindableProperty对象和BoundsTypeConverter中的值在目标视图上调用SetValue。
Chessboard系列程序似乎不太可能在XAML中复制，因为该文件需要32个BoxView实例而没有循环的好处。但是，ChessboardXaml程序显示了如何以隐式样式指定BoxView的两个属性，包括AbsoluteLayout.LayoutFlags附加的可绑定属性：

点击(此处)折叠或打开

  1. <ContentPage xmlns=""
  2.              xmlns:x=""
  3.              x:Class="ChessboardXaml.ChessboardXamlPage">
  4.     <ContentPage.Padding>
  5.         <OnPlatform x:TypeArguments="Thickness"
  6.                     iOS="5, 25, 5, 5"
  7.                     Android="5"
  8.                     WinPhone="5" />
  9.     </ContentPage.Padding>
  10.     <ContentPage.Resources>
  11.         <ResourceDictionary>
  12.             <Style TargetType="BoxView">
  13.                 <Setter Property="Color" Value="#004000" />
  14.                 <Setter Property="AbsoluteLayout.LayoutFlags" Value="All" />
  15.             </Style>
  16.         </ResourceDictionary>
  17.     </ContentPage.Resources>
  18.     <ContentView SizeChanged="OnContentViewSizeChanged">
  19.         <AbsoluteLayout x:Name="absoluteLayout"
  20.                         BackgroundColor="#F0DC82"
  21.                         VerticalOptions="Center"
  22.                         HorizontalOptions="Center">
  23.             <BoxView AbsoluteLayout.LayoutBounds="0.00, 0.00, 0.125, 0.125" />
  24.             <BoxView AbsoluteLayout.LayoutBounds="0.29, 0.00, 0.125, 0.125" />
  25.             <BoxView AbsoluteLayout.LayoutBounds="0.57, 0.00, 0.125, 0.125" />
  26.             <BoxView AbsoluteLayout.LayoutBounds="0.86, 0.00, 0.125, 0.125" />
  27.             <BoxView AbsoluteLayout.LayoutBounds="0.14, 0.14, 0.125, 0.125" />
  28.             <BoxView AbsoluteLayout.LayoutBounds="0.43, 0.14, 0.125, 0.125" />
  29.             <BoxView AbsoluteLayout.LayoutBounds="0.71, 0.14, 0.125, 0.125" />
  30.             <BoxView AbsoluteLayout.LayoutBounds="1.00, 0.14, 0.125, 0.125" />
  31.             <BoxView AbsoluteLayout.LayoutBounds="0.00, 0.29, 0.125, 0.125" />
  32.             <BoxView AbsoluteLayout.LayoutBounds="0.29, 0.29, 0.125, 0.125" />
  33.             <BoxView AbsoluteLayout.LayoutBounds="0.57, 0.29, 0.125, 0.125" />
  34.             <BoxView AbsoluteLayout.LayoutBounds="0.86, 0.29, 0.125, 0.125" />
  35.             <BoxView AbsoluteLayout.LayoutBounds="0.14, 0.43, 0.125, 0.125" />
  36.             <BoxView AbsoluteLayout.LayoutBounds="0.43, 0.43, 0.125, 0.125" />
  37.             <BoxView AbsoluteLayout.LayoutBounds="0.71, 0.43, 0.125, 0.125" />
  38.             <BoxView AbsoluteLayout.LayoutBounds="1.00, 0.43, 0.125, 0.125" />
  39.             <BoxView AbsoluteLayout.LayoutBounds="0.00, 0.57, 0.125, 0.125" />
  40.             <BoxView AbsoluteLayout.LayoutBounds="0.29, 0.57, 0.125, 0.125" />
  41.             <BoxView AbsoluteLayout.LayoutBounds="0.57, 0.57, 0.125, 0.125" />
  42.             <BoxView AbsoluteLayout.LayoutBounds="0.86, 0.57, 0.125, 0.125" />
  43.             <BoxView AbsoluteLayout.LayoutBounds="0.14, 0.71, 0.125, 0.125" />
  44.             <BoxView AbsoluteLayout.LayoutBounds="0.43, 0.71, 0.125, 0.125" />
  45.             <BoxView AbsoluteLayout.LayoutBounds="0.71, 0.71, 0.125, 0.125" />
  46.             <BoxView AbsoluteLayout.LayoutBounds="1.00, 0.71, 0.125, 0.125" />
  47.             <BoxView AbsoluteLayout.LayoutBounds="0.00, 0.86, 0.125, 0.125" />
  48.             <BoxView AbsoluteLayout.LayoutBounds="0.29, 0.86, 0.125, 0.125" />
  49.             <BoxView AbsoluteLayout.LayoutBounds="0.57, 0.86, 0.125, 0.125" />
  50.             <BoxView AbsoluteLayout.LayoutBounds="0.86, 0.86, 0.125, 0.125" />
  51.             <BoxView AbsoluteLayout.LayoutBounds="0.14, 1.00, 0.125, 0.125" />
  52.             <BoxView AbsoluteLayout.LayoutBounds="0.43, 1.00, 0.125, 0.125" />
  53.             <BoxView AbsoluteLayout.LayoutBounds="0.71, 1.00, 0.125, 0.125" />
  54.             <BoxView AbsoluteLayout.LayoutBounds="1.00, 1.00, 0.125, 0.125" />
  55.         </AbsoluteLayout>
  56.     </ContentView>
  57. </ContentPage>
是的，它是很多单独的BoxView元素，但你不能争论文件的清洁度。 代码隐藏文件只是调整宽高比：

点击(此处)折叠或打开

  1. public partial class ChessboardXamlPage : ContentPage
  2. {
  3.     public ChessboardXamlPage()
  4.     {
  5.         InitializeComponent();
  6.     }
  7.     void OnContentViewSizeChanged(object sender, EventArgs args)
  8.     {
  9.         ContentView contentView = (ContentView)sender;
  10.         double boardSize = Math.Min(contentView.Width, contentView.Height);
  11.         absoluteLayout.WidthRequest = boardSize;
  12.         absoluteLayout.HeightRequest = boardSize;
  13.     }
  14. }


上一篇：第十四章：绝对布局（四）
下一篇：第十四章：绝对布局（六）