Xamarin.Forms - Ограничения в RelativeLayout

Question

Я создал базовую страницу с изображением, некоторыми надписями и вводом, используя Xamarin.Forms в Visual Studio для кроссплатформенного приложения.Проблема в том, что когда приложение загружается на 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, но в любом случае компоновка сетки на самом деле была лучшим решением.Для получения дополнительной информации о том, почему это было лучше, есть отличный технический доклад и документ здесь .

Что касается кода, который решил мою проблему:

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