Xamarin.Forms/UI：如何在两个布局之间垂直对齐项目

Question

我开发的 Xamarin.Forms 应用程序使用：

a header 包含背景颜色和一些项目（头像、文本）
包含背景图像和一些按钮的页脚
在 2 个 header 之间，我想显示另一个按钮，它在 2 个容器之间很好地对齐

预期的结果类似于这个原型：

我能够大致实现这一目标，但并不完美：这在 iPhone 6 上运行良好，但在 iPhone X 上运行不佳。

XAML 代码如下所示：

<RelativeLayout>

    <Image Source="background.png" 
           Opacity="0.25" Aspect="AspectFill"                  
           RelativeLayout.WidthConstraint=
               "{ConstraintExpression Type=RelativeToParent, Property=Width}"
            RelativeLayout.HeightConstraint=
               "{ConstraintExpression Type=RelativeToParent, Property=Height}"/>

    <Grid x:Name="Header"
          BackgroundColor="{StaticResource BlueColor}"
          RelativeLayout.WidthConstraint=
              "{ConstraintExpression Type=RelativeToParent, Property=Width}"
            RelativeLayout.HeightConstraint=
              "{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.55, Constant=0}">

        <StackLayout ... />
    </Grid>

    <Grid RelativeLayout.YConstraint=
              "{ConstraintExpression Type=RelativeToView, ElementName=Header, Property=Height, Factor=0.90}"
          RelativeLayout.WidthConstraint=
              "{ConstraintExpression Type=RelativeToParent, Property=Width}"
          RelativeLayout.HeightConstraint=
              "{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.45, Constant=0}}">


        <StackLayout Spacing="5" Padding="25,10,25,10"
                     VerticalOptions="StartAndExpand"
                     RelativeLayout.WidthConstraint=
                        "{ConstraintExpression Type=RelativeToParent, Property=Width}"
                     RelativeLayout.HeightConstraint=
                        "{ConstraintExpression Type=RelativeToParent, Property=Height}">

            <Button Style="{DynamicResource CustomButton}" 
                    BackgroundColor="{StaticResource OrangeColor}" 
                    VerticalOptions="End" HorizontalOptions="FillAndExpand" 
                    Margin="30,0,30,0"/>

            //...
        </StackLayout>
    </Grid>
</RelativeLayout>

主容器是RelativeLayout。我将 Image 设置为背景此布局的图像。然后我有一个 StackLayout 作为 Header 包含头像和用户的详细信息，第二个 StackLayout 包含按钮。

这是个好方法吗？或者有没有更好的方法将橙色按钮放在两个布局之间？

Answer 1

至于 Xamarin.Forms 的布局提示，这里有一些不错的提示 -> Jason Smith's Xamarin Forms Performance Tips。

如果不查看所有代码，很难完全理解您的布局要求，但您可以简单地使用具有 2 行的 Grid 作为 root/outer 容器。顶部内容在第一行，底部内容在第二行，中间的按钮跨越两行并垂直居中：

<Grid RowSpacing="0">

    <Grid.RowDefinitions>
        <RowDefinition /> <!-- can adjust height based on needs -->
        <RowDefinition /> <!-- can adjust height based on needs -->
    </Grid.RowDefinitions>

    <!-- background image -->
    <Image x:Name="backgroundImage" Grid.RowSpan="2" 
           BackgroundColor="#EFEFEF" />

    <Grid x:Name="topContent" Grid.Row="0" 
          BackgroundColor="#20d1e0">
        <!-- top content here -->
    </Grid>

    <!-- middle button -->
    <Button x:Name="orangeButton" Grid.RowSpan="2" 
            BackgroundColor="#fda601" 
            HorizontalOptions="Center"
            Text="History"
            TextColor="White"
            VerticalOptions="Center" />

    <Grid x:Name="bottomContent" Grid.Row="1">
        <!-- bottom content here -->
    </Grid>

</Grid>

不均匀行的更新

<Grid RowSpacing="0">

    <Grid.RowDefinitions>
        <RowDefinition Height="0.6*" /> <!-- can adjust height based on needs -->
        <RowDefinition Height="30" /> <!-- half the size of the orange button -->
        <RowDefinition Height="30" /> <!-- half the size of the orange button -->
        <RowDefinition Height="0.4*" /> <!-- can adjust height based on needs -->
    </Grid.RowDefinitions>

    <!-- background image -->
    <Image x:Name="backgroundImage" Grid.RowSpan="4" 
           BackgroundColor="#EFEFEF" />

    <Grid x:Name="topContent" Grid.Row="0" Grid.RowSpan="2"
          BackgroundColor="#20d1e0">
        <!-- top content here -->
    </Grid>

    <!-- middle button -->
    <Button x:Name="orangeButton" Grid.Row="1" Grid.RowSpan="2" 
            BackgroundColor="#fda601" 
            HorizontalOptions="Center"
            Text="History"
            TextColor="White"
            VerticalOptions="Center" />

    <Grid x:Name="bottomContent" Grid.Row="2" Grid.RowSpan="2">
        <!-- bottom content here -->
    </Grid>

</Grid>

Xamarin.Forms/UI：如何在两个布局之间垂直对齐项目

Xamarin.Forms/UI: how align vertically an in item just between 2 layouts

layout

user-interface

vertical-alignment

xamarin

xamarin.forms