美文网首页Xamarin手册
2.2 布局之AbsoluteLayout(绝对布局)

2.2 布局之AbsoluteLayout(绝对布局)

作者: shannoon | 来源:发表于2017-01-05 11:26 被阅读133次
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官方介绍链接

相关文章

网友评论

    本文标题:2.2 布局之AbsoluteLayout(绝对布局)

    本文链接:https://www.haomeiwen.com/subject/pqqzvttx.html