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

Posted 2020-09-20 IWay

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

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

 

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

	public partial class App : Application
	{
		public App ()
		{
			InitializeComponent();
           
			MainPage = new App1.MainPage();
		}
        　　　　public static int ScreenWidth;
        　　　　public static int 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);

            　　　　　　　　App1.App.ScreenWidth = Resources.DisplayMetrics.WidthPixels;
            　　　　　　　　App1.App.ScreenHeight = Resources.DisplayMetrics.HeightPixels;
            　　　　　　　　//ios
            　　　　　　　　//App.ScreenWidth = (int)UIScreen.MainScreen.Bounds.Width;
            　　　　　　　　//App.ScreenHeight = (int)UIScreen.MainScreen.Bounds.Height;
            　　　　　　　　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里面填多少像素就可以