本篇文章仅为个人学习记录;
Toolbar是android.support.v7包中的,所以需要导入appcompat-v7包;
在使用Toolbar时,需要隐藏掉原来的ActionBar,直接在主题中修改:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> </style>
或者
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
1、创建布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.sl.mydemo.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorAccent" //背景
/>
</LinearLayout>
2、设置属性
mToolbar = findViewById(R.id.toolbar);
mToolbar.setTitle("测试标题"); //设置标题 布局app:title
mToolbar.setSubtitle("测试子标题"); //设置子标题 布局 app:subTitle
mToolbar.setLogo(R.mipmap.ic_launcher); //设置图标 布局 app:logo
//设置标题和子标题颜色
mToolbar.setTitleTextColor(Color.parseColor("#FFFFFF")); //设置标题颜色 布局 app:titleTextColor
mToolbar.setSubtitleTextColor(Color.parseColor("#FFFFFF")); //设置子标题颜色 布局 app:subTitleTextColor
//修改主标题的外观、颜色
mToolbar.setTitleTextAppearance(this,R.style.Theme_Toolbar_Base_Title); // 布局:app:titleTextAppearance
mToolbar.setPopupTheme(R.style.PopupMenu); //溢出菜单弹窗设置 布局 app:popupTheme
mToolbar.setSubtitleTextAppearance(this,R.style.Theme_Toolbar_Base_Title); //布局:app:subTitleTextAppearance
//设置导航图标要在setSupportActionBar后
setSupportActionBar(mToolbar);
mToolbar.setNavigationIcon(android.R.drawable.ic_menu_myplaces); //设置导航图标
// getSupportActionBar().setDisplayHomeAsUpEnabled(true) ; //左侧按钮
3、使用到的样式
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:textColorSecondary">#FFFFFF</item> <!--菜单右上角更多图标的颜色-->
</style>
<!--Toolbar 标题字体大小颜色-->
<style name="Theme.Toolbar.Base.Title" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">20dp</item>
<item name="android:textColor">#FFFFFF</item>
</style>
<!--Toolbar 标题字体大小颜色-->
<style name="Theme.Toolbar.Base.SubTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">14dp</item>
<item name="android:textColor">#FFFFFF</item>
</style>
<!--溢出菜单颜色、背景、显示位置-->
<style name="PopupMenu" parent="ThemeOverlay.AppCompat.Light">
<item name="android:colorBackground">@color/colorAccent</item>
<item name="android:textColor">#FFFFFF</item>
<item name="overlapAnchor">false</item>
</style>
4、添加菜单
定义res/menu/menu.main.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"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<item android:id="@+id/action_search"
android:title="搜索"
android:icon="@android:drawable/ic_menu_search"
app:showAsAction="ifRoom"/>
<item android:id="@+id/action_notifications"
android:title="通知"
android:icon="@android:drawable/ic_notification_overlay"
app:showAsAction="ifRoom"/>
<item android:id="@+id/action_setting"
android:title="设置"
android:icon="@android:drawable/ic_menu_more"
app:showAsAction="never"/>
<!--app:showAsAction="if/never",app是自定义命名空间,因为Actiivyt是继承AppCompatActivity,是support
v7包中的,不是原生的,所以不能使用android:showAction否则会报错。ifRoom表示有空间则显示,never表
示从不显示,而是会通过overFlowwindow显示-->
</menu>
将menu布局添加到toolbar中:
//重写此方法,将菜单加载进ToolBar,如果没有Toolbar,菜单是加载不出来滴
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main,menu);
return true;
}
5、点击事件
左侧按钮点击事件
设置导航图标:mToolbar.setNavigationIcon(android.R.drawable.ic_menu_myplaces);
原生显示左侧返回按钮图标:getSupportActionBar().setDisplayHomeAsUpEnabled(true) ;
点击事件,在setSupportActionBar(mToolBar)后:
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case android.R.id.home:
Snackbar.make(mToolbar,"左侧按钮",Snackbar.LENGTH_SHORT).show();
break;
}
return true;
}
菜单点击事件:
//为菜单添加点击事件,需要在setSupportActionBar之后
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()){
case R.id.action_search:
Snackbar.make(mToolbar,"搜索",Snackbar.LENGTH_SHORT).show();
break;
case R.id.action_notifications:
Snackbar.make(mToolbar,"通知",Snackbar.LENGTH_SHORT).show();
break;
case R.id.action_setting:
Snackbar.make(mToolbar,"设置",Snackbar.LENGTH_SHORT).show();
break;
}
return true; //返回true消费事件
}
});
6、toolbar中直接布局标题等信息,只当简单控件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.sl.mydemo.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="@color/colorAccent"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="标题"
android:textSize="18dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="15dp"
android:text="右侧按钮"
/>
</android.support.v7.widget.Toolbar>
</LinearLayout>