xamarin.forms模拟rem动态大小值,实现屏幕适配
开发app的时候,比较麻烦的地方,就是处理屏幕适配,比如文字设为12的大小,测试的时候,看得文字挺正常,可是,放到高分辨率设备一看,文字就变得特别小,
怎样实现随着分辨率变大或者变小,所有的size数值,也会等比例变化呢?
首先,在App类,加两个static变量,用来获取屏幕大小
public partial class App : Application
{
public App ()
{
InitializeComponent();
MainPage = new App1.MainPage();
}
public static double ScreenWidth;
public static double ScreenHeight;
然后在android、ios等工程,设置这两个值
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类
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里面定义资源
<?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>
然后,实际的窗口页面,就可以这样设置值了
<?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里面填多少像素就可以