android xamarin 教程 xamarin ui

Xamarin.Forms长期以来一直支持iOS，Android和Windows。 我们还添加了新的平台，以跟上不断变化的情景，如Tizen和macOS，Linux和Windows WPF等系统上。 这些平台运行在各种设备上，包括手机，平板电脑，台式机和电视机。 这对我们开发商来说是一个有趣的挑战。 我们如何设计一个智能缩放的UI，并在各种平台的屏幕上自动适应？

屏幕尺寸

默认情况下，Xamarin.Forms布局和控件被设计为响应，并且经常会增长和缩小以利用可用的屏幕空间。 如果需要更多的控制，Xamarin.Forms Page类有一个SizeChanged事件，我们可以使用它来确定运行时可用的屏幕大小。 当页面显示时，会引发此事件，允许我们根据屏幕的宽度或高度来调整或更改我们的页面的UI。

此处)折叠或打开

1. public partial class MainPage : ContentPage
2. {
3. public MainPage()
4. {
5. ();
6. += MainPageSizeChanged;
7. }
8.   
9. void MainPageSizeChanged(object sender, EventArgs e)
10. {
11. .WidthRequest = Math.Min(this.Width, 400);
12. }
13. }

回应方向

我们可以使用SizeChanged事件来响应方向更改。 当屏幕旋转时，SizeChanged将被执行。 我们可以通过比较页面的Width和Height属性来确定方向。

此处)折叠或打开

1. public partial class MainPage : ContentPage
2.  {
3. public MainPage()
4.      {
5. ();
6. += MainPageSizeChanged;
7.      }
8.   
9. (object sender, EventArgs e)
10.      {
11. = this.Height > this.Width;
12. .Orientation = (isPortrait ? StackOrientation.Horizontal : StackOrientation.Vertical);
13.      }
14.  }

响应设备类型

我们经常考虑屏幕尺寸的响应和自适应，但是我们还需要回应用户与设备的交互。 例如，我们使用移动设备上的触摸屏和桌面PC上的键盘鼠标。
Xamarin.Forms provides a static Xamarin.Forms在Device类中提供了一个静态Idiom属性，我们可以使用它来检查设备类型。 设备分为四个类别：电话，平板电脑，桌面和电视。

此处)折叠或打开

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

我们可以使用Device.Idiom来更改我们呈现的UI。 根据您需要进行的一些更改，我们有几种可以使用的选项。

对于小的更改，如调整按钮大小，我们直接更新控件和布局。

此处)折叠或打开

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

当您需要添加或删除部分UI时，Xamarin.Forms提供了一个ContentView，允许我们创建复合控件。 我们用行为定义可重用UI的部分，然后根据成语决定要显示哪些复合控件。 您可以将ContentView视为部分Xamarin.Forms页面。

此处)折叠或打开

1. void AddColorPicker ()
2. {
3. ;
4.   
5. if (Device.Idiom == TargetIdiom.Desktop)
6. = new ColorPickerMouseView();
7. else
8. = new ColorPickerTouchView();
9.   
10. .VerticalOptions = LayoutOptions.Start;
11. .ColorChanged += ColorPickerColorChanged;
12.   
13. .Children.Add(colorPicker)
14. }

当您的UI更改在设备类型之间很重要时，您可以创建多个页面。 我们使用Device.Idiom来决定要显示的页面，甚至可以使用这些页面中的ContentView来避免重复的代码。

而如果您使用MVVM，您可以定义一个View Model，用于每个版本的页面，进一步减少重复的代码！

此处)折叠或打开

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