Xamarin Forms - AbsoluteLayout - 如何工作位置

Question

我正在使用 Xamarin.Forms 和 AbsoluteLayout，但是，我不确定如何处理元素的定位。

我正在使用比例值，所以如果我在 AbsoluteLayout.LayoutBounds="1, 0.05, 0.15, 0.1" 处放置一个元素，其中每个值都是比例值（因此标志是 "all" AbsoluteLayout.LayoutFlags="All"）

它将被放置在屏幕的 top/right 处。然而，它不会在外面占据一席之地。那是什么意思呢？如果每个元素都在外面，它们会重新定位到屏幕中吗？

但是现在，另一个问题来了，当你放置一个元素时，X/Y的位置是基于什么？是中心点还是其他点？

在这个例子中，我尝试使用 0.15，但渲染有点奇怪，所以我输入 0，然后渲染与我想要的匹配。

你可以说"Test it and you'll see."，然而，对设计师和我来说，定位每个元素都是浪费时间，因为我们不确定它是如何工作的。所以我们只是尝试调试..

我们也在寻找是否存在可以生成有关设计师设计的位置的软件。我们指的是元素的位置 X/Y，以百分比表示。

提前致谢！

Answer 1

<AbsoluteLayout BackgroundColor="Yellow">
<BoxView
    Color="Red"
    AbsoluteLayout.LayoutBounds="1.0, 1.0, 0.5, 0.5"
    AbsoluteLayout.LayoutFlags="All" />

<BoxView
    Color="Green"
    WidthRequest="50"
    HeightRequest="50"
    AbsoluteLayout.LayoutBounds="0.1, 0.1, AutoSize, AutoSize"
    AbsoluteLayout.LayoutFlags="PositionProportional" />

<BoxView
    Color="Blue"
    AbsoluteLayout.LayoutBounds="0.25, 0.25, 0.5, 0.5"
    AbsoluteLayout.LayoutFlags="All" />
</AbsoluteLayout>

当我研究 AbsoluteLayout 我创建了这个示例并且

Test it and you'll see

我根据调查得出的结论： X和Y是View左上角的坐标。是相对位置。如您所见，红色矩形 1.0, 1.0 是中心位置，因此，据我了解，屏幕的 100% 宽度是 2.0（高度相同）。 AbsoluteLayout 内的所有视图都根据父 AbsoluteLayout.

的值定位

已编辑：

X和Y是View的中心坐标，不是左上角。 Width 的 100% 是 1.0.

Answer 2

X && Y 是元素的中心

Answer 3

对于AbsoluteLayoutFlag.All，Rectangle bounds 参数的含义如下：

x表示剩余space（即父宽度-控件宽度）应该在控件左侧的百分比
y表示剩余space（即父高度-控件高度）应该在控件顶部的百分比
width 是控件的宽度占父级宽度的百分比
height 是控件的高度占父级高度的百分比

宽度和高度是人们通常期望的。然而，x 和 y 并不像人们更习惯的 "left" 和 "top"。所以你可以写一个转换器将左边的百分比转换成x，顶部的百分比转换成y：

x = 左 / (1 - 宽度)
y = 顶部 / (1 - 高度)

Answer 4

我做了一些测试，发现使用 AbsoluteLayoutFlag.All，基本上以百分比形式给出的 X 值基本上表示锚点在矩形上的位置。如果 X = 10%，则锚点距矩形左侧 10%：

例子

X = 0.1，给定宽度为 20%。 90% 的长度将向右移动，10% 的长度将向左移动。

X = 0.5，给定宽度为 20%。 10% 会向左，10% 会向右。

X 边界的公式

矩形变量（Ax、Ay、Wx、Wy）：

W - 要求的宽度

Ax - X 值。 (定位位置)

X1 - 左上角相对于左侧的X位置值(X = 0)

X2 - 右上角相对于左侧的x位置值(X = 0)

公式有 5 种可能的锚值方案

轴=0:

X1 = 0 & X2 = Wx

轴=1:

X2 = 1 & X1 = (1 - Wx)

轴=0.5

X1 = Ax - (0.5)(Wx)

X2 = Ax + (0.5)(Wx)

0 < 轴 < 0.5

X1 = Ax - (Ax)(Wx)

X2 = Ax + (1 - Ax)(Wx)

0.5 < 轴 < 1

X1 = Ax - (Ax)(Wx)

X2 = Ax + (1-Ax)(Wx)

Answer 5

作为一个迟到的答案，我放了一个带有 AbsoluteLayout 分支的 nuget 包，但按我预期的方式工作。

安装 nuget 包 SmartMachines.AbsoluteLayout，添加命名空间 xmlns:sm="clr-namespace:SmartMachines;assembly=AbsoluteLayout"，您将拥有与原生 Xamarin 完全相同的 AbsoluteLayout，但具有预期的比例对齐行为。

希望这能为其他人节省几个小时的谷歌搜索和调试时间。

Answer 6

对于AbsoluteLayout.LayoutFlags="All"，LayoutBounds（x,y,width,height）应该解释如下：

width 和 height 只是表示 child 各自的尺寸占 AbsoluteLayout 的比例的整体尺寸。例如，宽度为 0.1 将创建布局宽度的 child 10%，0.9 将覆盖 90%，1.0 将从左到右填充 parent。
x 和 y 表示 parent 内的位置，相对于 [= 可能的极端运动47=] 在布局中仍然完全可见。因此：x 值为 0.0 时 child 的左边缘与布局容器的左边缘对齐，x 值为 1.0 时 child 的右边缘与容器的右边缘对齐。 0 和 1 之间的值表示这些极端之间的位置，当 child 完全保持在布局内时，child 按比例移动通过它可用的移动范围。

考虑 x / y 定位的一个好方法是将其与 window 滚动条或一个值滑块控件，因为整个滚动条始终可见，它可以被认为是在值 0（文档在顶部）和 1（文档在底部）之间滑动。

不用说，通过将 x 或 y 设置为 0.5 来使 child 居中，而不管宽度或高度值。

Xamarin Forms - AbsoluteLayout - 如何工作位置

Xamarin Forms - AbsoluteLayout - How does works positions

absolutelayout

xamarin.forms