返回

Material Design指南（一）：了解ToolBar

Android

掌控 Material Design 的秘密武器：ToolBar

作为应用程序开发人员，我们始终致力于创建用户友好且赏心悦目的界面。Material Design 的 ToolBar 正是实现这一目标的利器，它在导航、操作和品牌展示方面发挥着至关重要的作用。在这篇博文中，我们将深入探讨 ToolBar 的奥秘，帮助你驾驭这一强大的元素。

ToolBar 的基本原理

ToolBar 是位于应用程序屏幕顶部的条形区域，它承载着应用程序的标题、导航选项和各种操作。ToolBar 通过提供一个一致且易于访问的界面，帮助用户顺畅地浏览应用程序。

定制 ToolBar 的外观

通过指定主题样式，你可以定制 ToolBar 的外观。在 V7 包中，colorPrimary、colorPrimaryDark 和 colorAccent 属性可用于修改主题。利用这些属性，你可以创建与应用程序其余部分相得益彰的视觉风格。

导航模式

ToolBar 支持两种导航模式，它们适用于不同类型的应用程序：

  • 抽屉模式： 适用于拥有大量导航选项的大型应用程序。它在 ToolBar 上显示一个菜单图标，单击该图标后会打开一个抽屉，显示导航选项。
  • 标签模式： 适用于具有几个主要部分的简单应用程序。它在 ToolBar 上显示一组选项卡，用户可以通过点击选项卡在不同界面之间导航。

其他功能

除了导航，ToolBar 还支持以下功能，为你的应用程序增添更多灵活性：

  • 操作： 在 ToolBar 上添加按钮或图标以执行操作，例如搜索、共享或刷新。
  • 徽章： 在 ToolBar 上的项目上显示徽章，以指示通知、新消息或其他状态。

最佳实践

在使用 ToolBar 时，遵循以下最佳实践将帮助你创建一致且用户友好的体验：

  • 保持简洁： ToolBar 应该清晰明了，只显示必不可少的导航选项和操作。
  • 使用清晰的图标： 使用易于理解的图标来表示导航选项和操作。
  • 提供一致性： 在整个应用程序中保持 ToolBar 的一致性，以便用户轻松识别和使用它。
  • 测试响应性： 确保 ToolBar 在不同设备和屏幕尺寸上都具有响应性。

实例

假设我们正在构建一个新闻阅读应用程序。我们可以使用 ToolBar 来显示应用程序标题、导航到不同新闻类别以及执行搜索操作。

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.ActionBar">

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="新闻"
        android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title" />

    <android.support.v7.widget.SearchView
        android:id="@+id/toolbar_search"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp" />

</android.support.v7.widget.Toolbar>

结论

ToolBar 是 Material Design 中一个不可或缺的元素，它将导航、操作和品牌信息无缝地融合在一起。通过了解其基本原理、定制选项和最佳实践，你可以充分利用 ToolBar 的强大功能，创建出色的移动应用程序。

常见问题解答

  1. 我可以隐藏 ToolBar 吗？

    • 是的，你可以通过将 android:visibility 属性设置为 gone 或 invisible 来隐藏 ToolBar。

  2. 如何在 ToolBar 中添加自定义视图？

    • 可以通过调用 addView() 方法在 ToolBar 中添加自定义视图。

  3. ToolBar 可以设置多个导航模式吗？

    • 不，ToolBar 只能设置一种导航模式（抽屉模式或标签模式）。

  4. 徽章有什么用途？

    • 徽章用于指示通知、新消息或其他状态，它们可以放置在 ToolBar 上的项目上。

  5. 如何为 ToolBar 添加阴影？

    • 可以通过在 ToolBar 的背景中添加一个 elevation 属性来为 ToolBar 添加阴影。