时间戳

首页 > 解决方案 > 如何在 Xamarin.Forms 中缩放字体和容器的高度

xamarin.forms - 如何在 Xamarin.Forms 中缩放字体和容器的高度

问题描述

我在 Xamarin.Forms 中正确缩放容器高度和字体大小时遇到​​问题。

1）第一个问题是我需要在我的一个容器中设置静态高度，但它在不同的设备上看起来不同。我不确切知道，但假设这个问题可能是由屏幕密度引起的。我应该以某种方式缩放容器的高度还是 Xamarin.Forms 应该为我处理这个？

2）第二个问题是我需要设置正确的跨平台字体。有没有办法让 Xamarin.Forms 为我处理它，或者我需要使用 Device.RuntimePlatform 属性来设置它？也如此处所述：https ://docs.microsoft.com/pl-pl/xamarin/xamarin-forms/user-interface/text/fonts - 命名字体大小不是可接受的解决方案。对于 iPod，我需要使用 micro，但在 android 上，文本几乎看不到。

在模拟器上发生了许多奇怪的事情，顶部栏超出了比例，整个外观都被放大了。这是我的错还是 Xamarin 不是我认为的通用平台？

这是我页面的代码：

<StackLayout>
    <SearchBar 
        VerticalOptions="Start"
        TextChanged="SearchBar_OnTextChanged"
        PlaceholderColor="#C0C0C0"></SearchBar>

    <ListView 
        BackgroundColor="#f2f2f2"
        VerticalOptions="Center"
        ItemTapped="SelectProcedure"
        CachingStrategy="RecycleElement">

        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell 
                    Text="{Binding Name}" 
                    TextColor="Black"/>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

    <StackLayout 
        BackgroundColor="White"
        HeightRequest="80"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="EndAndExpand">

        <Grid
            Padding="10,5,10,5"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand">

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Label
                Grid.Column="0"
                Grid.Row="0"
                VerticalTextAlignment="Center"
                VerticalOptions="Center"
                HorizontalTextAlignment="Center"
                HorizontalOptions="Center"
                TextColor="Black"/>

            <telerikInput:RadButton 
                Grid.Column="1"
                Grid.Row="0"
                Padding="5,0,5,0"
                ImageSource="plus.png"/>

        </Grid>
    </StackLayout>
</StackLayout>

这是我拥有的两个设备和模拟器的屏幕截图：

安卓8.1

在此处输入图像描述

iPod 触摸 6

在此处输入图像描述

安卓 8.1（模拟器）

在此处输入图像描述

标签： xamarin.formsxamarin.androidxamarin.ios

解决方案

解决方法：您可以将HeightRequest网格设置为屏幕高度的百分比（例如 10%）。

<StackLayout 
        BackgroundColor="White"
        HeightRequest="{Binding stackHeight}"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="EndAndExpand">

在共享项目 App.xaml.cs

public static double ScreenWidth;
public static double ScreenHeight;

在 Android MainActivity.cs

protected override void OnCreate(Bundle savedInstanceState)
{
   TabLayoutResource = Resource.Layout.Tabbar;
   ToolbarResource = Resource.Layout.Toolbar;

   base.OnCreate(savedInstanceState);

   Xamarin.Essentials.Platform.Init(this, savedInstanceState);
            
   global::Xamarin.Forms.Forms.SetFlags("Shell_Experimental", "Visual_Experimental", "CollectionView_Experimental");
   global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

   App.ScreenWidth = Resources.DisplayMetrics.WidthPixels/Resources.DisplayMetrics.Density; 
   App.ScreenHeight =Resources.DisplayMetrics.HeightPixels/Resources.DisplayMetrics.Density; 

   LoadApplication(new App());
}

在 iOS 中

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    //...
    App.ScreenWidth = (int)UIScreen.MainScreen.Bounds.Width;
    App.ScreenHeight = (int)UIScreen.MainScreen.Bounds.Height;
    //...
}

在代码后面或 ViewModel 中

public double stackHeight { get; private set; }

//...

if(Device.RuntimePlatform=="iOS")
{
  stackHeight= App.ScreenHeight/5.0;
}
else
{
  stackHeight= App.ScreenHeight/20.0;
}

对于 Xamarin.Forms 中的自定义字体，您可以查看https://xamarinhelp.com/custom-fonts-xamarin-forms/

推荐阅读