Xamarin Forms - AbsoluteLayout - 如何工作答案

【问题标题】：Xamarin Forms - AbsoluteLayout - How does works positionsXamarin Forms - AbsoluteLayout - 如何工作
【发布时间】：2020-11-11 22:42:46
【问题描述】：

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

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

它将被放置在屏幕的顶部/右侧。然而，它不会在外面占据一席之地。那么这意味着什么？如果每个元素出去，它们会重新定位到屏幕中吗？

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

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

你可以说“测试一下，你会看到。”但是，对设计师和我来说，定位每个元素是浪费时间，因为我们不确定它是如何工作的。所以我们只是尝试调试..

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

提前致谢！

【问题讨论】：

标签： xamarin.forms absolutelayout

【解决方案1】：

使用AbsoluteLayoutFlag.All，Rectangle边界参数含义如下：

x 表示控件左侧应占剩余空间的百分比（即父宽度 - 控件宽度）
y 表示控件顶部的剩余空间百分比（即父高度 - 控件高度）
width 是控件的宽度，以父宽度的百分比表示
height 是控件的高度，以父高度的百分比表示

宽度和高度是人们通常期望的。但是，x 和 y 并不像人们更习惯的那样“左”和“上”。所以你可以写一个转换器把左边的百分比转换成x，把上面的百分比转换成y：

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

【讨论】：

抱歉，我不确定您所说的控制宽度是什么意思。谁能帮我理解一下？
如果宽度或高度为1怎么办？

【解决方案2】：

<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 时，我创建了这个示例并

测试一下就知道了

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

已编辑：

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

【讨论】：

现在试试<BoxView Color="White" AbsoluteLayout.LayoutBounds="0.5, 0.5, 0.5, 0.5" AbsoluteLayout.LayoutFlags="All" /> 好像不是左上角而是中心..这就是我们如此迷茫的原因..也感谢您的回答:)
@Emixam23 是的，对，AbsoluteLayout.LayoutBounds="0.5, 0.5 是Width 和Height 的四分之一位置，因为全屏是2.0 而中心是1.0。
好的，谢谢！ :) 我会和我的设计师一起尝试 ;) 但最后一个问题（我不想无聊），<BoxView Color="Olive" AbsoluteLayout.LayoutBounds="1,.5, 25, 100" AbsoluteLayout.LayoutFlags="PositionProportional" /> 它没有对齐吗？如果我理解你的回答？
AbsoluteLayout.LayoutBounds="1,.5 - 1 是Width 的中心，.5 是Height 的四分之一，所以BoxView 的左上角将在@987654350 的中心@ 的AbsoluteLayout 和Height 的季度。它的比例值，2 是 100% 1 是 50% .5 是 25%
是的，你是对的，X, Y - View 的中心坐标，我“玩”了橄榄色矩形并弄清楚了。谢谢，你帮助了我）我编辑了我的答案。

【解决方案3】：

我做了一些测试，发现对于 AbsoluteLayoutFlag.All，本质上以百分比形式给出的 X 值基本上代表了锚点在矩形上的位置。就像如果 X = 10% 那么锚点距离 Rectangle 的左侧 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

X1 = Ax - (Ax)(Wx)

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

0.5

X1 = Ax - (Ax)(Wx)

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

【讨论】：

【解决方案4】：

X && Y 是元素的中心

【讨论】：

【解决方案5】：

作为一个迟到的答案，我已经放置了一个带有 AbsoluteLayout 分支的 nuget 包，但可以按预期工作。

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

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

【讨论】：

【解决方案6】：

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

width 和 height 只是将子元素的相应尺寸表示为AbsoluteLayout 整体尺寸的比例。例如，宽度 0.1 会创建一个占布局宽度 10% 的子级，0.9 会覆盖 90%，而 1.0 会从左到右填充父级。
x 和 y 表示父级中的位置，相对于可能的极端移动，子级在布局中仍然完全可见。因此：x 值为 0.0 会将子元素的左边缘放在布局容器的左边缘，而值 1.0 会将子元素的右边缘与容器的右边缘对齐。 0 到 1 之间的值表示这些极端之间的位置，当孩子完全保持在布局内时，按比例在其可用的移动范围内移动孩子。

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

不用说，无论 width 或 height 值。

【讨论】：