iOS 11引入了一些您可能想要利用的新的视觉设计更新,包括安全区域布局指南和大型标题。 对于Xamarin.iOS开发人员,我们最近发布了一个iOS 11指南,用于更新您的Xamarin.iOS应用程序和安全区域和大型文章的文章。 当然,由于Xamarin.Forms是一个运行在Xamarin.iOS之上的图层,所有这些功能都可以立即使用!
在这篇文章中,我将向您展示如何进一步使Xamarin.Forms直接使用这些特性。
使用SafeArea布局
为了确保您的内容出现在设备屏幕的可见区域,特别是为了避免在iPhone X上运行横向时的“缺口”,您将需要利用iOS 11定义的安全区域布局指南。 我们最近写了关于在创建自动布局约束时如何在Xamarin.iOS中使用它。
和往常一样,在Xamarin.Forms中,您可以访问Xamarin.iOS平台代码来获取对这些值的引用并相应地更新您的视图。
但是我们想让你更容易 在2.4.0 Service Release 4中,我们介绍了一个特定于平台的页面,以便使用安全区域布局指南在页面中创建适当的插页。 要选择,将其添加到您的ContentPage构造函数:
点击(此处)折叠或打开
- using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
- using Xamarin.Forms;
-
- namespace iPhoneX
- {
- public partial class ItemsPage : ContentPage
- {
- public ItemsPage()
- {
- InitializeComponent();
-
- OnXamarin.Forms.PlatformConfiguration.iOS>().SetUseSafeArea(true);
- }
- }
- }
点击(此处)折叠或打开
- ?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:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
- ios:Page.UseSafeArea="true" >
在iOS 11及更高版本中,Apple定义的安全区域边界将用于为页面布局的内容设置填充。 请注意,这将覆盖您之前可能设置的填充值。 在需要的每个页面上启用此特定平台。
Xamarin.Forms为插入值提供了一些合理的默认值,但是如果你想要更精细的控制,你应该在构造函数中自己设置填充,或者从SafeAreaInsets()中检索厚度值,并调整值以设置视图的填充满足 您在OnAppearing方法中的需求。
点击(此处)折叠或打开
- protected override void OnAppearing()
- {
- base.OnAppearing();
-
- var safeInsets = OnXamarin.Forms.PlatformConfiguration.iOS>().SafeAreaInsets();
- safeInsets.Left = 24;
- this.Padding = safeInsets;
- }
大标题
部分新的iOS 11更新支持在导航栏中显示更大的标题显示。 与安全区域一样,您现在可以使用特定平台来选择此视觉设计模式。 启用时,通常出现在导航栏中央的标题将显示为左对齐,当然也会更大。 横向标题将返回到中心,以优化内容可见的视图。
第一步是在NavigationPage或ContentPage上设置标题首选项。
点击(此处)折叠或打开
- OnXamarin.Forms.PlatformConfiguration.iOS>().SetPrefersLargeTitles(true);
现在,该导航页面中的所有页面都将显示较大的标题。 要在ContentPage级别上进行控制,您可以在此设置首选项。 在这个片段中,首选项设置为从不使用大标题:
点击(此处)折叠或打开
- public partial class ItemsPage : ContentPage
- {
- public ItemsPage()
- {
- InitializeComponent();
- OnXamarin.Forms.PlatformConfiguration.iOS>().SetLargeTitleDisplay(LargeTitleDisplayMode.Never);
- }
- ...
- }
SetLargeTitleDisplay方法有三个选项:
- 总是
- 自动
- 决不
永远不会清楚。 “自动”是默认值,意味着行为从导航堆栈中的上一页继承。
网络预览今天可用
这些特定平台可以通过网络预览来使用。 访问我们的GitHub发布页面来下载NuGet包。 我们正在积极测试这些新平台的具体内容并提供反馈。 如果没有必要进行更改,我们会像NuGet一样推广这个版本。