根据屏幕尺寸调整对象大小 [英] Sizing objects based on screen dimensions

问题描述

给定不同的屏幕尺寸，什么是可接受的缩放UI的方法?

Given different screen sizes what is the accepted method of scaling the UI?

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

In setting up a UI it looks great on one screen but terrible on another. Trying to set up a possibly dynamic style based on screen dimensions. I have here a simple header with a FormattedString in a label. I want to center the entire label with the spans formatting remaining intact. Ideally I'd like to set the height of the text to some percentage of the 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;
        }

我认为我也许可以利用此代码来完成任务.但是我不知道如何从那里影响样式.我认为二传手可能是正确的道路.我没有取得扎实的进展.

I thought that I might be able to utilize this code to do the deed. But I don't know how to impact the styles from there. I thought that a setter might be the right path. I have not made solid progress.

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

没有任何代码.

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

I would be appreciative if anyone could lead me to the correct solution.

推荐答案

如果要根据平台更改UI的值，可以使用在平台上"语句. 例如，如果您想在iOS上使用不同于在Android上使用的网格边距，则可以这样使用它:

If you want to change values of your UI depending on the platform, you could make use of the "On Platform" Statement. For instance, if you want to have a different margin for a grid on iOS than you need to use on Android, you could use it like that:

<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中设置一个属性，它将覆盖同一属性(如果存在)的样式定义.

Of course you can use that for other properties as well. Keep in mind that if you set a property in your view.xaml it will override the style definition of the same property if present.

可以根据屏幕高度来设置字体大小，如下所示:

Making your font size dependent on the screen height can be done as follows:

获取屏幕尺寸-共享

我们将需要实现一个依赖项服务，该服务使我们能够检索实际的屏幕高度或宽度.

We will need to implement a dependency service, which allows us to retrieve the actual screen height or width.

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

Therefore in the shared code, create a new interface:

IScreenDimensions.cs

IScreenDimensions.cs

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

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

in your android implementation, add the implementation of the interface:

获取屏幕尺寸-Android

ScreenDimensions.cs

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

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(同样在共享代码中):

Now we create an IValueConverter (again in shared code):

ScreenSizeToRelativeSizeConverter.cs

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();
    }
}

请注意，转换器需要一个参数，该参数将告诉它最终得到的屏幕尺寸占屏幕尺寸的哪一部分.

Note that the converter needs a parameter that will tell it which fraction of the screen size the resulting size will end up with.

将它们放在一起

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

Finally you add the following resources to your App.xaml file:

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

然后将样式设置为相关标签(或其他元素):

And set the style to your label (or other element) in question:

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

这篇关于根据屏幕尺寸调整对象大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！