效果图:
第一步 style 文件中默认的属性是 <style name="AppTheme"
parent="Theme.AppCompat.Light.DarkActionBar"> 在 style
文件中把默认使用的样式改成这个属性 <style name="AppTheme"
parent="Theme.AppCompat.Light.NoActionBar">
布局中设置 tooblar
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="@string/toolbar
>
android.support.v7.widget.Toolbar>
这俩个属性一定要设置
android:minHeight=”?attr/actionBarSize”
android:background=”?attr/colorPrimary”
在代码中设置Toolbar 的标题, 图标, 还有 menu 文件的点击事件
setLogo(R.mipmap.accountfilling);
setTitle(“xx”);
在设置点击事件之前
toobler 一定要关联item 文件
toolbar.inflateMenu(R.menu.toolbar); // 关联 toolbar
menu 文件下的布局文件 toolbar itme
menu 文件
<?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/set"
android:title="设置"
app:showAsAction="never"
>
</item>
<item
android:id="@+id/my"
android:title="我的"
app:showAsAction="ifRoom"
>
</item>
<!-- showAsAction never 代表在右边 三个小点 点击的时候显示 ifRoom 代表 在有空间的情况下显示 -->
</menu>
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
// 获取 item id
switch (item.getItemId()){
case R.id.set:
break;
}
return false;
}
});
如果要修改右边默认的图片样式的话需要自己自定义一个主题
代码如下
在 style 文件下 复制如下即可
<style name="AppTheme.Toolbar" parent="AppTheme.Toolbar">
<!--设置 title文字的颜色 -->
<item name="titleTextColor">@android:color/black</item>
<!--弹窗 在下边展示如果不设置 弹出会在按钮上方弹出-->
<item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>
<!--设置 toolbar 图标显示什么样子的-->
<item name="actionOverflowButtonStyle">@style/ActionButton.Overflow</item>
</style>
<style name="ActionButton.Overflow" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
<!--自定义的图标引用-->
<item name="android:src">@mipmap/category</item>
</style>
<style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
<item name="overlapAnchor">false</item> <!--把该属性改为false即可使menu位置位于toolbar之下-->
</style>
效果图: