Material Design 中如何使用 Toolbar 控件的详细解释-FunTeaLearn Online Web Tutorials

在 Android 应用中，Toolbar 控件是一个非常重要的界面元素。而在 Google 提出的 Material Design 设计体系中，Toolbar 控件更是作为整个应用的主要导航元素。

本文将介绍在 Material Design 中如何使用 Toolbar 控件，以及一些实用的技巧和注意事项。

Toolbar 控件的基本使用

布局文件

在布局文件中定义 Toolbar 控件非常简单，只需使用 <androidx.appcompat.widget.Toolbar> 标签即可。例如：

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:title="My Toolbar" />

其中，android:id 属性可以用于在代码中引用 Toolbar 控件，android:layout_height="?attr/actionBarSize" 属性则表示 Toolbar 控件的高度为当前主题下 ActionBar 的高度。

设置为 ActionBar

在 Activity 中使用 Toolbar 控件需要将其设置为 ActionBar，这可以通过 setSupportActionBar() 方法来实现。示例如下：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    // 设置 Toolbar 为 ActionBar
    setSupportActionBar(toolbar)
}

这里的 toolbar 为在布局文件中定义的 Toolbar 控件。

这样，在应用中就可以使用 getSupportActionBar() 方法来获取 ActionBar 对象，从而对 Toolbar 控件进行进一步的调用。

修改样式和行为

Toolbar 控件的样式和行为可以通过修改主题和设置菜单等方式来实现。

修改主题样式

在主题中通过修改 android:toolbarStyle 属性来修改 Toolbar 控件样式。例如：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 修改 Toolbar 控件样式 -->
    <item name="toolbarStyle">@style/ToolbarStyle</item>
</style>

<style name="ToolbarStyle" parent="Widget.AppCompat.Toolbar">
    <item name="android:background">#2196f3</item>
</style>

这里的 ToolbarStyle 可以自定义为任何想要的样式，这里仅作为示例。

设置菜单

Toolbar 控件可以使用 OptionsMenu 来存储并管理菜单。可以使用 onCreateOptionsMenu() 和 onOptionsItemSelected() 方法来实现菜单的创建和点击监听。例如：

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

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

这里菜单的资源文件定义在 menu/menu_main.xml 中，例如：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_settings"
        android:title="Settings"
        android:icon="@drawable/ic_settings"
        android:showAsAction="always" />
</menu>

显示导航按钮

Toolbar 控件可以显示一个导航按钮，通过 setHomeAsUpIndicator() 和 setDisplayHomeAsUpEnabled() 方法来设置导航按钮图标和显示。例如：

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

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

这里的 ic_menu 为导航按钮的图标资源文件。

自定义 Toolbar 控件

如果需要实现更加复杂的 Toolbar 控件，可以通过继承自 Toolbar 控件来实现。

例如，下面的代码实现了一个带有标题和描述的自定义 Toolbar 控件：

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

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

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

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

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

-

这里定义了一个 MyToolbar 类，继承自系统自带的 Toolbar 控件。通过重写 init() 方法，将自定义布局文件 toolbar_my.xml 中的 TextView 控件实例化并引用。

使用方式与系统自带的 Toolbar 控件相同，只不过调用的是 MyToolbar 类的方法。例如：

<com.example.myapplication.MyToolbar
    android:id="@+id/my_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:title="My Toolbar" />

总结

本文介绍了在 Material Design 中如何使用 Toolbar 控件，包括基本用法和自定义用法，并提供了示例代码。要实现更加复杂的 Toolbar 控件，开发者可以通过继承自 Toolbar 控件来实现。

在实际应用中，Toolbar 控件是一个非常重要的界面元素，它不仅可以作为导航元素，还可以用于显示应用的标题、菜单等信息。因此，掌握 Toolbar 控件的使用方法对于开发者来说至关重要。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/65235b7695b1f8cacdac5d20

Material Design 中如何使用 Toolbar 控件的详细解释