根据屏幕尺寸调整对象大小

Question

鉴于不同的屏幕尺寸，缩放 UI 的可接受方法是什么？

在设置 UI 时，它在一个屏幕上看起来很棒，但在另一个屏幕上却很糟糕。尝试根据屏幕尺寸设置可能的动态样式。我在这里有一个简单的标题，标签中有一个 FormattedString。我想将整个标签居中，跨度格式保持不变。理想情况下，我想将文本的高度设置为 Current.MainPage.Height 的某个百分比...

来自 App.xaml

<Application.Resources>
    <ResourceDictionary>
        <Style x:Key="HeaderSpans" TargetType="Span" >
            <Setter Property="BackgroundColor" Value="Transparent"></Setter>
            <Setter Property="HorizontalOptions" Value="Center"></Setter>
            <Setter Property="TextColor" Value="White"></Setter>
            <Setter Property="VerticalTextAlignment" Value="Center"></Setter>
            <Setter Property="Margin" Value="0, 20, 0, 0"></Setter>
        </Style>
        <Style x:Key="HeaderSpan" TargetType="Span" >
            <Setter Property="TextColor" Value="White"></Setter>
            <Setter Property="FontSize" Value="32"></Setter>

        </Style>
        <Style x:Key="HeaderSpanB" TargetType="Span" >
            <Setter Property="TextColor" Value="White"></Setter>
            <Setter Property="FontSize" Value="32"></Setter>
            <Setter Property="FontAttributes" Value="Bold"></Setter>
        </Style>
    </ResourceDictionary>
</Application.Resources>

背后的代码

        switch (Device.RuntimePlatform)
        {
            case Device.iOS:
                //MainPage.BackgroundColor = Color.Black;
                break;
            case Device.Android:
                //MainPage.BackgroundColor = Color.Red;
                break;
            case Device.UWP:
                //MainPage.BackgroundColor = Color.Orange;
                break;
            default:
                //MainPage.BackgroundColor = Color.Transparent;
                break;
        }

我想我也许可以利用这段代码来做这件事。但我不知道如何从那里影响风格。我认为二传手可能是正确的道路。我没有取得实质性进展。

来自 Header.xaml

<!-- dark-blue backing header -->
<Image Source="Header752x135.png" VerticalOptions="Start" HorizontalOptions="CenterAndExpand"></Image>

<!-- SHIPSHAPE text placed on the backing header -->
<Label

    Style="{StaticResource HeaderSpans}"
>
    <Label.FormattedText>
        <FormattedString>
            <Span Text="SHIP" Style="{StaticResource HeaderSpan}" />
            <Span Text="SHAPE" Style="{StaticResource HeaderSpanB}" />
        </FormattedString>
    </Label.FormattedText>
</Label>

没有背后的代码。

如果有人能引导我找到正确的解决方案，我将不胜感激。

Answer 1

如果您想根据平台更改 UI 的值，您可以使用“On Platform”声明。例如，如果您想在 iOS 上为网格设置与在 Android 上使用不同的边距，您可以像这样使用它：

<Grid>
    <Grid.Margin>
        <On Platform x:TypeArguments="Thickness">
            <On Platform="iOS">0,0,0,0</On>
            <On Platform="Android">15,0,15,0</On>
        </OnPlatform>
    </Grid.Margin>
</Grid>

当然，您也可以将其用于其他属性。请记住，如果您在 view.xaml 中设置属性，它将覆盖相同属性的样式定义（如果存在）。

使您的字体大小依赖于屏幕高度可以按如下方式完成：

获取屏幕尺寸 - 共享

我们需要实现一个依赖服务，它允许我们检索实际的屏幕高度或宽度。

因此在共享代码中，创建一个新接口：

IScreenDimensions.cs

public interface IScreenDimensions
{
    double GetScreenWidth();
    double GetScreenHeight();
}

在您的 android 实现中，添加接口的实现：

获取屏幕尺寸 - Android

屏幕尺寸.cs

[assembly: Dependency(typeof(ScreenDimensions))]
namespace MyAppNamespace.Droid
{
    public class ScreenDimensions : IScreenDimensions
    {
        public double GetScreenHeight()
        {
            return ((double)Android.App.Application.Context.Resources.DisplayMetrics.HeightPixels / (double)Android.App.Application.Context.Resources.DisplayMetrics.Density);
        }

        public double GetScreenWidth()
        {
            return ((double)Android.App.Application.Context.Resources.DisplayMetrics.WidthPixels / (double)Android.App.Application.Context.Resources.DisplayMetrics.Density);
        }
    }
}

获取屏幕尺寸 - iOS

屏幕尺寸.cs

[assembly: Dependency(typeof(ScreenDimensions))]
namespace MyAppNamespace.iOS
{
    public class ScreenDimensions : IScreenDimensions
    {
        public double GetScreenHeight()
        {
            return (double)UIScreen.MainScreen.Bounds.Height;
        }

        public double GetScreenWidth()
        {
            return (double)UIScreen.MainScreen.Bounds.Width;
        }
    }
}

构建一个值转换器来消耗屏幕尺寸

现在我们创建一个 IValueConverter（再次在共享代码中）：

ScreenSizeToRelativeSizeConverter.cs

public class ScreenSizeToRelativeSizeConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        double height = DependencyService.Get<IScreenDimensions>().GetScreenHeight();
        return (double) height * (double) parameter;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        // no need to convert anything back
        throw new NotImplementedException();
    }
}

请注意，转换器需要一个参数来告诉它最终尺寸将是屏幕尺寸的哪一部分。

把这一切放在一起

最后，将以下资源添加到 App.xaml 文件中：

<Application.Resources>
    <ResourceDictionary>
        <converter:ScreenSizeToRelativeSizeConverter x:Key="SizeToRelativeSizeConverter"/>
        <x:Double x:Key="fontSizeFactor">0.03</x:Double>
        <Style x:Key="LabelStyle" TargetType="Label">
            <Setter Property="FontSize" Value="{Binding Converter={StaticResource SizeToRelativeSizeConverter}, ConverterParameter={StaticResource fontSizeFactor}}" />
        </Style>
    </ResourceDictionary>
</Application.Resources>

并将样式设置为您的标签（或其他元素）：

<Label Text="Welcome to Xamarin.Forms!" Style="{StaticResource LabelStyle}"
       HorizontalOptions="Center"
       VerticalOptions="CenterAndExpand" />