Xamarin 表单设计在 iphone 5s 中看起来被压缩了

【问题标题】：Xamarin forms design looks compressed in iphone 5sXamarin 表单设计在 iphone 5s 中看起来被压缩了
【发布时间】：2019-09-16 09:47:26
【问题描述】：

我有 xamarin 表单应用程序。我有一个在 iphone 6 上看起来不错的屏幕。但在 Iphone 5 中，它看起来像是压缩的。如何解决这个设计问题？在更大的设备中，设计工作正常。

我的 XAML

<Grid RowSpacing="1" x:Name="DetailsCardview" IsVisible="False">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="0.7*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0">
        <Frame HorizontalOptions="FillAndExpand" HasShadow="False" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#772F4F4F" Margin="10,2,10,2">
            <StackLayout Orientation="Vertical" Padding="0">
                <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Padding="0" Margin="0,0,0,10">
                    <Image Source="invoiceby.png"  HeightRequest="25" VerticalOptions="Center"></Image>
                    <Label Text="Invoice Details"  TextColor="LightGreen" VerticalTextAlignment="Center">
                        <Label.FontFamily>
                            <OnPlatform x:TypeArguments="x:String">
                                <On Platform="iOS" Value="Montserrat-Bold" />
                                <On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
                            </OnPlatform>
                        </Label.FontFamily>
                    </Label>
                </StackLayout>

                <Grid >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="5"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <StackLayout Grid.Row="0" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand" >                              
                        <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                        <Label Text="Invoice No"  TextColor="LightBlue" VerticalTextAlignment="Center" >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="0" Grid.Column="1" >
                        <Label Text=":"  TextColor="White" VerticalTextAlignment="Center"  >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="0" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
                        <Label x:Name="InvoiceNumber" Text="-" MaxLines="1"  TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="1" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">                             
                        <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                        <Label Text="Customer"  TextColor="LightBlue" VerticalTextAlignment="Center" >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="1" Grid.Column="1" >
                        <Label Text=":"  TextColor="White" VerticalTextAlignment="Center"  >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="1" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
                        <Label x:Name="CustomerName" Text="-" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="2" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">                         
                        <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                        <Label Text="Sold By" TextColor="LightBlue" VerticalTextAlignment="Center" >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="2" Grid.Column="1">
                        <Label Text=":"  TextColor="White" VerticalTextAlignment="Center"  >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="2" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
                        <Label x:Name="SoldBy" Text="-" MaxLines="1"  TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="3" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">                               
                        <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                        <Label Text="Sold On"  TextColor="LightBlue" VerticalTextAlignment="Center" >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="3" Grid.Column="1">
                        <Label Text=":"  TextColor="White" VerticalTextAlignment="Center"  >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="3" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0" >
                        <Label Text="-" x:Name="SoldOn" MaxLines="2" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="4" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">                              
                        <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                        <Label Text="Invoiced By"  TextColor="LightBlue" VerticalTextAlignment="Center" >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="4" Grid.Column="1">
                        <Label Text=":"  TextColor="White" VerticalTextAlignment="Center" >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="4" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
                        <Label Text="-" x:Name="InvoicedBy" MaxLines="1"   TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="5" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand"                             
                        <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                        <Label Text="Referred By"  TextColor="LightBlue" VerticalTextAlignment="Center" >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="5" Grid.Column="1">
                        <Label Text=":"  TextColor="White" VerticalTextAlignment="Center"  >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="5" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0" >
                        <Label Text="-" x:Name="ReferredBy" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
                        </Label>
                    </StackLayout>
                   <StackLayout Grid.Row="6" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">                               
                        <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                        <Label Text="Current Carrier"  TextColor="LightBlue" VerticalTextAlignment="Center" >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="6" Grid.Column="1">
                        <Label Text=":"  TextColor="White" VerticalTextAlignment="Center"  >
                        </Label>
                    </StackLayout>
                    <StackLayout Grid.Row="6" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
                        <Label Text="-" x:Name="CurrentCarrier" MaxLines="1" TextColor="White" VerticalOptions="Center" HorizontalOptions="StartAndExpand">
                        </Label>
                    </StackLayout>
                </Grid>
            </StackLayout>
        </Frame>
    </Grid>


    <Grid Grid.Row="1">             
                    <Frame HorizontalOptions="FillAndExpand" HasShadow="False" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#772F4F4F" Margin="10,2,10,7">
                        <StackLayout Orientation="Vertical" Padding="0">
                            <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Padding="0" Margin="0,0,0,10">
                                <Image Source="tracking.png"  HeightRequest="25" VerticalOptions="Center"></Image>
                                <Label Text="Tracking Details"  TextColor="LightGreen" VerticalTextAlignment="Center">
                                    <Label.FontFamily>
                                        <OnPlatform x:TypeArguments="x:String">
                                            <On Platform="iOS" Value="Montserrat-Bold" />
                                            <On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
                                        </OnPlatform>
                                    </Label.FontFamily>
                                </Label>
                            </StackLayout>
                            <Grid  >
                                <Grid.RowDefinitions >
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="5"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <StackLayout Grid.Row="0" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">                                           
                                    <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                                    <Label Text="Tracking No"  TextColor="LightBlue" VerticalTextAlignment="Center" >
                                    </Label>
                                </StackLayout>
                                <StackLayout Grid.Row="0" Grid.Column="1" >
                                    <Label Text=":" TextColor="White" VerticalTextAlignment="Center"  >
                                    </Label>
                                </StackLayout>
                                <StackLayout Grid.Row="0" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
                                    <Label Text="{Binding TrackingNo}" x:Name="TrackingNo" TextColor="White" MaxLines="1"  VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
                                    </Label>
                                </StackLayout>
                                <StackLayout Grid.Row="1" Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand">                                           
                                    <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                                    <Label Text="Product Name"    TextColor="LightBlue" VerticalTextAlignment="Center" >
                                    </Label>
                                </StackLayout>
                                <StackLayout Grid.Row="1" Grid.Column="1" >
                                    <Label Text=":"  TextColor="White" VerticalTextAlignment="Center"  >
                                    </Label>
                                </StackLayout>
                                <StackLayout Grid.Row="1" Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
                                    <Label Text="{Binding ProductName}" x:Name="ProductName" MaxLines="2"  TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
                                    </Label>
                                </StackLayout>
                                <StackLayout Grid.Column="0" Grid.Row="2" Orientation="Horizontal" HorizontalOptions="FillAndExpand">                                          
                                    <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                                    <Label Text="Comments"  TextColor="LightBlue" VerticalTextAlignment="Center" >
                                    </Label>
                                </StackLayout>
                                <StackLayout  Grid.Column="1"   Grid.Row="2" >
                                    <Label Text=":"  TextColor="White" VerticalTextAlignment="Center"  >
                                    </Label>
                                </StackLayout>
                                <StackLayout  Grid.Row="2"   Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
                                    <Label Text="{Binding InvoiceComments}" x:Name="Comments" MaxLines="1" TextColor="White" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
                                    </Label>
                                </StackLayout>
                               <StackLayout Grid.Column="0" Grid.Row="3" Orientation="Horizontal" HorizontalOptions="FillAndExpand">                                          
                                    <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                                    <Label Text="Refund"  TextColor="LightBlue" VerticalTextAlignment="Center" >
                                    </Label>
                                </StackLayout>
                                <StackLayout  Grid.Column="1"   Grid.Row="3" >
                                    <Label Text=":" TextColor="White" VerticalTextAlignment="Center"  >
                                    </Label>
                                </StackLayout>
                                <StackLayout  Grid.Row="3"   Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
                                    <Label Text="{Binding Refund}" x:Name="Refund" TextColor="White" MaxLines="1" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand">
                                    </Label>
                                </StackLayout>
                                <StackLayout Grid.Column="0" Grid.Row="4" Orientation="Horizontal" HorizontalOptions="FillAndExpand">                                         
                                    <Label FontSize="Micro"  Text="⚬" VerticalTextAlignment="Center" TextColor="LightGoldenrodYellow"/>
                                    <Label Text="Quantity"  TextColor="LightBlue" VerticalTextAlignment="Center" >
                                    </Label>
                                </StackLayout>
                                <StackLayout  Grid.Column="1"   Grid.Row="4" >
                                    <Label Text=":"  TextColor="White" VerticalTextAlignment="Center"  >
                                    </Label>
                                </StackLayout>

                                <StackLayout  Grid.Row="4"   Grid.Column="2" HorizontalOptions="FillAndExpand" Margin="0,2,0,0">
                                    <Label Text="{Binding Qty}" x:Name="Quantity" TextColor="White" VerticalTextAlignment="Center" MaxLines="1" HorizontalOptions="StartAndExpand">
                                    </Label>
                                </StackLayout>

                            </Grid>
                        </StackLayout>
                    </Frame>                 
    </Grid>
    <Frame Grid.Row="2" HorizontalOptions="FillAndExpand" IsClippedToBounds="True" HasShadow="False" CornerRadius="7" BackgroundColor="Transparent"  BorderColor="Transparent" Margin="10,2,10,2" Padding="5">
        <Frame  BackgroundColor="Transparent" HasShadow="False" HorizontalOptions="FillAndExpand" BorderColor="Green" IsClippedToBounds="True" Padding="0" Margin="10,0,10,0">
            <Frame.CornerRadius>
                <OnPlatform x:TypeArguments="x:Single">
                    <On Platform="iOS" Value="35" />
                    <On Platform="Android" Value="40" />
                </OnPlatform>
            </Frame.CornerRadius>
            <Grid >
                <Image Source="dialerbg2.png" Aspect="AspectFill" HeightRequest="30"></Image>               
                    <Grid BackgroundColor="Transparent" Padding="5">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="5"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="60"/>
                        </Grid.ColumnDefinitions>
                        <StackLayout Grid.Column="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">
                            <Image Source="cellphone.png" HorizontalOptions="Start" HeightRequest="25" VerticalOptions="Center"></Image>
                            <Label Grid.Column="0" Text="Phone" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" TextColor="LightBlue" >
                                <Label.FontFamily>
                                    <OnPlatform x:TypeArguments="x:String">
                                        <On Platform="iOS" Value="Montserrat-Regular" />
                                        <On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
                                    </OnPlatform>
                                </Label.FontFamily>
                            </Label>
                        </StackLayout>
                        <Label Grid.Column="1" Text=":"  VerticalTextAlignment="Center" TextColor="White" FontSize="Small">
                            <Label.FontFamily>
                                <OnPlatform x:TypeArguments="x:String">
                                    <On Platform="iOS" Value="Montserrat-Regular" />
                                    <On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
                                </OnPlatform>
                            </Label.FontFamily>
                        </Label>
                        <Label x:Name="PhoneNumber" Grid.Column="2" Text="+919605209575"  VerticalTextAlignment="Center" TextColor="White" >
                            <Label.FontFamily>
                                <OnPlatform x:TypeArguments="x:String">
                                    <On Platform="iOS" Value="Montserrat-Regular" />
                                    <On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
                                </OnPlatform>
                            </Label.FontFamily>
                        </Label>
                        <Image Source="caller.png"  HorizontalOptions="EndAndExpand" Grid.Column="3"></Image>                 
                    </Grid>                  
            </Grid>
        </Frame>
    </Frame>
</Grid>

如何在每个屏幕尺寸上做到这一点？我应该添加滚动视图吗？我有点困惑。任何帮助表示赞赏。

【问题讨论】：

  • 您可以通过不同的screenHeight在每个设备中设置不同大小的文本。
  • @JackHua-MSFT 你能给我一些关于根据设备屏幕大小设置不同文本大小的指导吗？我认为这将解决我的问题

标签： xamarin.forms


【解决方案1】：

您应该将您的设计包装在一个 ScrollView 中。

在较小的设备中，您的列表将没有足够的空间来显示所有元素，因此它将调整大小并调整以填充可用空间。

【讨论】：

  • 但是有没有没有滚动视图的选项？就像带有较小文本的相同视图一样。我放了scrollview..但它需要很多空间
【解决方案2】：

你能给我一些关于设置不同文本大小的指导吗 根据设备屏幕尺寸？我认为这将解决我的问题

例如：

    nfloat screenSize = UIScreen.MainScreen.Bounds.Size.Height;

    // 5, 5s, SE, 5C  320 * 568

    nfloat iphone5sHeight = 568;

    if (screenSize <= iphone5sHeight)
    {
        //set the fontSize
    }
    else {
        //set the fontSize for higher screen
    }

您可以查看这两个线程以获得更多想法：different-uifont-sizes-for-different-ios-devices-in-swift 和 how-to-ios-item-and-font-sizes-scaling-as-screen-size

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-06-21
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode