Android 和iOS原生都提供了横竖屏切换的解决方案,这些方法同样可以用于Xamarin.Android和Xamarin.iOS,对于Forms项目而言横竖屏的切换有什么好的解决方案?强制竖屏显示一劳永逸但这不能给用户最好的体验。

Android 和iOS原生都提供了横竖屏切换的解决方案,这些方法同样可以用于Xamarin.Android和Xamarin.iOS,对于Forms项目而言横竖屏的切换有什么好的解决方案?强制竖屏显示一劳永逸但这不能给用户最好的体验。

Page的SizeChanged事件

Forms中Page类提供了SizeChanged,SizeChanged事件可以帮助我们在运行时获取Page大小的变化,如屏幕旋转时。
触发SizeChanged事件时,通过比较Page的WidthHeight来判断当前横竖屏的显示方式。

SizeChanged会在页面第一次创建显示时出触发该事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public AdaptiveUIPage()
{
InitializeComponent();
SizeChanged += Page_SizeChanged;
}
void Page_SizeChanged(object sender, System.EventArgs e)
{
System.Diagnostics.Debug.WriteLine(nameof(Page_SizeChanged));
var isPortrait = Height > Width;
layout.Orientation = (isPortrait ? StackOrientation.Vertical : StackOrientation.Horizontal);
}

判断设备类型

以下部分没有敲过代码,直接抄袭过来的

除了考虑横竖屏的情况,有时我们还要根据不同的设备显示不同的效果,最简单的例子就是手机和平板界面显示的差异。

Forms提供了Device.Idiom可以帮助我们判断当前设备的类型:

1
2
3
4
5
6
7
8
9
10
11
switch (Device.Idiom)
{
case TargetIdiom.Desktop:
break;
case TargetIdiom.Phone:
break;
case TargetIdiom.Tablet:
break;
case TargetIdiom.TV:
break;
}

如果只是简单界面的调整可以在界面初始化时直接通过代码挑战界面布局。

1
2
3
4
5
6
7
8
9
10
if (Device.Idiom == TargetIdiom.Desktop)
{
buttonAbout.HeightRequest = 25;
buttonAbout.WidthRequest = 40;
}
else
{
buttonAbout.HeightRequest = 40;
buttonAbout.WidthRequest = 70;
}

界面有较大调整时可以直接通过对ContentView的更换实现想要的效果。

1
2
3
4
if (Device.Idiom == TargetIdiom.Desktop)
colorPicker = new ColorPickerMouseView();
else
colorPicker = new ColorPickerTouchView();

甚至可以为不同设备定义不同页面,在Push Page时判断设备类型调整到不同页面,再结合MVVM模式可以最大限度的减少我们代码

1
2
3
4
5
6
7
8
9
10
ContentPage page;
if(Device.Idiom == TargetIdiom.Desktop)
page = new DetailsDesktopPage(new MyDetailViewModel(...));
else if(Device.Idiom == TargetIdiom.TV)
page = new DetailsTVPage(new MyDetailViewModel(...));
else //Phone or Tablet
page = new DetailsMobilePage(new MyDetailViewModel(...));
Navigation.PushAsync(page);

最后更新: 2017年11月05日 11:50

原始链接: http://xamarin.xyz/2017/11/04/Xamarin.Forms 界面适应介绍/