目录
Toolbar
Toolbar 加上 menu
Toolbar 设置 Theme
完整 Demo
Toolbar
Toolbar 是在 Android 5.0 开始推出的一个 Materal Design 风格的导航控件 ,Google 非常推荐大家使用 Toobar 来作为 Android 客户端的导航栏,以此来取代之前的 Actionbar。与 Actionbar 相比,Toolbar 明显要灵活的多。它不像 Actionbar 一样,一定要固定在 Activity 的顶部,而是可以放到界面的任意位置。
注意:在使用 Toolbar 时,整个 App 的 Theme 必须是 NoActionBar, 不然应用会出错。
除此之外,在设计 Toolbar 的时候,Google 也留给了开发者很多可定制修改的余地,这些可定制修改的属性在 API 文档中都有详细介绍,如:
设置导航栏图标;
设置 APP 的logo;
支持设置标题合子标题;
支持 Action Menu;
在布局文件中的属性:
app:navigationIcon 设置 navigation button
app:navigationIcon="@mipmap/back_icon"
app:logo 设置 logo 图标
app:logo="@drawable/ic_tool_logo"
app:title 设置标题(正标题)
app:titleTextColor 设置正标题文字颜色
app:subtitle 设置副标题
app:subtitleTextColor 设置副标题文字颜色
app:theme 主题
app:popupTheme 设置点击右上角''..." 的主题,改变 UI 展示效果
app:popupTheme="@style/ToolBarPopupTheme"
TollBarPopupTheme 内容如下。放在了 values --> Thems --> Themes.xml 里。
<!-- 设置”...“ 点击时的主题(即右上角的那个menu) -->
<style name="ToolBarPopupTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:colorBackground">#616161</item><!--设置背景颜色的-->
<item name="android:textColorPrimary">@android:color/white</item><!--设置文字颜色的-->
<item name="android:textSize">16sp</item><!--设置文字大小的-->
<item name="actionOverflowMenuStyle">@style/OverflowMenuTheme</item><!--设置弹出位置的主题-->
<item name="android:paddingEnd">-5dp</item><!--设置点击”...“弹出的菜单的位置 ,负数是往右移-->
</style>
android:backgroundTint 应用于background 的色彩。而background是一个可绘制的背景,可以是一个完全可绘制资源的引用(例如图片、可调整大小位图9-patch、XML状态列表描述、etc),或者是纯色如黑色。backgroundTint只能用颜色,而background有引用、图片和颜色。如果你只是要给背景上纯色的话,建议用backgroundTint,如果你要用背景图片的话,就用background,可以分别提高对应的执行效率!
android:backgroundTint="#afbfff"
android:backgroundTindMode 当我们既设置了 android:background 又设置了 android:backgroundTint 时,那么就会将 android:backgroundTint 设置的颜色与背景进行一个叠加,叠加的常用模式如下:
1. PorterDuff.Mode.SRC_OVER 正常绘制显示,上下层绘制叠盖。
2. PorterDuff.Mode.SRC_IN 取两层绘制交集。显示上层
3. PorterDuff.Mode.SRC_ATOP 取下层非交集部分与上层交集部分
4. PorterDuff.Mode.SCREEN 取两图层全部区域,交集部分变为透明色
android:backgroundTintMode="src_over"
Toolbar 加上 menu
如下图,当我们设置完 toolbar 时,并没有右侧的 menu ?
我们可以给 Toolbar 加上右侧的 menu (那三个"..."),在 toolbar 所在的 activity 中重写 onCreateOptionMenu() 方法即可实现。
/**
* menu 与 toolbar 绑定
*/
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar, menu);
// TODO 拿到 toolbar 里的 item
MenuItem searchItem = menu.findItem(R.id.action_search);
SearchView searchView = (SearchView) searchItem.getActionView();
searchItem.setOnActionExpandListener(new MenuItem.OnActionExpandListener() {
@Override
public boolean onMenuItemActionExpand(MenuItem item) {
return true;
}
@Override
public boolean onMenuItemActionCollapse(MenuItem item) {
return true;
}
});
return super.onCreateOptionsMenu(menu);
}
toolbar.xml 如下
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_favorite"
android:icon="@drawable/nav_selector"
android:title="@string/favorite"
app:showAsAction="never" />
<!-- Settings, should always be in the overflow -->
<item
android:id="@+id/action_settings"
android:icon="@drawable/ic_baseline_settings_64"
android:title="@string/settings"
app:showAsAction="never" />
<item android:id="@+id/action_search"
android:title="@string/action_search"
android:icon="@drawable/ic_baseline_search_64"
app:showAsAction="ifRoom|collapseActionView"
app:actionViewClass="androidx.appcompat.widget.SearchView" />
</menu>
加上 menu 的效果
给 menu 的 item 设置点击事件,重写 onOptionsItemSelected() 方法。这里简单的进行了一个 Toast 弹窗,你可以进行丰富的其它设置。
/**
* menu 里 item 点击事件监听
* @param item menu 里的 菜单
* @return
*/
@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.action_settings:
Toast.makeText(MainActivity.this, R.string.settings, Toast.LENGTH_SHORT).show();
return true;
case R.id.action_favorite:
Toast.makeText(MainActivity.this, R.string.favorite, Toast.LENGTH_SHORT).show();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
Toolbar 设置 Theme
细心的朋友可以发现,上面 toolbar 与我们开始演示的 UI 还是有些区别,比如正副标题的颜色,menu 是横着的且是绿色的等。这时我们可以通过给 Toolbar 设置 Theme 来完成。
可以通过 textColorPrimary 来设置正标题字体颜色,textColorSecond 设置副标题字体颜色,同时必须实现 windowActionBar 和 windowNoTitle 。
<!-- 使用ToolBar, 在 AndroidManifest 里的activity添加该 theme-->
<style name="ToolBarAppTheme" parent="MaterialAppTheme">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<!-- 修改右侧溢出菜单,副标题,navigation 的颜色-->
<item name="android:textColorSecondary">@color/purple_500</item>
<!-- 不能在这里修改弹出框的右边距-->
<!-- <item name="android:paddingEnd">-5dp</item>-->
<!-- 设置文字颜色的-->
<item name="android:textColorPrimary">@color/Green700</item>
<!-- 设置文字大小的-->
<item name="android:textSize">16sp</item>
<!-- 注意设置的位置 -->
<item name="actionOverflowButtonStyle">@style/OverflowTheme</item>
<item name="toolbarStyle">@style/NoSpaceActionBarTheme</item>
</style>
actionOverflowButtonStyle 可以用来设置 menu 的样式,让右上角的 ”...“ 横着显示,且设置它的颜色,OverflowTheme 内容如下:
<style name="OverflowTheme" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
<item name="android:src">@drawable/ic_tool_more_horiz_24</item>
<item name="android:paddingStart">12dp</item>
<item name="android:paddingEnd">12dp</item>
最后完成上面的 Theme 设置,那么我们要在哪里用 ToolBarAppTheme 呢?答案是 AndroidMnifest 里,加在 Toolbar 所在 activity 上。这样就可以显示我们想要的效果了。
注意:对于主题 Theme ,一般是 app --> Activity --> 控件,且后面的 theme 可以覆盖前面的。文章来源:https://www.toymoban.com/news/detail-622193.html
完整 Demo
链接:https://pan.baidu.com/s/1nlTax1GFXXR2q_khFz2Wew
提取码:2tb5文章来源地址https://www.toymoban.com/news/detail-622193.html
到了这里,关于Android---Toolbar的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!