Material Design 工具栏的 Appcompat 抽象类详解

阅读时长 8 分钟读完

Material Design 是 Google 开发的一种视觉设计语言,可以为开发者提供统一的 UI 设计风格,使产品更具有现代感。其中,工具栏(Toolbar)是 Material Design 中非常重要的组件之一,它可以为用户提供快速访问应用程序不同功能的入口。

在 Android 开发中,为了实现 Material Design 的工具栏,我们经常会使用 Appcompat 库的抽象类。这篇文章将详细讲解 Material Design 工具栏的 Appcompat 抽象类,并提供案例和指导意义。

Appcompat 抽象类简介

Appcompat 是 Android Support Library 中的一部分,它为旧版本的 Android 系统提供了更新版本的功能和 UI 组件。其中,Appcompat 抽象类可以让开发者在 API 7+ 的 Android 设备上实现 Material Design 的工具栏。

在使用 Appcompat 抽象类时,开发者需要使用 AppCompatActivity 替代 Activity,使用 Toolbar 替代 ActionBar,从而实现 Material Design 的工具栏。

工具栏的使用方法

1.在布局文件中添加工具栏组件

首先,在布局文件中添加 Toolbar 组件。示例代码如下:

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

2.在 Activity 中进行设置

接着,在 Activity 中进行设置。由于是使用 Appcompat 抽象类,我们需要继承 AppCompatActivity 类。示例代码如下:

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

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

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

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

此时,我们已经成功地在 MainActivity 中添加了工具栏组件。

工具栏的样式设置

在工具栏中,我们可以通过设置样式来实现不同的效果。下面我们来介绍应用样式、字体以及菜单的设置。

1.应用样式的设置

在使用工具栏时,我们可以通过设置应用样式(如设置背景颜色和工具栏的高度)来自定义工具栏的外观和触摸。

在 styles.xml 文件中声明样式:

然后在 MainActivity 中的 onCreate 方法中加载样式:

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

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

2.字体的设置

当切换不同语言或者在使用不同字体的情况下,我们需要为工具栏设置字体。这个时候,我们可以使用 Calligraphy 库,然后在 on Post Resume 方法中实现字体的设置:

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

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

需要注意的是,需要在 Activity 的 onCreate 方法中启用 Calligraphy,并且将字体样式放在 res/fonts/ 文件夹中。

3.菜单的设置

我们可以在工具栏中设置菜单按钮。以 onCreateOptionsMenu 方法来添加菜单:

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

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

这样,在工具栏中就会显示菜单按钮。

工具栏的常用方法

在工具栏中,我们常常需要用到 setNavigationIcon 和 setLogo 方法来设置左侧图标和应用的 logo:

同时,还可以用 setTitle 和 setSubtitle 来设置工具栏的标题和副标题:

结论

本文中,我们先通过布局文件添加了工具栏组件,然后使用 Appcompat 抽象类实现了 Material Design 的工具栏。接着,我们分别介绍了应用样式、字体以及菜单的设置,并且展示了工具栏的常见方法。

尽管本文从技术层面上深度解析了 Material Design 工具栏的 Appcompat 抽象类,但是,想要熟练地使用这些方法还需要不断实践和探索。

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

纠错
反馈