2.2 布局之AbsoluteLayout(绝对布局)

Paste_Image.png

1. 介绍:

1.1 AbsoluteLayout.LayoutFlags，它有这些枚举值

• None：默认值，所有值均是绝对值
• All：所有值均是等比例
• WidthProportional：宽度是等比例的，其他值是绝对值
• HeightProportional：高度是等比例的，其他值是绝对值
• XProportional：X值是等比例的，其他值是绝对值
• YProportional：Y值是等比例的，其他值是绝对值
• PositionProportional：X、Y值是等比例的，其他值是绝对值
• SizeProportional：高度、宽度是等比例的，其他值是绝对值
• 这样一来理解的应该差不多了。

1.2 AbsoluteLayout.LayoutBounds的理解

• AbsoluteLayout.LayoutBounds就是坐标系分别为（ x, y, width, height )

• 看两种使用:

  • 绝对位置,不用等比例,布局的位置是x = 100,y = 100,width = 100,height = 100;

AbsoluteLayout.LayoutBounds="100, 100, 100, 100"

• 用了等比例,易错点是看到x位置是0.33,错误理解为x值是上一层视图宽度的0.33倍
• 正确的理解方式是 :
• 自己的X = (父视图宽度 - 自己宽度) * X比例;
• 自己的Y = 父视图高度 * Y比例
• 自己的宽度是: width = 父视图宽度 * 宽度比例;
• 自己的高度是: height = 父视图高度 * 高度比例;
• 举个例子: 如果父视图的布局是(0,0,100,100),那么这个布局的结果就是:(25,0,25,25)

AbsoluteLayout.LayoutBounds="0.33, 0, 0.25, 0.25"
AbsoluteLayout.LayoutFlags="All"

2. XAML示例代码

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.AbsoluteDemoPage"
             Title="Absolute Demo Page">

  <AbsoluteLayout BackgroundColor="Red">
    <BoxView Color="Green"
             AbsoluteLayout.LayoutBounds="0.33, 0, 0.25, 0.25"
             AbsoluteLayout.LayoutFlags="All" />

    <BoxView Color="#8080FF"
             AbsoluteLayout.LayoutBounds="1, 0, 0.25, 0.25"
             AbsoluteLayout.LayoutFlags="All" />

    <BoxView Color="#8080FF"
             AbsoluteLayout.LayoutBounds="0, 0.33, 0.25, 0.25"
             AbsoluteLayout.LayoutFlags="All" />

    <BoxView Color="#8080FF"
             AbsoluteLayout.LayoutBounds="0.67, 0.33, 0.25, 0.25"
             AbsoluteLayout.LayoutFlags="All" />

    <BoxView Color="#8080FF"
             AbsoluteLayout.LayoutBounds="0.33, 0.67, 0.25, 0.25"
             AbsoluteLayout.LayoutFlags="All" />

    <BoxView Color="#8080FF"
             AbsoluteLayout.LayoutBounds="1, 0.67, 0.25, 0.25"
             AbsoluteLayout.LayoutFlags="All" />

    <BoxView Color="#8080FF"
             AbsoluteLayout.LayoutBounds="0, 1, 0.25, 0.25"
             AbsoluteLayout.LayoutFlags="All" />

    <BoxView Color="#8080FF"
             AbsoluteLayout.LayoutBounds="0.67, 1, 0.25, 0.25"
             AbsoluteLayout.LayoutFlags="All" />

  </AbsoluteLayout>
</ContentPage>  

3. 效果图

• 绿色部分的位置,就是我们上面所讲的等比例布局( AbsoluteLayout.LayoutBounds="0.33, 0, 0.25, 0.25"
  AbsoluteLayout.LayoutFlags="All"

)的效果

Paste_Image.png

4. AbsoluteLayout官方介绍链接