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
