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的值，可以使用“在平台上”语句。例如，如果您想让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

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

ScreenDimensions.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" />

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

1 个答案: