深入探讨 NativeScript UI 的侧边抽屉

在规划移动应用程序时，您什么时候开始考虑用户界面？您是否已经制定了计划和设计，不仅要构建一个强大的应用程序，还要构建一个让客户感到愉悦和参与的应用程序？

近 15 年来，Telerik UI 组件已被数百万开发者使用。从 .NET 到 JavaScript，从 Xamarin 到 PHP，Telerik UI 组件让您能够构建引人入胜的应用程序，并帮助您成为更高效的开发者。

这些出色工具的下一步是什么？当然就是 NativeScript UI！借助 NativeScript UI，我们正在延续 Telerik 的传统，提供易于使用的组件，让开发者体验使用便利，同时凭借其引人入胜的功能让终端用户感到愉悦。

这篇文章是我们的“NativeScript UI 周”的一部分，深入探讨了每个 NativeScript UI 组件的“如何操作”。今天我们将介绍侧边抽屉组件，随着时间的推移，您可以看到其他 NativeScript UI 组件的“深入探讨”。

什么是 NativeScript UI？

NativeScript UI 是一套适用于使用 NativeScript 框架编写的原生跨平台移动应用程序的优质 UI 组件。我们的目标是通过提供预构建、即用型且易于在您的应用程序中实施的组件（并且同样易于样式化以匹配您的应用程序的外观和感觉）来简化 NativeScript 应用程序开发。

让我们开始学习侧边抽屉组件的所有知识！

侧边抽屉（也称为 RadSideDrawer）

您发现自己有一个移动应用程序，其页面和内容超出了单屏所能容纳的范围。或者，您可能希望有一种简单的方法来公开单个页面的选项集。无论您是在寻找导航解决方案还是一种流畅的方式来显示内联菜单，RadSideDrawer 都可以提供帮助。

radsidedrawer example

借助 RadSideDrawer，您可以指定抽屉组件的位置（例如，它从顶部、底部、左侧或右侧出现？）。您还可以为抽屉的外观指定各种过渡效果，并以编程方式控制其外观。

安装 NativeScript UI 的侧边抽屉

导航到您的 NativeScript 项目目录，并使用以下命令安装 NativeScript UI SideDrawer（无需手动下载）。

tns plugin add nativescript-ui-sidedrawer

开始使用 RadSideDrawer

请注意，此处演示的所有代码都可以在此 GitHub 存储库中找到。有关更多代码示例，请查看官方 NativeScript UI 示例存储库。

插件安装完毕？太好了！现在，我们需要在要使用 RadSideDrawer 的页面的根目录添加一个 XML 命名空间。如果您对“XML 命名空间”感到恐惧，请不要担心。您只需向根 <Page> 元素添加一个属性，如下所示。

<Page xmlns:sd="nativescript-ui-sidedrawer">

最后，我们需要将 RadSideDrawer 组件添加到我们的 XML 标记中，如下所示。

<Page xmlns:sd="nativescript-ui-sidedrawer">
    <sd:RadSideDrawer>
    </sd:RadSideDrawer>
</Page>

显然，这段代码不会执行太多操作，但它确实为我们提供了今后可以构建的基础。

创建一个简单的侧边抽屉

让我们构建一个简单的 RadSideDrawer，我们可以将其用于导航目的。我们可以从 UI 的以下标记开始。

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:sd="nativescript-ui-sidedrawer" loaded="pageLoaded">

    <ActionBar title="RadSideDrawer Demo" class="action-bar" />

    <sd:RadSideDrawer id="sideDrawer">

        <!-- side drawer content -->
        <sd:RadSideDrawer.drawerContent>
            <StackLayout class="sidedrawer-left">
                <StackLayout class="sidedrawer-header">
                    <Label text="Hello RadSideDrawer!" class="sidedrawer-header-brand" />
                </StackLayout>
                <StackLayout class="sidedrawer-content">
                    <Label text="Home" class="sidedrawer-list-item-text" />
                    <Label text="Basics" class="sidedrawer-list-item-text" />
                    <Label text="Options" class="sidedrawer-list-item-text" />
                    <Label text="Help" class="sidedrawer-list-item-text" />
                    <Label text="Advanced" class="sidedrawer-list-item-text" />
                </StackLayout>
            </StackLayout>
        </sd:RadSideDrawer.drawerContent>

        <!-- The main content -->
        <sd:RadSideDrawer.mainContent>
            <StackLayout>
                <Button text="Toggle Drawer" class="btn btn-primary" tap="toggleDrawer" />
            </StackLayout>
        </sd:RadSideDrawer.mainContent>

    </sd:RadSideDrawer>

</Page>

好的，我知道我刚刚向您扔了很多东西，但请耐心听我说完，我认为您很快就能弄清楚发生了什么。

我们在 loaded 事件中添加了一个 pageLoaded 函数（见下文）。
我们插入了一个 ActionBar 来在视图中显示标题。
我们添加了 <sd:RadSideDrawer.drawerContent> 元素，我们的 **侧边抽屉** 的内容将出现在这里。
我们添加了 <sd:RadSideDrawer.mainContent> 元素，我们的 **主视图** 的内容将出现在这里。

接下来，我们需要一点点代码背后的 JavaScript 来使其正常运行。

var view = require("ui/core/view");
var drawer;

exports.pageLoaded = function(args) {
    var page = args.object;
    drawer = view.getViewById(page, "sideDrawer");
};

exports.toggleDrawer = function() {
    drawer.toggleDrawerState();
};

正在寻找 Angular 代码示例？请查看我们的 Angular 完整文档！

这里没什么特别的。重要的是我们定义了 toggleDrawer 函数，它允许我们从主视图中指定的按钮隐藏/显示抽屉。

所有这些都将产生以下结果。

您可以使用按钮打开抽屉，也可以直接从左侧滑动到右侧。

请注意，您看到的样式来自 NativeScript 中的核心浅色主题，以及使用 NativeScript 主题构建器进行的一些自定义。

更改 RadSideDrawer 的位置

使用 RadSideDrawer 进行导航很棒，但如果您想使用它来公开例如设置菜单怎么办？

借助 RadSideDrawer，您可以指定抽屉的位置。无论您希望它从顶部、左侧（默认）、底部或右侧出现。

为此，您只需使用 drawerLocation 属性，如下所示。

<sd:RadSideDrawer id="sideDrawer" drawerLocation="Bottom">

通过循环遍历顶部、右侧、底部和左侧选项（以及一些视频编辑技巧！），我们可以看到抽屉在每个位置的外观，以及我们上面使用的相同内容。

如果您希望 RadSideDrawer 滑过您的操作栏，请按照我们的文档中提供的说明操作。

添加 RadSideDrawer 过渡效果

正如您现在所看到的那样，公开 RadSideDrawer 的默认过渡效果是将其滑过主内容。不过，还有各种各样的其他过渡选项。

淡入淡出过渡效果
推入过渡效果
揭示过渡效果
反向滑动退出过渡效果
缩小推入过渡效果
放大过渡效果
沿滑动过渡效果
顶部滑动过渡效果

您可以随意尝试所有这些过渡效果，只需添加 drawerTransition 属性，如下所示。

<sd:RadSideDrawer id="sideDrawer" drawerTransition="PushTransition">

从操作栏打开 RadSideDrawer

现在，在按钮点击时显示 RadSideDrawer 很好，但更现实的是，您希望从操作栏上的一个小图标公开它。

您可以通过 **多种** 不同的方式将图标添加到操作栏中。

自定义字体（如 Font Awesome）
系统图标（见下文）
图像

在本示例中，我们使用的是内置系统图标。只需将我们现有的 ActionBar 元素替换为以下内容即可。

<ActionBar title="RadSideDrawer Demo" class="action-bar">
    <ActionItem tap="toggleDrawer" ios.systemIcon="4" android.systemIcon="ic_menu_btn_add" ios.position="left" />
</ActionBar>

您可以看到在文档中针对 iOS 和 Android 引用的 systemIcon 属性。

跨页面共享 RadSideDrawer

到目前为止，我们已经设置了仅在一个页面上使用 RadSideDrawer。如果您使用抽屉进行导航，很有可能您 **不想** 在应用程序的每个页面上复制此代码！

幸运的是，通过使用 NativeScript 自定义组件，很容易在多个页面上共享一个 RadSideDrawer。

自定义组件允许我们指定一组可以在页面之间共享的标记。这需要对我们的应用程序进行两个快速更改。

1) 当前在 <sd:RadSideDrawer.drawerContent> 元素中的所有内容都应移到 app/shared/sidedrawer.xml 中的新文件中。

2) 向您的 drawerContent 添加一个新的 <customControls:sidedrawer /> 元素。现在，您的新 <sd:RadSideDrawer.drawerContent> 应如下所示。

<sd:RadSideDrawer.drawerContent>
    <customControls:sidedrawer />
</sd:RadSideDrawer.drawerContent>

3) 在顶部的 Page 元素中添加 xmlns:customControls="shared"。

在使用 RadSideDrawer 的任何页面上重复此操作！

虽然应用程序导航超出了本文的范围，但您可以阅读 NativeScript 文档并详细了解页面之间的导航。

还有其他吗？

**当然！** RadSideDrawer 公开了您可以利用的各种各样的事件，并提供对抽屉操作的纯粹编程控制。