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里面填多少像素就可以
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 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)