在RelativeLayout中将视图对齐到底部和顶部，XamarinForms。

Question

我想在Xamarin.Forms中的RelativeLayout中将一张图片对齐到顶部，另一张图片对齐到底部。该怎么做？

<RelativeLayout>
            <Image 
                Aspect="Fill"
                Source = "header_login.png"></Image>
            <Image 
                Aspect="Fill"
                Source = "login_footer_2.png"
                RelativeLayout.XConstraint=
                 "{ConstraintExpression Type=RelativeToParent,
                                        Property=Width,
                                        Factor=0}"
                RelativeLayout.YConstraint=
                 "{ConstraintExpression Type=RelativeToParent,
                                        Property=Height,
                                        Factor=1}" ></Image>
</RelativeLayout>

- bulubuloa

Answer 1

我发现了一些对你可能有用的内容。即使没有使用RelativeLayout，你仍然可以通过使用StackLayout来实现你想要的东西。

这个想法是：

<StackLayout>
  <StackLayout  VerticalOptions="Start">
  <Image/> <!--top image-->
  </StackLayout>

  <StackLayout VerticalOptions="CenterAndExpand">
    <!-- middle controls -->
  </StackLayout>

  <StackLayout Orientation="Horizontal" VerticalOptions="End">
    <Image/> <!--bottom image-->
  </StackLayout>
</StackLayout>

通过扩展中间的StackLayout，占用所有剩余的空间，将其他的StackLayout分别推到顶部和底部。对于我来说，保持底部不变非常有用。https://dev59.com/y14c5IYBdhLWcg3wn7ij#30143144

- Cbot

---

非常好的答案，对我很有用。不过我必须在包含的StackLayout中添加VerticalOptions="FillAndExpand"才能使其正常工作。同时，请确保您拥有与答案中提到的中间控件StackLayout相对应的视图，并且该视图可以展开，否则它可能无法正常工作。 - Jonathan

Answer 2

相对布局提供了一种非常简单的方法来实现此目的。

您应该使用约束类型“相对于父级”，并使用系数来定位元素。

相对布局在使用系数定位时可以包含控件大小。这意味着，如果您将系数设置为0，则图像顶部将位于容器顶部。

如果将系数设置为1，则图像的底部将位于容器底部。

同样，系数0.5会使图像的中心在容器的中心位置居中。

因此，默认情况下，相对布局会在计算系数位置时处理控件尺寸。

您可以在官方文档中找到有关相对容器的更多信息和示例。示例项目中还包括代码示例，可帮助您了解更多。

- irreal

---

<RelativeLayout> <Image Aspect="Fill" Source = "header_login.png"></Image> <Image Aspect="Fill" Source = "login_footer_2.png" RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0}" RelativeLayout.YConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}" ></Image> </RelativeLayout> - bulubuloa

抱歉，absolutelayout控件可以考虑控件大小，但是relativelayout似乎不行。当您说“它不起作用”时，您并没有非常具体地说明。我已经尝试过了，并发现定位的工作方式与描述的完全相同，只是它总是将视图的左上角放在指定的位置。您可以手动从位置中删除控件的宽度/高度。要做到这一点，您需要从代码后台文件中定位控件，或者创建一个标记扩展，该扩展将测量控件并返回值。 - irreal