在相对布局 Xamarin 表单中将视图与底部和顶部对齐答案

【问题标题】：Align View to bottom and top in RelativeLayout XamarinForms在相对布局 Xamarin 表单中将视图与底部和顶部对齐
【发布时间】：2015-10-04 10:44:50
【问题描述】：

我想在 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>

【问题讨论】：

标签： xamarin xamarin.forms alignment

【解决方案1】：

相对布局提供了一种非常简单的方法。

您应该使用“相对于父级”的约束类型并使用因子来定位元素。

相对布局可以包含元素定位时的控件大小。这意味着如果您将因子设为 0，则图像的顶部将位于容器的顶部。

如果将因子设为 1，则图像的底部将位于容器的底部。

同样，0.5 的系数将使图像的中心位于容器的中心

因此，默认情况下，相对布局在计算因子位置时会考虑您的控件尺寸。

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

【讨论】：

抱歉，absolutelayout 控件可以考虑控件大小，但relativelayout 似乎没有。当您说“它不起作用”时，您并不是很具体。我已经尝试过了，发现定位与描述的一样，除了它总是将视图的左上角放在您指定的位置上。您可以做的是从该位置手动删除控件的宽度/高度。为此，您要么需要从代码隐藏文件中定位控件，要么创建一个标记扩展来测量控件并返回值。

【解决方案2】：

我发现有些东西可能对你有用。就算不使用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>

通过扩展 Middle StackLayout 将剩余的空间分别推到顶部和底部。有一个固定的底部对我来说非常有用。 https://stackoverflow.com/a/30143144/3324840

【讨论】：

很好的答案，对我来说效果很好。我必须将VerticalOptions="FillAndExpand" 添加到包含StackLayout 才能让它工作。还要确保你有一个对应于expands答案中提到的中间控件StackLayout的视图，否则它可能不起作用。