第二十四章:页面导航(二)

简介: 动画页面过渡您看到的所有四种方法都可以使用具有bool类型的附加参数的重载:Task PushAsync(Page page, bool animated)Task PushModalAsync(Page page, bool animated)Task<Page> PopAsync(bool animated)Task<Page> PopModalAsync(bool animated)如果底层平台支持此类动画,则将此参数设置为true将启用页面过渡动画。

动画页面过渡
您看到的所有四种方法都可以使用具有bool类型的附加参数的重载:

Task PushAsync(Page page, bool animated)
Task PushModalAsync(Page page, bool animated)
Task<Page> PopAsync(bool animated)
Task<Page> PopModalAsync(bool animated)

如果底层平台支持此类动画,则将此参数设置为true将启用页面过渡动画。 但是,更简单的Push和Pop方法默认启用此动画,因此如果要抑制动画,则只需要这四个重载,在这种情况下,将Boolean参数设置为false。
在本章结束时,您将看到一些代码,用于在多页应用程序终止时保存和恢复整个页面导航堆栈。 要恢复导航堆栈,必须在程序启动期间创建并导航到这些页面。 在这种情况下,应该抑制动画,并且这些重载对此非常方便。
如果您提供自己的页面入口动画,则还需要抑制动画,如第22章“动画”中所示。
但是,一般情况下,您需要使用Push和Pop方法的简单形式。
视觉和功能变化
NavigationPage定义了几个属性和几个附加的可绑定属性 - 它们可以更改导航栏的外观,甚至可以完全消除它。
在App类中实例化NavigationPage时,可以设置BarBackgroundColor和BarTextColor属性。 在ModalAndModeless程序中尝试这个:

public class App : Application
{
    public App()
    {
        MainPage = new NavigationPage(new MainPage())
        {
            BarBackgroundColor = Color.Blue,
            BarTextColor = Color.Pink
        };
    }
}

各种平台以不同的方式使用这些颜色。 iOS导航栏受两种颜色的影响,但在Android屏幕上,仅显示背景颜色。 所有这些屏幕截图都显示了ModelessPage,但MainPage的顶部区域以相同的方式着色:
2019_04_14_151150
平板电脑模式下的Windows 10应用程序与Windows 10 Mobile屏幕非常相似:
2019_04_14_151234
另外两个Windows运行时平台也使用BarTextColor,Windows 8.1页面也使用BarBackgroundColor:
2019_04_14_151338
NavigationPage类还定义了一个Tint属性,但该属性已被弃用,应该被认为是过时的。
NavigationPage还定义了四个附加的可绑定属性,这些属性会影响它们所在的特定Page类。 例如,假设您不希望“返回”按钮出现在无模式页面上。 以下是在ModelessPage构造函数中的代码中设置NavigationPage.HasBackButton附加可绑定属性的方法:

public class ModelessPage : ContentPage
{
    public ModelessPage()
    {
        Title = "Modeless Page";
        NavigationPage.SetHasBackButton(this, false);
        __
    }
}

在XAML中,您可以这样做:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ModelessAndModal.ModelessPage"
             Title="Modeless Page"
             NavigationPage.HasBackButton="False">
    __
</ContentPage>

当然,当您导航到ModelessPage时,导航栏中的“后退”按钮消失了:
2019_04_14_151710
但是,Windows 10上仍然存在功能性“后退”按钮:
2019_04_14_151816
后退按钮也从Windows 8.1屏幕消失:
2019_04_14_151918
NavigationPage的一个更极端附加的可绑定属性完全消除了导航栏,并使页面在视觉上与模态页面无法区分:

public class ModelessPage : ContentPage
{
    public ModelessPage()
    {
        Title = "Modeless Page";
        NavigationPage.SetHasNavigationBar(this, false);
        __
    }
}

另外两个附加的可绑定属性会影响导航栏中的文本和图标。 如您所见,所有平台都在主页面顶部显示Title属性和无模式页面。 但是,在无模式页面上,iOS屏幕还会显示上一页的标题属性 - 您导航到无模式页面的页面。 NavigationPage.BackButtonTitle附加的可绑定属性可以更改iOS页面上的该文本。 您需要在导航到无模式页面的页面上进行设置。 在ModelessAndModal程序中,您可以在MainPage上设置属性,如下所示:

public class MainPage : ContentPage
{
    public MainPage()
    {
        Title = "Main Page";
        NavigationPage.SetBackButtonTitle(this, "go back");
        __
    }
}

这不会影响MainPage本身的标题,只会影响ModelessPage导航栏上的Back按钮附带的文本,然后仅影响iOS。你很快就会看到截图。
第二个附加的可绑定属性是NavigationPage.TitleIcon,它替换Android导航栏上的应用程序图标,并用iOS页面上的图标替换标题。该属性的类型为FileImageSource,它引用平台项目中的位图文件。在使用中,它类似于MenuItem和ToolbarItem的Icon属性。
为了让您体验这一点,我们在ModelessAndModal解决方案中为iOS和Android项目添加了一些合适的图标。这些图标来自第13章“位图”中讨论的Android Action Bar Icon Pack。(在第13章中,查找“特定于平台的位图”部分,然后是“工具栏及其图标”,最后是“Android的图标” “。)
对于iOS,图标来自ActionBarIcons / holo_light / 08_camera_flash_on目录。这些图标显示闪电。 mdpi,xdpi和xxdpi目录中的图像分别为32,64和96像素的正方形。在iOS项目的Resources文件夹中,32像素方形位图的原始名称为ic_action_flash_on.png,两个较大的文件分别使用@ 2和@ 3后缀重命名。
对于Android,图标来自ActionBarIcons / holo_dark / 08_camera_flash_on目录;这些是透明背景上的白色前景。 mdpi,hdpi,xdpi和xxdpi目录中的文件已添加到Android项目中。
您可以通过将以下代码添加到ModelessPage构造函数来在无模式页面上显示这些图标:

public class ModelessPage : ContentPage
{
    public ModelessPage()
    {
        Title = "Modeless Page";
        if (Device.OS == TargetPlatform.iOS || Device.OS == TargetPlatform.Android)
            NavigationPage.SetTitleIcon(this, "ic_action_flash_on.png");
        __
    }
}

这是ModelessPage,在MainPage上设置了“返回”的备用后退按钮文本,在ModelessPage上设置了图标:
2019_04_14_152817
如您所见,该图标取代了iOS页面上的普通标题文本。
NavigationPage.BackButtonTitle和NavigationPage.TitleIcon附加的可绑定属性都不会影响任何Windows或Windows Phone平台。
熟悉Android架构的程序员有时会对Xamarin.Forms页面导航如何与Android应用程序架构(称为活动)的方面进行集成感到好奇。 一个
在Android设备上运行的Xamarin.Forms应用程序仅包含一个活动,并且页面导航基于此构建。 ContentPage是一个Xamarin.Forms对象; 它不是Android活动,也不是活动的片段。

目录
相关文章
|
6月前
|
小程序
【微信小程序】-- 页面导航 -- 编程式导航(二十三)
【微信小程序】-- 页面导航 -- 编程式导航(二十三)
|
6月前
|
小程序 API
【微信小程序】-- 页面导航 -- 声明式导航(二十二)
【微信小程序】-- 页面导航 -- 声明式导航(二十二)
|
小程序 JavaScript
微信小程序模仿分类导航实现多个tab 页
微信小程序模仿分类导航实现多个tab 页
65 0
|
Android开发 索引 iOS开发
第二十四章:页面导航(十七)
像现实生活中的应用程序理想情况下,用户在终止并重新启动应用程序时不应该知道。应用程序体验应该是连续且无缝的。即使程序没有一直运行,一个半月进入的条目从未完成也应该在一周后处于相同的状态。NoteTaker程序允许用户记录由标题和一些文本组成的注释。
545 0
|
JavaScript 前端开发 Android开发
第二十四章:页面导航(十六)
保存和恢复导航堆栈 许多多页面应用程序的页面体系结构比DataTransfer6更复杂,您需要一种通用的方法来保存和恢复整个导航堆栈。此外,您可能希望将导航堆栈的保存与系统方式集成,以保存和恢复每个页面的状态,特别是如果您不使用MVVM。
494 0
|
XML JSON Android开发
第二十四章:页面导航(十五)
保存和恢复页面状态特别是当您开始使用多页面应用程序时,将应用程序的页面视为数据的主要存储库非常有用,而仅仅是作为底层数据的临时可视化和交互式视图。这里的关键词是暂时的。如果您在用户与之交互时保持基础数据是最新的,那么页面可以显示和消失而不必担心。
651 0
|
JavaScript Android开发
第二十四章:页面导航(十四)
切换到ViewModel此时应该很明显,Information类应该真正实现INotifyPropertyChanged。 在DataTransfer5中,Information类已成为InformationViewModel类。
603 0
|
JavaScript Android开发 索引
第二十四章:页面导航(十)
属性和方法调用调用PushAsync或PushModalAsync的页面显然可以直接访问它导航到的类,因此它可以设置属性或调用该页面对象中的方法以将信息传递给它。但是,调用PopAsync或PopModalAsync的页面还有一些工作要做,以确定它返回的页面。
550 0
|
JavaScript Android开发
第二十四章:页面导航(九)
数据传输模式 多页面应用程序中的页面通常需要共享数据,特别是一页面将信息传递到另一页面。 有时此过程类似于函数调用:当HomePage显示项目列表并导航到DetailPage以显示其中一个项目的详细视图时,HomePage必须将该特定项目传递给DetailPage。
631 0
|
Android开发
第二十四章:页面导航(八)
动态页面生成BuildAPage程序是一个多页面应用程序,但BuildAPage项目只包含一个名为BuildAPageHomePage的页面类。 顾名思义,该程序从代码构造一个新页面,然后导航到它。XAML文件允许您在此构造的页面上指定所需内容: <ContentPage xmlns="http://xamarin.
671 0