Xamarin Form 适配手机及平板

由于手机和平板的屏幕差异较大，同一个应用在平板和手机上使用同一个ui布局看起来会怪怪的。今天我们使用Xamarin Form来做一个小应用，在应用启动时判断下屏幕尺寸，平板则启用平板布局的ui，手机则使用手机布局的ui。尺寸判断的阈值我们选7寸，大部分手机的屏幕尺寸小于7寸。设计模式我们采用MVVM。手机和平板分别使用不同的View。同一个界面的手机view和平板view共用一个viewmodel。下面我们分步实现。

1. 创建Xamarin Form项目，只选安卓(这里不讨论ios和uwp应用)。
   
   手机端我们使用选项卡式，平板我们使用浮出控件。分别使用这两个选项创建两个项目。然后把AppShell.xaml分别命名为AppShellMobile.xaml和AppShellPad.xaml并放到同一个项目中。
   
   在App.xaml.cs中声明静态全局变量ScreenInch用于存储屏幕尺寸，然后在构造函数中判断尺寸值大于7加载AppShellPad，否则加载AppShellMobile。

using Pluto.Mobile.Services;
using Pluto.Mobile.Views;
using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Pluto.Mobile
{
    public partial class App : Application
    {
        #region props
        /// <summary>
        /// 屏幕尺寸
        /// </summary>
        public static double ScreenInch{set;get;}
        #endregion
        #region methods
        public App()
        {
            InitializeComponent();

            DependencyService.Register<MockDataStore>();
            if(ScreenInch>7)
            {
                MainPage = new AppShellPad();
            }else
            {
                MainPage = new AppShellMobile();
            }
        }

        protected override void OnStart()
        {
        }

        protected override void OnSleep()
        {
        }

        protected override void OnResume()
        {
        }
        #endregion
    }
}

在MainActivity中获取屏幕尺寸

using System;

using Android.App;
using Android.Content.PM;
using Android.Runtime;
using Android.OS;

namespace Pluto.Mobile.Droid
{
    [Activity(Label = "Pluto.Mobile", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize )]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            GetScreenInch();

            Xamarin.Essentials.Platform.Init(this, savedInstanceState);
            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
            LoadApplication(new App());
        }
        public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
        {
            Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);

            base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
        }
        /// <summary>
        /// 获取屏幕尺寸
        /// </summary>
        private void  GetScreenInch()
        {
            var width = Math.Min(Resources.DisplayMetrics.WidthPixels, Resources.DisplayMetrics.HeightPixels) / Resources.DisplayMetrics.Xdpi;
            var height = Math.Max(Resources.DisplayMetrics.WidthPixels, Resources.DisplayMetrics.HeightPixels) / Resources.DisplayMetrics.Ydpi;

            //计算对角线
            App.ScreenInch = Math.Sqrt(Math.Pow(width, 2) + Math.Pow(height, 2));
        }
    }
}

下面是运行效果

以上代码见：代码仓库