随着 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 的基本定义:
<android.support.v7.widget.Toolbar android:id="@+id/toolBar" android:layout_width="match_parent" android:layout_height="?android:attr/actionBarSize" app:title="Toolbar Title" app:navigationIcon="@mipmap/ic_launcher" app:menu="@menu/menu_main" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
其中常用的属性如下:
app:title
:Toolbar 的标题app:logo
:Toolbar 左边 Logo 图片,一般和 NavigationIcon 互斥app:navigationIcon
:Toolbar 左边返回按钮,一般和 logo 图片互斥app:menu
:Toolbar 右边的自定义菜单,可以通过代码动态修改app:theme
:Toolbar 使用的主题
2、在 Activity 中使用 Toolbar
默认情况下,Activity 不会直接使用 Toolbar,需要对其进行初始化。在 Activity 中使用如下代码:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolBar); setSupportActionBar(toolbar);
其中 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 的完整示例代码
-- -------------------- ---- ------- --------------- ---------------------------------------------------------- --------------------------------------------------- ----------------------------------- ------------------------------------- ---------------------------------- ------------------------- ----------------------------------- --------------------------------------------------- ------------------ ------ ---------------------------------------- -------------------------- -------------------------------------------------------- -- --------- ---------------------------------- ----------------------------------- ------------------------------------ ------------------- ---------- -----------------
Toolbar toolbar = (Toolbar) findViewById(R.id.toolBar); setSupportActionBar(toolbar);
-- -------------------- ---- ------- --------- ------ ------- ------------------------ ----- - ------------------------------------------- ------ ------ ----- - --------- ------ ------- ------------------------------ ----- - ------ ------------------- ---- ------------------ -------------------- ------ --------- --------------------------- ------ ----- ---- --------------------- -------------------- --------- --------- --------------------------- ------ ----- -------- ------ ---------------------------------- - -
五、总结
本文对 Android Material Design 中的重要组件 Toolbar 进行了详细的介绍和讲解,并提供了相应的示例代码。开发者可以通过学习本文,更好地掌握 Toolbar 组件的使用方法和实现原理,在开发 Android 应用时可以更快速地设计和实现符合 Material Design 风格的用户界面效果。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/654f146e7d4982a6eb81a4a5