Android5.0之Toolbar详解

搜索Toolbar相关文章满天飞,但是大都不是很全面,每次要用到的时候又要重头过滤一遍。而且随着版本升级很多较早的文章的方法已经失效,最近刚好好用到Toolbar,就将相关配置整理下,方便以后使用。

环境说明:

  • Android Studio 2.0
  • V7包版本:com.android.support:appcompat-v7:23.4.0
  • compileSdkVersion 23
  • buildToolsVersion “24.0.0”

Toolbar 引入使用

XML布局中加入:

1
2
3
4
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>

主题改为隐藏ActionBar:

1
Theme.AppCompat.Light.NoActionBar

Activity代码中加入:

setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

此时运行效果:

添加背景色

1
android:background="@color/colorPrimary"

此时运行效果:

基本属性设置

1
2
3
4
5
6
7
8
9
10
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
app:navigationIcon="@mipmap/title_bar_back"//左侧图标
app:subtitle="子标题"
app:subtitleTextColor="#fff" //标题颜色
app:title="标题"
app:titleTextColor="#fff"/> //子标题颜色

运行效果:

添加选项菜单
第一步创建菜单文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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_settings"
android:icon="@mipmap/ic_launcher"
android:orderInCategory="100"
android:title="settings"
app:showAsAction="never"/>
<item
android:id="@+id/action_share"
android:icon="@mipmap/ic_action_share"
android:orderInCategory="100"
android:title="settings"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/action_search"
android:icon="@mipmap/ic_action_search"
android:orderInCategory="100"
android:title="settings"
app:showAsAction="ifRoom"/>
</menu>

第二部在代码中重写onCreateOptionsMenu方法加载菜单文件

1
2
3
4
5
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

此时效果:

个性设置

左侧返回箭头

想要显示自带的返回箭头,需要去掉之前设定的属性:

1
app:navigationIcon="@mipmap/title_bar_back"

然后在代码中添加:

1
2
getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

此时效果:

溢出图标颜色

在style文件中添加:

1
2
<!-- 溢出菜单图标颜色-->
<item name="colorControlNormal">@android:color/white</item

>
此时效果:

自定义右侧溢出图标

在Style文件中添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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="colorControlNormal">@android:color/white</item>
<!-- 溢出菜单图标自定义-->
<item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item>
</style>
<style name="OverflowButtonStyle" parent="android:Widget.ActionButton.Overflow">
<item name="android:src">@mipmap/ic_action_add</item>
</style>

此时运行效果:

更改弹出菜单背景

在Style文件中添加样式:

1
2
3
4
<!-- toolbar弹出菜单样式背景 -->
<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat">
<item name="android:colorBackground">#FFCC99</item>
</style>

在布局文件中添加使用主题:

1
app:popupTheme="@style/ToolbarPopupTheme"

此时运行效果:

更改弹出菜单文字颜色

添加样式文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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="colorControlNormal">@android:color/white</item>
<item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item>
<!-- 溢出菜单文字颜色-->
<item name="textAppearanceLargePopupMenu">@style/Overflow_Menu_Text_style</item>
</style>
<!--溢出菜单文字颜色-->
<style name="Overflow_Menu_Text_style" parent="@style/TextAppearance.AppCompat.Widget.PopupMenu.Large">
<item name="android:textColor">#fff</item>
</style>

此时运行效果:

修改标题文字大小

添加配置:

1
app:titleTextAppearance="@style/ToolbarTitleSize"

添加style:

1
2
3
4
<!-- toolbar标题文字大小 -->
<style name="ToolbarTitleSize" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">28sp</item>
</style>

此时运行效果:

子标题文字大小类似,添加配置然后定义style文件(此处省略):

1
app:subtitleTextAppearance="@style/ToolbarTitleSize"

修改弹出菜单位置

修改配置使弹出菜单显示在Toolbar下方:
首先重新设置属性:(在界面布局文件Toolbar中)

1
app:popupTheme="@style/OverflowMenuStyle"

在Style文件中添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style name="OverflowMenuStyle">
<!-- 是否覆盖锚点,默认为true,即盖住Toolbar -->
<item name="overlapAnchor">false</item>
<item name="android:dropDownWidth">wrap_content</item>
<item name="android:paddingRight">5dp</item>
<!-- 弹出层背景颜色 -->
<item name="android:colorBackground">#FFCC99</item>
<!-- 弹出层垂直方向上的偏移,即在竖直方向上距离Toolbar的距离,值为负则会盖住Toolbar -->
<item name="android:dropDownVerticalOffset">5dp</item>
<!-- 弹出层水平方向上的偏移,即距离屏幕左边的距离,负值会导致右边出现空隙 -->
<item name="android:dropDownHorizontalOffset">0dp</item>
<!-- 设置弹出菜单文字颜色 -->
<item name="android:textColor">#0099CC</item>
</style>

此时运行效果:

事件处理

返回按钮事件

添加监听

1
2
3
4
5
6
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "点击了返回箭头", Toast.LENGTH_LONG).show();
}
});

菜单项点击事件

重写方法

1
2
3
4
5
6
7
8
9
10
11
12
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_settings:
break;
case R.id.action_search:
break;
case R.id.action_share:
break;
}
return true;
}

自定义Toolbar

Toolbar下面可以嵌套布局,直接将自己定义好的布局放到Toolbar下面即可

1
2
3
4
5
6
7
8
9
10
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
......
</RelativeLayout>
</android.support.v7.widget.Toolbar>

Toolbar 和 DrawerLayout 左滑菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_left"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--侧滑菜单-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#CCCCFF"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="选项一"
android:textSize="18sp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="选项二"
android:textSize="18sp"/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>

添加左滑布局文件:

在主布局文件中引入:(在Toolbar下方)

1
2
<!--DrawerLayout-->
<include layout="@layout/custom_drawerlayout"/>

在代码中添加关联:

1
2
3
4
DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_left);
ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open, R.string.close);
mDrawerToggle.syncState();
mDrawerLayout.setDrawerListener(mDrawerToggle);

此时运行效果:

新版本studio,在新建Activity的时候可以选择对应的模板,会自动创建好DrawerLayout并关联Toolbar.

打赏一个煎饼果子!