Xamarin.Forms: Как разработать адаптивные макеты с помощью ResponsiveLayout и Grid? - PullRequest
Новая
       19

Xamarin.Forms: Как разработать адаптивные макеты с помощью ResponsiveLayout и Grid?

0 голосов
/ 30 сентября 2018

Я пытаюсь понять логику структуры макета сетки в Xamarin.Forms.

Я создал несколько строк и столбцов с тегами Grid и окрасил их в цвета фона, чтобы иметь возможность проверить их ширину и высоту.

Когда я проверяю результат, я вижу многоразные выходы в зависимости от размеров устройств.

Пожалуйста, проверьте выходы эмуляторов:

enter image description here

Мое приложение будет только мобильнымприложение, и оно не будет отображаться на других платформах.Я думаю, что эти различия слишком велики для мобильного приложения.Можно ли спроектировать адаптивный пользовательский интерфейс с помощью Xamarin или нам нужно написать отдельные коды для всех разных измерений?

Или в моем файле xaml есть логические ошибки? 

<ContentView.Content>
    <RelativeLayout Padding="0">
        <!-- Background -->
        <Image Aspect="AspectFill" 
               Source="bg.png" 
               RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}" 
               RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.1*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="0.1*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="1.2*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <StackLayout Grid.Column="0" Grid.Row="0" 
                         BackgroundColor="Fuchsia" />
            <StackLayout Grid.Column="1" Grid.Row="0" 
                         BackgroundColor="Blue" />
            <!--Title Starts-->
            <StackLayout Grid.Column="1" Grid.Row="1" 
                         BackgroundColor="Blue" 
                         Padding="0, 2, 0, 0">
                <Label Text="TITLE" 
                       HorizontalOptions="Center" 
                       TextColor="#28ddff" 
                       FontSize="32" 
                       BackgroundColor="Black" 
                       Opacity="0.7">
                    <Label.FontSize>
                        <OnPlatform x:TypeArguments="x:Double" 
                                    iOS="30" 
                                    Android="25" />
                    </Label.FontSize>
                </Label>
                <!--Title Ends-->
                <!--SubTitle Starts-->
                <Label Text="SUBTITLE" 
                       HorizontalOptions="Center" 
                       TextColor="#ffffff" 
                       FontSize="32" 
                       BackgroundColor="Black" 
                       Opacity="0.7">
                    <Label.FontSize>
                        <OnPlatform x:TypeArguments="x:Double" 
                                    iOS="32" 
                                    Android="27" />
                    </Label.FontSize>
                </Label>
            </StackLayout>
            <!--SubTitle Ends-->
            <!--Description Starts-->
            <StackLayout Grid.Column="1" Grid.Row="2" 
                         BackgroundColor="Blue">
                <Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco." 
                       BackgroundColor="Transparent" 
                       TextColor="White" 
                       FontAttributes="Bold">
                    <Label.FontSize>
                        <OnPlatform x:TypeArguments="x:Double" 
                                    iOS="15" 
                                    Android="13" />
                    </Label.FontSize>
                </Label>
            </StackLayout>
            <!--Description Ends-->
            <StackLayout Grid.Column="1" Grid.Row="3">
                <Button Text="LOGIN" 
                        TextColor="#009de0" 
                        BackgroundColor="White" 
                        WidthRequest="120" 
                        HorizontalOptions="Center" 
                        Clicked="Handle_Clicked" />
            </StackLayout>
        </Grid>
    </RelativeLayout>
</ContentView.Content>

Я должен установить фоновое изображение для приложения, и поэтому я начал с тега <RelativeLayout>.Следовательно, теги <RelativeLayout> или <AbsoluteLayout> портят структуру ячеек, я думаю, или?

...