Xamarin.Forms AbsoluteLayout

  • 项目

下载示例 下载示例

Xamarin.Forms AbsoluteLayout

AbsoluteLayout用于使用显式值定位子项并调整其大小。 位置由子元素的左上角相对于 的左上角 AbsoluteLayout指定，以与设备无关的单位表示。 AbsoluteLayout 还实现了按比例定位和调整大小的功能。 此外，与其他一些布局类不同， AbsoluteLayout 能够定位子级以便它们重叠。

AbsoluteLayout应将 视为一种特殊用途布局，仅在可以对子级施加大小时使用，或者元素的大小不会影响其他子元素的定位时使用。

AbsoluteLayout 类定义了以下属性：

  • LayoutBounds，类型 Rectangle为 ，它是一个附加属性，表示子级的位置和大小。 此属性的默认值为 (0，0，AutoSize，AutoSize) 。
  • LayoutFlags，类型 AbsoluteLayoutFlags为 ，它是一个附加属性，指示是否按比例解释用于定位子元素和大小的布局边界的属性。 此属性的默认值为 AbsoluteLayoutFlags.None。

这些属性由 BindableProperty 对象提供支持，这意味着这些属性可以是数据绑定的目标和样式。 有关附加属性的详细信息，请参阅 Xamarin.Forms 附加属性。

类 AbsoluteLayout 派生自 Layout<T> 类，该类定义 Children 类型的 IList<T>属性。 属性 Children 是 ContentProperty 类的 Layout<T> ，因此不需要从 XAML 显式设置。

提示

若要获得最佳布局性能，请遵循 优化布局性能中的准则。

子项的位置和大小

通过使用绝对值或比例值设置AbsoluteLayout.LayoutBounds每个子元素的附加属性，定义 中子元素的位置和大小AbsoluteLayout。 当位置应缩放时，对于子级的绝对值和比例值可以混合，但大小应保持固定，反之亦然。 有关绝对值的信息，请参阅 绝对定位和大小调整。 有关比例值的信息，请参阅 比例定位和大小调整。

AbsoluteLayout.LayoutBounds无论使用绝对值还是比例值，都可以使用两种格式设置附加属性：

  • x, y. 使用此格式时， x 和 y 值指示子级的左上角相对于其父级的位置。 孩子是不受约束的，大小本身。
  • x, y, width, height. 使用此格式时， x 和 y 值指示子项相对于其父项的左上角的位置，而 width 和 height 值指示子项的大小。

若要指定子级以水平或垂直方式调整自身大小，或者同时指定两者的大小，请将 width 和/或 height 值设置为 AbsoluteLayout.AutoSize 属性。 但是，过度使用此属性可能会损害应用程序性能，因为它会导致布局引擎执行其他布局计算。

重要

HorizontalOptions 和 VerticalOptions 属性对 AbsoluteLayout 的子级不起作用。

绝对定位和大小调整

默认情况下，使用 AbsoluteLayout 绝对值（以与设备无关的单位指定）对子元素进行位置和大小，这显式定义子元素在布局中的放置位置。 这是通过将子级添加到 Children 的 AbsoluteLayout 集合并将每个子级的附加属性设置为 AbsoluteLayout.LayoutBounds 绝对位置和/或大小值来实现的。

警告

使用绝对值定位和调整子级大小可能会有问题，因为不同的设备具有不同的屏幕大小和分辨率。 因此，一台设备上屏幕中心的坐标可能在其他设备上偏移。

以下 XAML 显示 AbsoluteLayout 使用绝对值定位其子级的 ：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AbsoluteLayoutDemos.Views.StylishHeaderDemoPage"
             Title="Stylish header demo">
    <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" />
    </AbsoluteLayout>
</ContentPage>

在此示例中，使用附加属性中指定的AbsoluteLayout.LayoutBounds前两个绝对值定义每个BoxView对象的位置。 每个 BoxView 的大小使用第三个和第四个值定义。 对象的位置 Label 是使用附加属性中指定的 AbsoluteLayout.LayoutBounds 两个绝对值定义的。 大小值未为 Label指定，因此它不受约束，并且会调整大小本身。 在所有情况下，绝对值都表示与设备无关的单位。

以下屏幕截图显示了生成的布局：

使用绝对值放置在 AbsoluteLayout 中的子项

等效 C# 代码如下所示：

public class StylishHeaderDemoPageCS : ContentPage
{
    public StylishHeaderDemoPageCS()
    {
        AbsoluteLayout absoluteLayout = new AbsoluteLayout
        {
            Margin = new Thickness(20)
        };

        absoluteLayout.Children.Add(new BoxView
        {
            Color = Color.Silver,
        }, new Rectangle(0, 10, 200, 5));
        absoluteLayout.Children.Add(new BoxView
        {
            Color = Color.Silver
        }, new Rectangle(0, 20, 200, 5));
        absoluteLayout.Children.Add(new BoxView
        {
            Color = Color.Silver
        }, new Rectangle(10, 0, 5, 65));
        absoluteLayout.Children.Add(new BoxView
        {
            Color = Color.Silver
        }, new Rectangle(20, 0, 5, 65));

        absoluteLayout.Children.Add(new Label
        {
            Text = "Stylish Header",
            FontSize = 24
        }, new Point(30,25));                    

        Title = "Stylish header demo";
        Content = absoluteLayout;
    }
}

在此示例中，每个 BoxView 的位置和大小是使用 Rectangle 对象定义的。 Label的位置是使用 Point 对象定义的。

在 C# 中，还可以在将 的子级 AbsoluteLayout 添加到 Children 集合后，使用 AbsoluteLayout.SetLayoutBounds 方法设置 其位置和大小。 此方法的第一个参数是 子参数，第二个 Rectangle 参数是 对象。

注意

AbsoluteLayout使用绝对值的 可以定位子元素并调整其大小，使其不适应布局的边界。

比例定位和大小调整

可以使用 AbsoluteLayout 比例值定位子项并调整其大小。 为此，可将子级添加到 Children 的 AbsoluteLayout集合中，并将每个子元素的 AbsoluteLayout.LayoutBounds 附加属性设置为 0-1 范围内的比例位置和/或大小值。 位置和大小值是成比例的，方法是在每个子级上设置 AbsoluteLayout.LayoutFlags 附加属性。

类型 AbsoluteLayout.LayoutFlags 为 的 AbsoluteLayoutFlags附加属性允许您设置一个标志，该标志指示子元素的布局边界位置和大小值与 的大小 AbsoluteLayout成正比。 布局子级时， AbsoluteLayout 适当地将位置和大小值缩放为任何设备大小。

AbsoluteLayoutFlags 枚举定义下列成员：

  • None，指示值将被解释为绝对值。 这是附加属性 AbsoluteLayout.LayoutFlags 的默认值。
  • XProportional，指示 x 值将被解释为成比例值，同时将所有其他值视为绝对值。
  • YProportional，指示 y 值将被解释为成比例值，同时将所有其他值视为绝对值。
  • WidthProportional，指示 width 值将被解释为成比例值，同时将所有其他值视为绝对值。
  • HeightProportional，指示 height 值将被解释为成比例值，同时将所有其他值视为绝对值。
  • PositionProportional，指示 x 和 y 值将解释为成比例，而大小值解释为绝对值。
  • SizeProportional，指示 width 和 height 值将解释为成比例，而位置值解释为绝对值。
  • All，指示所有值都将解释为成比例值。

提示

枚举 AbsoluteLayoutFlags 是一个 Flags 枚举，这意味着可以组合枚举成员。 这是使用逗号分隔列表在 XAML 中完成的，在 C# 中使用按位 OR 运算符完成的。

例如，如果使用 SizeProportional 标志并将子元素的宽度设置为 0.25，将高度设置为 0.1，则子项将是 宽度的四分之一和高度的 AbsoluteLayout 十分之一。 标志 PositionProportional 类似。 (0，0) 的位置将子项置于左上角，而 (1，1) 的位置将子项置于右下角， (0.5，0.5) 将子子 AbsoluteLayout置于 中。

以下 XAML 显示了 AbsoluteLayout 使用比例值定位其子级的 ：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AbsoluteLayoutDemos.Views.ProportionalDemoPage"
             Title="Proportional demo">
    <AbsoluteLayout>
        <BoxView Color="Blue"
                 AbsoluteLayout.LayoutBounds="0.5,0,100,25"
                 AbsoluteLayout.LayoutFlags="PositionProportional" />
        <BoxView Color="Green"
                 AbsoluteLayout.LayoutBounds="0,0.5,25,100"
                 AbsoluteLayout.LayoutFlags="PositionProportional" />
        <BoxView Color="Red"
                 AbsoluteLayout.LayoutBounds="1,0.5,25,100"
                 AbsoluteLayout.LayoutFlags="PositionProportional" />
        <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.LayoutFlagsPositionProportional来实现的。 附加属性中指定的 AbsoluteLayout.LayoutBounds 前两个值为每个子级使用比例值定义位置。 每个子级的大小使用与设备无关的单位使用第三个和第四个绝对值定义。

以下屏幕截图显示了生成的布局：

使用比例位置值放置在 AbsoluteLayout 中的子级

等效 C# 代码如下所示：

public class ProportionalDemoPageCS : ContentPage
{
    public ProportionalDemoPageCS()
    {
        BoxView blue = new BoxView { Color = Color.Blue };
        AbsoluteLayout.SetLayoutBounds(blue, new Rectangle(0.5, 0, 100, 25));
        AbsoluteLayout.SetLayoutFlags(blue, AbsoluteLayoutFlags.PositionProportional);

        BoxView green = new BoxView { Color = Color.Green };
        AbsoluteLayout.SetLayoutBounds(green, new Rectangle(0, 0.5, 25, 100));
        AbsoluteLayout.SetLayoutFlags(green, AbsoluteLayoutFlags.PositionProportional);

        BoxView red = new BoxView { Color = Color.Red };
        AbsoluteLayout.SetLayoutBounds(red, new Rectangle(1, 0.5, 25, 100));
        AbsoluteLayout.SetLayoutFlags(red, AbsoluteLayoutFlags.PositionProportional);

        BoxView black = new BoxView { Color = Color.Black };
        AbsoluteLayout.SetLayoutBounds(black, new Rectangle(0.5, 1, 100, 25));
        AbsoluteLayout.SetLayoutFlags(black, AbsoluteLayoutFlags.PositionProportional);

        Label label = new Label { Text = "Centered text" };
        AbsoluteLayout.SetLayoutBounds(label, new Rectangle(0.5, 0.5, 110, 25));
        AbsoluteLayout.SetLayoutFlags(label, AbsoluteLayoutFlags.PositionProportional);

        Title = "Proportional demo";
        Content = new AbsoluteLayout
        {
            Children = { blue, green, red, black, label }
        };
    }
}

在此示例中，使用 方法设置 AbsoluteLayout.SetLayoutBounds 每个子元素的位置和大小。 方法的第一个参数是子参数，第二个 Rectangle 参数是 对象。 每个子项的位置使用比例值设置，而每个子项的大小使用与设备无关的单位使用绝对值设置。

注意

AbsoluteLayout使用比例值的 可以使用 0-1 范围之外的值来定位子元素并调整其大小，使其不适合布局的边界。