Android Material Design 之 Toolbar 详解

阅读时长 9 分钟读完

随着 Android 设备的大量普及和用户需求的日益增加,谷歌推出了 Android Material Design 设计语言,提供了更加现代化和更加符合人们习惯的用户界面设计。其中 Toolbar 组件是 Material Design 中的一个重要组件,本文将对其进行详细的介绍和讲解。

一、Toolbar 的概念及作用

Toolbar 是一种替代传统 Action Bar 的供给普通应用程序使用的视觉和结构模式,第一次推出是在 Android 5.0 中。它位于应用程序顶部,用于显示应用程序标题、常用操作、搜索框、菜单等等。Toolbar 是一个可定制的、可以完全替代 Action Bar 的组件。

Toolbar 旨在实现独立于特定 Activity 的 UI 组件,这使得开发者可以在一个应用程序中复用它们。因此,Toolbar 实现了一个应用由多个 Activity 可以使用相同的 Toolbar 来代替每个 Activity 都有一个Action Bar。

二、Toolbar 的布局和使用

1、在 XML 中定义 Toolbar

在 XML 中定义 Toolbar 可以使用 android.support.v7.widget.Toolbar,其中 app:theme 属性是设置 Toolbar 所使用的样式。下面是 Toolbar 的基本定义:

其中常用的属性如下:

  • app:title:Toolbar 的标题
  • app:logo:Toolbar 左边 Logo 图片,一般和 NavigationIcon 互斥
  • app:navigationIcon:Toolbar 左边返回按钮,一般和 logo 图片互斥
  • app:menu:Toolbar 右边的自定义菜单,可以通过代码动态修改
  • app:theme:Toolbar 使用的主题

2、在 Activity 中使用 Toolbar

默认情况下,Activity 不会直接使用 Toolbar,需要对其进行初始化。在 Activity 中使用如下代码:

其中 setSupportActionBar() 可以接受子类或父类对象作为参数,而不是只能接受 ActionBar 对象。这个方法的主要作用是设置 Toolbar 代替原先的 ActionBar,并将 Toolbar 的标题、菜单等信息传递给 Activity。

3、添加 Toolbar 的事件

为了响应 Toolbar 的事件,比如点击菜单项的事件,需要在 Activity 中重载相应的方法。Toolbar 相关的回调方法为:

-- -------------------- ---- -------
---------
------ ------- ------------------------ ----- -
    ------------------------------------------- ------
    ------ --------------------------------
-

---------
------ ------- ------------------------------ ----- -
    ------ -------------------

        ---- ------------------
            -------------------- ------ --------- ---------------------------
            ------ -----

        ---- ---------------------
            -------------------- --------- --------- ---------------------------
            ------ -----

        --------
            ------ ----------------------------------
    -
-

以上代码通过重写 onCreateOptionsMenu() 方法添加 Toolbar 右侧的菜单项,并通过重写 onOptionsItemSelected() 方法响应菜单项的点击事件。

三、Toolbar 的样式与主题

Toolbar 可以通过设置主题,来修改整体的样式,从而符合应用的设计风格。具体实现方式是在应用主题中指定 toolbarStyle 属性,然后创建自定义样式文件,覆盖 toolbarStyle 属性所指向的样式文件中的设置。例如:

-- -------------------- ---- -------
------ --------------- ---------------------------------------------
    ---- --------- ---- ----- ----- ---
    ----- ----------------------------------------------
    ----- ------------------------------------------------------
    ----- --------------------------------------------
    ----- -------------------------------------------------------
--------

------ ---------------------------- ----------------------------------
    ----- ----------------------------------------------------
    ----- ---------------------------------------------------------
--------

以上代码将 toolbarStyle 属性设置为 AppTheme.ToolbarStyle,并在 AppTheme.ToolbarStyle 中修改了 Toolbar 的背景色和标题字体颜色。

四、Toolbar 的完整示例代码

-- -------------------- ---- -------
--------------- ----------------------------------------------------------
    ---------------------------------------------------
    -----------------------------------
    -------------------------------------

    ----------------------------------
        -------------------------
        -----------------------------------
        ---------------------------------------------------
        ------------------ ------
        ----------------------------------------
        --------------------------
        -------------------------------------------------------- --

    ---------
        ----------------------------------
        -----------------------------------
        ------------------------------------
        ------------------- ----------

-----------------
-- -------------------- ---- -------
---------
------ ------- ------------------------ ----- -
    ------------------------------------------- ------
    ------ -----
-

---------
------ ------- ------------------------------ ----- -
    ------ -------------------

        ---- ------------------
            -------------------- ------ --------- ---------------------------
            ------ -----

        ---- ---------------------
            -------------------- --------- --------- ---------------------------
            ------ -----

        --------
            ------ ----------------------------------
    -
-

五、总结

本文对 Android Material Design 中的重要组件 Toolbar 进行了详细的介绍和讲解,并提供了相应的示例代码。开发者可以通过学习本文,更好地掌握 Toolbar 组件的使用方法和实现原理,在开发 Android 应用时可以更快速地设计和实现符合 Material Design 风格的用户界面效果。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/654f146e7d4982a6eb81a4a5

纠错
反馈