简介
ToolBar 是 Google Material Design 风格中常用的 UI 组件，它主要用于 app 和 web 应用中的导航和操作控制。一个好的 ToolBar 可以增强用户体验，提高应用的效果和性能。
在 Material Design 中，ToolBar 可以放在应用程序的顶部，包含了应用程序的名称、可操作按钮、导航栏、搜索框等等。ToolBar 还可以和其他 Material Design 组件一起使用，如 CardView、NavigationView 等。
基础功能
在 Material Design 中，ToolBar 包含了几个基础的功能：
导航功能
ToolBar 中的导航图标可以让用户回到主页或其他应用程序的页面。导航图标通常是一个箭头或抽屉图标，点击后会展开或关闭导航菜单或抽屉。
<androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:navigationIcon="@drawable/ic_menu" app:title="My Toolbar" />
标题
ToolBar 中的标题可以显示应用程序的名称或当前活动的页面的标题。标题通常位于导航图标的右侧，可以根据需求修改标题字体和颜色等。
<androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:title="My Toolbar" />
操作按钮
ToolBar 中的操作按钮可以让用户执行特定的操作，如新增、编辑、分享等。操作按钮通常位于标题的右侧。
<androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:title="My Toolbar" app:menu="@menu/menu_main" />
进阶功能
除了基本的功能，ToolBar 还可以实现一些进阶的功能，如 ToolTip、下拉刷新、搜索框等等。
ToolTip
ToolTip 是一个很小的气泡，可以提供有关按钮或操作的提示。它可以在用户点击、长按或悬停时出现并提供帮助信息。
-- -------------------- ---- ------- ---------------------------------- ------------------------- ----------------------------------- ------------------------------------------- ------------- -------- -- ------------ ----------------------------------- ------------------------------------ ------------------------------- --------------------- -- - --------- --展开代码
下拉刷新
很多应用程序需要支持下拉刷新操作，ToolBar 也可以帮助我们实现这个功能。
-- -------------------- ---- ------- ------------------------------------------------------ ------------------------------- ----------------------------------- ------------------------------------- ------------------------------------------ ------------------------------- ----------------------------------- -------------------------------------- --------------------------------------------------------展开代码
SwipeRefreshLayout swipeRefreshLayout = findViewById(R.id.swipe_refresh); swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() { @Override public void onRefresh() { // do refresh tasks swipeRefreshLayout.setRefreshing(false); } });
搜索框
ToolBar 还可以集成搜索框功能，这可以帮助用户快速找到需要的内容。
-- -------------------- ---- ------- ---------------------------------- ------------------------- ----------------------------------- ------------------------------------------- ------------- --------- --------------- ----------------------------------- ------------------------------------- ----------- ----------------------------- ----------------------------------- ------------------------------------ ------------------------- ------- ----------------- ------------------------------------展开代码
-- -------------------- ---- ------- ---------- ---------- - ------------------------------- ------------------------------------- -------------------------------- - --------- ------ ------- ------------------------ ------ - -- -- ------ ----- ------ ------ - --------- ------ ------- ------------------------ -------- - -- -- ------ ----- ------ ------ - ---展开代码
总结
ToolBar 是一个非常实用和灵活的 UI 组件，可以帮助我们实现很多基础和进阶功能。在使用 ToolBar 时，我们应该清晰明确地定义其作用和风格，并且根据需求添加合适的功能组件。
示例代码：https://github.com/cindyxu1120/Material-Design-ToolBar-demo
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c48b7c83d39b488180a416
