Paste_Image.png

1. 介紹:

1.1 AbsoluteLayout.LayoutFlags，它有這些枚舉值

• None：默認(rèn)值，所有值均是絕對(duì)值
• All：所有值均是等比例
• WidthProportional：寬度是等比例的，其他值是絕對(duì)值
• HeightProportional：高度是等比例的，其他值是絕對(duì)值
• XProportional：X值是等比例的，其他值是絕對(duì)值
• YProportional：Y值是等比例的，其他值是絕對(duì)值
• PositionProportional：X、Y值是等比例的，其他值是絕對(duì)值
• SizeProportional：高度、寬度是等比例的，其他值是絕對(duì)值
• 這樣一來(lái)理解的應(yīng)該差不多了。

1.2 AbsoluteLayout.LayoutBounds的理解

• AbsoluteLayout.LayoutBounds就是坐標(biāo)系分別為（ x, y, width, height )

• 看兩種使用:

  • 絕對(duì)位置,不用等比例,布局的位置是x = 100,y = 100,width = 100,height = 100;

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

• 用了等比例,易錯(cuò)點(diǎn)是看到x位置是0.33,錯(cuò)誤理解為x值是上一層視圖寬度的0.33倍
• 正確的理解方式是 :
• 自己的X = (父視圖寬度 - 自己寬度) * X比例;
• 自己的Y = 父視圖高度 * Y比例
• 自己的寬度是: width = 父視圖寬度 * 寬度比例;
• 自己的高度是: height = 父視圖高度 * 高度比例;
• 舉個(gè)例子: 如果父視圖的布局是(0,0,100,100),那么這個(gè)布局的結(jié)果就是:(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官方介紹鏈接