简介
AppBarLayout 和 ToolBar 是 Material Design 中重要的 UI 控件，两者经常一起使用来实现一个 Material Design 风格的顶部导航栏。AppBarLayout 是布局容器，可以根据内部内容的滚动状态动态地调整 ToolBar 的大小和位置；而 ToolBar 是一个视图组件，它提供了一个常见的工具栏布局，包括标题和菜单按钮。
本文将介绍如何使用 AppBarLayout 和 ToolBar 来构建一个 Material Design 风格的顶部导航栏，包括如何设置标题和菜单按钮，如何响应菜单按钮点击事件，以及如何优化滚动交互效果等内容。
创建 AppBarLayout 和 ToolBar
在布局文件中添加 AppBarLayout 和 ToolBar：
----- ------------- ------------------
----------------------------------------------------
-----------------------------------
-------------------------------------
------------------------------------------------
-----------------------------------
-------------------------------------
---------------------------------------------------
-------------------------
-----------------------------------
------------------------------------------- --
--------------------------------------------------
---- ----- --- ------- ---- ---
------------------------------------------------------在这个布局中，CoordinatorLayout 是最外层容器，AppBarLayout 和 ToolBar 位于其中。注意，这里使用了 MaterialToolbar 来代替原生的 Toolbar，这是因为 MaterialToolbar 具有更多的 Material Design 特性和功能。
设置标题和菜单按钮
接下来，我们可以在代码中找到 ToolBar，并进行相应设置。在 MainActivity.java 中，可以使用 setSupportActionBar() 方法将 ActionBar 视为 ToolBar，并启用 ToolBar 的一些属性：
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
--------------- ------- - ---------------------------
-----------------------------
------------------------------------------------------
-在这个例子中，setDisplayHomeAsUpEnabled() 方法将添加一个“返回”按钮（箭头图标，点击后将返回上一个 Activity）。
接下来，设置 ToolBar 的标题。可以使用 setTitle() 方法来设置标题文本，并使用 setTitleTextColor() 方法来设置标题颜色。例如：
-------------------- --- -------- ---------------------------------------
添加菜单按钮和响应事件
要添加菜单按钮，需要创建一个菜单资源文件（在 res/menu/ 目录下），并使用 inflate() 方法在 Activity 的 onCreateOptionsMenu() 方法中创建菜单：
---------
------ ------- ------------------------ ----- -
------------------------------------------- ------
------ -----
-在菜单资源文件中，可以添加菜单项和菜单分组，例如：
----- -----------------------------------------------------------
-----
-------------------------------
----------------------
----------------------------------
----------------------------- --
-----
------------------------------
---------------------
---------------------------------
----------------------------- --
------
----------------------------
-----------------------------
---------------------------
-----------------------------------
-----
---------------------------------
------------------------ --
-----
-----------------------------
-------------------- --
--------
-------同样的，要响应菜单按钮的点击事件，需要覆盖 onOptionsItemSelected() 方法。例如：
---------
------ ------- ------------------------------ ----- -
------ ------------------ -
---- -------------------
-- ------ ------ ------
------ -----
---- ------------------
-- ------ ----- ------
------ -----
---- ---------------------
-- ------ -------- ------
------ -----
---- -----------------
-- ------ ---- ------
------ -----
--------
------ ----------------------------------
-
-优化滚动交互效果
AppBarLayout 的一个强大之处是它可以根据内部视图的滚动状态来调整 ToolBar 的大小和位置。例如，可以在 RecyclerView 或 NestedScrollView 中添加一个 AppbarLayout.ScrollingViewBehavior，并将 AppBarLayout 和滚动视图放置到 CoordinatorLayout 中：
----- ------------- ------------------
----------------------------------------------------
-----------------------------------
-------------------------------------
------------------------------------------------
-----------------------------------
------------------------------------
----------------------------------------------------------------------
---------------------------------------------------
-------------------------
-----------------------------------
-------------------------------------------
------------- --- ------
-----------------------------------------
---------------------------
-------------------------
-------------------------------------------------------------
--------------------------------------------
-------------------------- --
--------------------------------------------------
------------------------------------------
------------------------------
-----------------------------------
------------------------------------
------------------------------------------------------------ --
------------------------------------------------------这里，我们给 AppBarLayout 指定了一个主题和一些属性，如标题、标题颜色、菜单和返回按钮图标等。将 RecyclerView 放置在 CoordinatorLayout 中，再将其指定为 AppBarLayout 的 scrolling view behavior。
通过对 scrolling view behavior 进行适当的配置，可以实现一些有趣的滚动效果，如上拉隐藏 ToolBar、下拉显示 ToolBar，或在滚动时改变 ToolBar 的颜色和透明度等效果，具体请看官方文档。
总结
通过上述示例，我们学习了如何使用 Material Design 中的 AppBarLayout 和 ToolBar 控件来创建一个 Material Design 风格的顶部导航栏，并使用菜单资源文件来添加菜单按钮，并响应相应事件。同时，我们也学习了如何使用 scrolling view behavior 来优化滚动交互效果。
在使用时注意一些细节问题，包括设置 ToolBar 的样式和属性、菜单资源文件的设计、响应菜单事件等。总之，尽可能遵循 Material Design 规范，会使你的应用更加美观、易用和可访问。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64eee7e1f6b2d6eab38e73ee