android - Xamarin.Forms-RelativeLayout 内的约束

Question

我使用 Visual Studio 中的 Xamarin.Forms 创建了一个包含图像、一些标签和输入的基本页面，用于跨平台应用程序。问题是，当应用程序在 iOS 和 Android 上加载时，似乎我的约束没有任何作用，并且每个元素都不成比例。

代码很简单，但我想更多地说明为什么我的约束不足以控制整个平台上页面上元素的大小/位置。这是预期的结果:

这是实际结果:

下面是应该限制这些元素的大小和位置的代码:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage Title="Smartie" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Smartie.Login" BackgroundImage="smartie_bg.png">
<ContentPage.Content>
        <RelativeLayout>
            <Image Source="smartie_logo.png" x:Name="smartieLogo" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.4}" Margin="50" />

            <RelativeLayout BackgroundColor="White" Margin="20" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=250}" HeightRequest="300" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}">
                <Label Text="SETUP" FontAttributes="Bold" FontSize="22" Margin="10" HorizontalTextAlignment="Left" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=0}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" />
                <Label Text="Access Code:" FontSize="20" HorizontalTextAlignment="Center" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=80}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" />
                <Entry Placeholder="Access Code" TextColor="Black" Margin="75" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Y, Factor=0, Constant=50}" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" />
                <Button Text="CONFIRM" HorizontalOptions="Center" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=X, Factor=1,Constant=100}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Factor=0, Property=Y, Constant=200}" />
            </RelativeLayout>
        </RelativeLayout>
</ContentPage.Content>

我还需要什么其他限制？或者也许我这次没有使用正确的布局？也许堆栈布局会更好？

Answer 1

我通过使用网格并使用行定义高度来限制图像的大小来解决这个问题。我知道这是在回避上述 RelativeLayout 引起的问题，但无论如何，网格布局实际上是一个更好的解决方案。有关为什么这更好的更多信息，有一个很棒的技术演讲和文档 here 。

至于解决我的问题的代码:

<ContentPage.Content>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*" />
            <RowDefinition Height="auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Frame BackgroundColor="Transparent" Grid.Row="0">
            <Image Source="smartie_logo.png" x:Name="smartieLogo"/>
        </Frame>

        <Frame Grid.Row="1" Margin="20">
            <StackLayout Padding="10,10,10,10" Spacing="25" BackgroundColor="White" Grid.Row="1">
                <Label Text="SETUP" FontAttributes="Bold" FontSize="22" HorizontalTextAlignment="Left"/>
                <Label Text="Access Code:" FontSize="20" HorizontalTextAlignment="Center" x:Name="AccessCodeLabel"/>
                <Entry Placeholder="Access Code" TextColor="Black" VerticalOptions="Center" WidthRequest="200" HorizontalOptions="Center"/>
                <Button Text="CONFIRM" HorizontalOptions="Center" x:Name="confirmButton" Clicked="AccessCodeConfirmed" />
            </StackLayout>
        </Frame>
    </Grid>
</ContentPage.Content>