xamarin.forms模拟rem动态大小值,实现屏幕适配

开发app的时候,比较麻烦的地方,就是处理屏幕适配,比如文字设为12的大小,测试的时候,看得文字挺正常,可是,放到高分辨率设备一看,文字就变得特别小,

怎样实现随着分辨率变大或者变小,所有的size数值,也会等比例变化呢?

 

首先,在App类,加两个static变量,用来获取屏幕大小

1
2
3
4
5
6
7
8
9
10
public partial class App : Application
{
    public App ()
    {
        InitializeComponent();
        
        MainPage = new App1.MainPage();
    }
        public static double ScreenWidth;
        public static double ScreenHeight;

  

然后在android、ios等工程,设置这两个值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate (Bundle bundle)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;
 
            base.OnCreate (bundle);
                Resources.DisplayMetrics.ScaledDensity = 1;//告诉android不要把自己大小单位缩放                Resources.DisplayMetrics.Density = 1;
                    App1.App.ScreenWidth = Resources.DisplayMetrics.WidthPixels;
                    App1.App.ScreenHeight = Resources.DisplayMetrics.HeightPixels;
                    //ios
                    //App.ScreenWidth = UIScreen.MainScreen.Bounds.Width/UIScreen.MainScreen.Scale;
                    //App.ScreenHeight = UIScreen.MainScreen.Bounds.Height/UIScreen.MainScreen.Scale;                //UWP                //App.ScreenWidth = ApplicationView.GetForCurrentView().VisibleBounds.Width                                //上面的公式ApplicationView.GetForCurrentView().VisibleBounds.Width其实不是实际的大小,而是 "真实Width/scale" 得出来的width                //var scale = DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel                    global::Xamarin.Forms.Forms.Init (this, bundle);
            LoadApplication (new App1.App ());
        }
    }

  

然后,建一个Helper类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
 
namespace App1
{
    public class Helper
    {
        public class PIXEL : Dictionary<string, double>
        {
 
            public new double this[string key]
            {
                get
                {
                    return Convert.ToDouble(key) * Helper.flag;
                }
                set
                {
 
                }
            }
        }
        public class MARGIN : Dictionary<string, Thickness>
        {
            public new Thickness this[string key]
            {
                get
                {
                    string[] p = key.Split('-');
                    if (p.Length == 1)
                        return new Thickness(Convert.ToDouble(p[0]) * Helper.flag);
                    return new Thickness(Convert.ToDouble(p[0]) * Helper.flag,
                        Convert.ToDouble(p[1]) * Helper.flag,
                        Convert.ToDouble(p[2]) * Helper.flag,
                        Convert.ToDouble(p[3]) * Helper.flag);
                }
                set
                {
 
                }
            }
        }
 
        public static double flag;
        public PIXEL px
        {
            get;
        }
        public MARGIN m
        {
            get;
        }
        public Helper()
        {        //计算出屏幕缩放比例,640是你的UI原始设计图的高度
            flag = App.ScreenWidth / 640.0;
            px = new PIXEL();
            m = new MARGIN();
        }
    }
    
}

  

在App.xaml里面定义资源

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:local="clr-namespace:App1"
             x:Class="App1.App">
    <Application.Resources>
        <ResourceDictionary>
            <local:Helper x:Key="size"></local:Helper>
        </ResourceDictionary>
        <!-- Application resource dictionary -->
 
    </Application.Resources>
</Application>

  

然后,实际的窗口页面,就可以这样设置值了

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:App1"
             x:Class="App1.MainPage">
    <Label Text="Welcome to Xamarin Forms!"
           VerticalOptions="Start" BackgroundColor="AliceBlue" Margin="{Binding Source={StaticResource size},Path=m[10-0-0-0]}"
           HorizontalOptions="Start" FontSize="{Binding Source={StaticResource size},Path=px[10]}" />
 
</ContentPage>

  

这样,就可以实现屏幕适配,而且做界面很方便,所有大小,只要照着UI设计图,用photoshop量出来是多少像素,直接就在xaml里面填多少像素就可以

posted @   IWing  阅读(782)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
点击右上角即可分享
微信分享提示