Material Design 中使用 ToolBar 的技巧总结
ToolBar 是 Material Design 中常见的交互元素，用于放置应用程序的标题、菜单以及其他控件。在实际的前端开发中，如何料理好ToolBar 是一个相当重要的问题。
本篇文章将从以下几个方面阐述在 Material Design 中使用 ToolBar 的技巧总结。
一、ToolBar 的基本用法
在使用ToolBar 时，需要进行以下几个步骤：
1、在 XML 中创建 ToolBar 控件
2、在 Activity 或 Fragment 中引用 ToolBar 控件
3、调用 setSupportActionBar() 方法将 ToolBar 控件设为 ActionBar
具体的代码实现如下：
-- -------------------- ---- ------- ---- -- ------- -- --- ---------------------------------- ------------------------- ----------------------------------- ------------------------------------------- ---------------------------------------- ---------------------------------------------------- -- --- -------- - -------- --- ------- -- ------- ------- - --------- --------------------------- -----------------------------
通过这样的步骤，就可以在应用中添加一个 ToolBar 了。
二、设置 ToolBar 标题及样式
在 Material Design 中，ToolBar 经常被用来显示标题，可以通过以下代码实现：
getSupportActionBar().setTitle("My Title");此外，ToolBar 往往是整个应用程序中唯一用于导航控件的位置。Android 5.0 加入了 NavigationView 控件，能够使得 Toolbar 中的导航菜单更加易用。
设置 ToolBar 样式，可以通过以下样式来定义：
<!-- 修改 Toolbar 样式 --> <style name="CustomToolBarStyle" parent="@style/Widget.AppCompat.Toolbar"> <item name="android:background">@color/colorPrimary</item> <item name="android:titleTextColor">@android:color/white</item> <item name="android:subtitleTextColor">@android:color/white</item> <item name="android:icon">@drawable/ic_menu</item> </style>
通过定义一个样式，我们就可以更加方便地自定义 ToolBar 的样式。
三、使用 Toolbar 实现菜单
除了用于显示标题以及导航之外，ToolBar 还可以作为菜单的容器使用。
首先在 XML 中配置 ToolBar 的菜单项，在 menu 文件夹中定义一个对应的 XML 文件：
-- -------------------- ---- -------
----- ----------------------------------------------------------
----------------------------------------------------
-----
----------------------------
------------------- --
------------------------- --
-----
----------------------------
------------------- --
------------------------- --
-----
----------------------------
------------------- --
------------------------- --
-------
然后在 Activity 或 Fragment 中调用 onCreateOptionsMenu() 方法将菜单添加到 ToolBar 中：
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main_menu, menu);
return true;
}
通过这样的方式就可以使用 ToolBar 实现应用程序的菜单了。
四、使用 ToolBar 实现响应式布局
Material Design 的一个特点是响应式布局，ToolBar 可以很好地适应屏幕的大小以及方向的改变。通过 providesOverflowButton 属性的设置，可以使得在小屏幕设备中显示“添加”更多图标。具体的代码实现如下：
-- -------------------- ---- ------- ---------------------------------- ------------------------- ----------------------------------- ------------------------------------------- ---------------------------------------- ---------------------------------------------------- ------------------------------------------- --------------------------- ------------------------- -------------------------- --------------------------- ---------------------------------------------------- ---------------------------------------------------------- --------------------------- ------------------------- ----------------------------------------- -------------------------------------- -------------------------------- ------------------------------- ----------------------------------------------
通过使用 ToolBar 来实现响应式布局，可以让应用程序更具灵活性和便捷性。
五、总结
在Material Design 中，ToolBar 是一个非常重要的组件，通过合理的使用ToolBar 可以提高应用程序的效果和用户体验。文章从基本用法、设置标题及样式、使用ToolBar 实现菜单、使用 ToolBar 实现响应式布局等方面进行了详细的介绍和讲解。希望读者能够从中得到帮助，开发出更为优秀的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64775a40968c7c53b03dbc2a