Toolbar的基础使用
一， 基本使用
Toolbar使用很简单，可以设置标题，副标题，导航按钮，logo图，菜单等。
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:logo="@mipmap/logo_icon"
app:menu="@menu/bottom"
app:navigationIcon="@mipmap/back_icon"
app:subtitle="二级标题"
app:subtitleTextColor="@color/colorAccent"
app:title="标题"
app:titleMarginStart="40dp"
app:titleTextColor="@color/colorAccent" />
bottom.xml代码
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/action_home"
android:title="你是" />
<item
android:id="@+id/action_home1"
android:title="你是" />
<item
android:id="@+id/action_home2"
android:title="你是" />
<item
android:id="@+id/action_home3"
android:title="你是" />
<item
android:id="@+id/action_home4"
android:title="你是" />
</menu>
这里需要注意的是，如果想设置主标题或者副标题的字体大小，需要使用style样式。
<!--主标题-->
<style name="ToolbarTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textColor">#000000</item>
<item name="android:textSize">20sp</item>
</style>
<!--子标题-->
<style name="ToolbarSubtitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
<item name="android:textColor">#000000</item>
<item name="android:textSize">18sp</item>
</style>
引用方式
app:titleTextAppearance="@style/ToolbarTitle"
自定义使用，在默认布局不能满足需求时，可以自定义布局。比如：标题实现居中
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:logo="@mipmap/logo_icon"
app:menu="@menu/bottom"
app:navigationIcon="@mipmap/back_icon">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="标题"
android:textColor="@color/colorAccent"
android:textSize="20sp" />
</androidx.appcompat.widget.Toolbar>
二，进一步使用
实现以下布局，布局中有搜索按钮和消息按钮。
关键代码就是下边的menu.xml中的showAsAction属性
showAsAction属性值：
- ifRoom： 表示在屏幕空间足够的情况下显示在Toolbar中，不够的话就显示在菜单中
- never： 表示永远不显示在Toolbar中，而是一直显示在菜单中
- always： 表示永远显示在Toolbar中，如果屏幕空间不够则不显示
- collapseActionView：声明了这个操作视窗应该被折叠到一个按钮中，当用户选择这个按钮时，这个操作视窗展开。一般要配合ifRoom一起使用才会有效
由于搜索和消息设置了ifRoom，所以显示在Toolbar中，关闭和关于显示在菜单中。如果都显示在Toolbar中，那么菜单中没有了，菜单按钮也就消失了。
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/menu_search"
android:icon="@mipmap/search_icon1"
android:title="搜索"
app:showAsAction="ifRoom" />
<item
android:id="@+id/menu_notification"
android:icon="@mipmap/message_icon1"
android:title="消息"
app:showAsAction="ifRoom" />
<item
android:id="@+id/menu_close"
android:title="关闭"
app:showAsAction="never" />
<item
android:id="@+id/menu_about"
android:title="关于"
app:showAsAction="never" />
</menu>
再进一步扩展，如果点击搜索按钮，展开搜索框的实现方式。在item的搜索中添加collapseActionView属性和actionViewClass对应的类。这样当我单击搜索按钮的时候，页面变成如下，点击返回按钮还可以回去。
<item
android:id="@+id/menu_search"
android:icon="@mipmap/search_icon1"
android:title="搜索"
app:showAsAction="ifRoom|collapseActionView"
app:actionViewClass="androidx.appcompat.widget.SearchView" />
此时的这个返回按钮也可以替换。需要在Toolbar中添加 app:collapseIcon="@mipmap/logo_icon"
三，动态设置
//设置Logog
toolbar.setLogo(R.mipmap.ic_launcher);
//设置主标题
toolbar.setTitle("Title");
//设置主标题颜色
toolbar.setTitleTextColor(getResources().getColor(android.R.color.white));
//修改主标题的颜色、外观
toolbar.setTitleTextAppearance(this, R.style.xxx);
//设置副标题
toolbar.setSubtitle("Subtitle");
//设置副标题颜色
toolbar.setSubtitleTextColor(getResources().getColor(android.R.color.white));
//修改副标题的颜色、外观
toolbar.setSubtitleTextAppearance(this,R.style.xxx);
//设置导航菜单
toolbar.setNavigationIcon(R.drawable.xxx);
//对NavigationIcon添加点击
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
}
});
//设置菜单弹出样式的文本颜色和背景
toolbar.setPopupTheme(R.style.xxx);
//设置菜单
toolbar.inflateMenu(R.menu.xxx);
//设置菜单按钮
toolbar.setOverflowIcon(getDrawable(R.drawable.xxx));
//设置菜单及其点击监听
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.xxx:
break;
case R.id.xxx:
break;
}
return true;
}
});
四，问题总结
在开发中，想实现类似上图效果。Toolbar左侧使用的是navigationIcon，也就是导航返回按钮。右侧用的是个menu。中间部分是一个类似搜索框的布局，可以看出，在navigationIcon和搜索框中间距离要大于右侧，看着像是没有居中，无论怎么设置居中都不行。
问题在于navigationIcon默认间距导致的。
修改办法
app:contentInsetStartWithNavigation="0dp"
<androidx.appcompat.widget.Toolbar
android:id="@+id/main_tb"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="@color/colorPrimaryDark"
app:contentInsetStartWithNavigation="0dp"
app:menu="@menu/main_title_menu"
app:navigationIcon="@android:drawable/ic_menu_add">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/main_title_shape">
<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/main_search_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:background="@android:drawable/ic_menu_search" />
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="@+id/main_search_iv"
android:text="搜索" />
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_marginRight="10dp"
android:background="@android:drawable/ic_menu_camera" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
最后效果
