AbsoluteLayout -如何工作的位置

Question

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

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

它将放置在屏幕的顶部/右边。不过，它不会在外面占一个位置。那这意味着什么呢？如果每个元素都被放置到屏幕上，那么它们会被放置在屏幕上吗？

​

​

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

​

​

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

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

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

提前感谢！

Answer 1

对于AbsoluteLayoutFlag.All，矩形边界参数的含义如下：

• X是指应位于控件左侧的剩余空间(即父级宽度-控件宽度)的百分比。
• Y是指应位于控件顶部的剩余空间(即父空间高度-控制高度)的百分比。
• 宽度是控件的宽度(以父宽度的百分比表示)。
• 高度是控件的高度(以父高度的百分比表示)。

宽度和高度是人们通常所期望的。然而，x和y并不是因为人们更习惯于“左”和“顶”。因此，您可以编写一个转换器，将左百分比转换为x，将顶百分比转换为y：

X=左/ (1 -宽度)

Y=顶部/ (1 -高度)

Answer 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。

Answer 3

我做了一些测试，发现在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值(锚位)

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

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

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

Ax = 0:

X1 =0& X2 = Wx

Ax = 1:

X2 =1& X1 =(1-WX)

Ax = 0.5

X1 = Ax - (0.5)(Wx)

X2 = Ax + (0.5)(Wx)

0 < Ax < 0.5

X1 = Ax - (Ax)(Wx)

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

0.5 < Ax < 1

X1 = Ax - (Ax)(Wx)

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