Android工具栏_Toolbar

Toolbar是android5.0 后Google推出的用于替代actionbar控件的新的标题栏控件, 同时提供兼容包android.support.v7.widget.Toolbar

演示

activity_main.xml布局文件中添加控件

1
2
3
4
5
6
7
8
9
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:background="@color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content">
// 这里可以放置其他控件
</android.support.v7.widget.Toolbar>

这个Toolbar其实是继承的ViewGroup, 所以中间也可以放置其他控件, 这些控件会直接显示在Toolbar上, 可以通过FindViewBuId找到控件.

在Style文件中主题添加属性, 来隐藏标题栏, 或者让当前主题直接继承主题Theme.AppCompat.Light.NoActionBar, 这里的标题栏就是指的actionbar

1
2
3
4
5
6
7
8
9
10
11
12
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="windowNoTitle">true</item> // 隐藏标题栏
</style>
</resources>

隐藏标题栏有两个属性都可以实现 android:windowNoTitlewindowNoTitle , 但是 android: windowNoTitle 在继承了 AppCompatActivity 的 activity 中是无效的.

activity中替换原来的标题栏

根据你用的是V7兼容包还是android5.0后的api使用不同的方法替换ActionBar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public class MainActivity extends AppCompatActivity {
@BindView(R.id.toolbar)
Toolbar mToolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
// 替换actionbar为toolbar, 这是android.widget.Toolbar 使用的方法
setActionBar(mToolbar);
// 这是 V7兼容包使用的替换方法
//setSupportActionBar(mToolbar);
}
}

如果继承的是Activity则会导致无法使用V7兼容包的替换方法, 且对Toolbar的修改必须要在替换actionbar方法之前, 否则会导致某些属性修改无效, 例如setTitle()标题设置

关于替不替换actionbar有什么区别: 系统默认会对actionbar有一些操作方法,例如默认对actionbar显示了应用名称,如果执行了替换actionbar方法, 即使不给toolbar设置标题,系统也会默认加个应用名称作为标题

标题和图标

Java代码设置:

1
2
3
4
5
6
7
8
9
10
mToolbar.setNavigationIcon(R.drawable.ic_arrow_back_black_24dp);
mToolbar.setLogo(R.mipmap.ic_launcher);
mToolbar.setTitle("主标题"); // 设置标题
mToolbar.setTitleTextColor(Color.WHITE); // 设置标题文本颜色
mToolbar.setSubtitle("副标题"); //设置副标题
mToolbar.setSubtitleTextColor(Color.WHITE); // 设置副标题文本颜色
mToolbar.inflateMenu(R.menu.toolbar_inflat_menu); // 添加菜单, 如果替换actionbar为toolbar则无效

XMl属性设置

android.support.v7.widget.Toolbar 兼容包需要手动导入命名空间xmlns:tools="http://schemas.android.com/tools", 使用Toolbar:xx等自定义属性来设置Toolbar, 否则某些属性不会生效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:toolbar="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.liangjingkanji.ormlite.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:subtitleTextColor="副标题颜色"
toolbar:logo="@mipmap/ic_launcher"
toolbar:navigationIcon="@mipmap/ic_launcher"
toolbar:subtitle="副标题"
toolbar:title="标题"
toolbar:titleTextColor="标题颜色"
>
</android.support.v7.widget.Toolbar>
</RelativeLayout>

android.widget.Toolbar 可以直接使用android:navigationIcon等属性, 不需要导入命名空间xmlns:tools="http://schemas.android.com/tools"

菜单

根据是否替换了actionbar可以分为两种情况添加菜单到Toolbar上

替换Actionbar

创建菜单文件

1
2
3
4
5
6
7
<?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:title="编辑" android:icon="@drawable/ic_border_color_black_24dp" android:id="@+id/editor"/>
<item android:title="分享" android:icon="@drawable/ic_send_black_24dp" android:id="@+id/share"/>
<item android:title="关于" android:icon="@drawable/ic_error_outline_black_24dp" android:id="@+id/info"/>
</menu>

此时在activity中重写创建菜单方法, 和创建默认菜单方式一样

1
2
3
4
5
6
7
8
9
10
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// 填充菜单文件
getMenuInflater().inflate(R.menu.toolbar_menu, menu);
// 通过代码添加菜单选项, 其重载方法可以设置更加复杂的菜单选项
menu.add("添加");
// 返回true显示菜单, false则不显示, 这里是默认返回true
return super.onCreateOptionsMenu(menu);
}

没有替换Actionbar

添加菜单, 如果替换actionbar为toolbar则无效

1
mToolbar.inflateMenu(R.menu.toolbar_inflat_menu);

菜单锚点样式

这三个小点是当前使用的主题提供的, 默认就是黑色, 与Toolbar的背景颜色并不协调, 不提供修改颜色的方法只能通过直接修改图标

修改图标

1
mToolbar.setOverflowIcon(getDrawable(R.mipmap.ic_launcher));

溢出菜单图标

这里我虽然给Item设置了图标android:icon="@drawable/ic_error_outline_black_24dp",但是并不会生效, 因为Google Material Design 设计规范并不建议这里添加图标, 所以Google默认不显示图标

除非设置app:showAsAction="never"将菜单选项显示到Toolbar界面上, 且如果该Item只有标题没有图标, 将显示标题, 有图标就不显示标题了

关于app:showAsAction 属性有三个值:

  • always:总是显示在Toolbar界面上
  • never:不显示在界面上,只让出现在右边的三个点中
  • ifRoom:如果有位置才显示,不然就出现在右边的三个点中

溢出菜单样式

1
mToolbar.setPopupTheme(R.style.OverflowMenuStyle);

同时提供XMl属性android:popupTheme="@style/OverflowMenuStyle"app:popupTheme="@style/OverflowMenuStyle"

两者区别我也不知道, 总之都能正常生效

主题

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--溢出[弹出]菜单样式-->
<style name="OverflowMenuStyle" parent="Base.Widget.AppCompat.PopupMenu.Overflow">
<!-- 是否覆盖锚点,默认为true,即盖住Toolbar -->
<item name="overlapAnchor">false</item>
<!-- 弹出层垂直方向上的偏移,即在竖直方向上距离Toolbar的距离,值为负则会盖住Toolbar -->
<item name="android:dropDownVerticalOffset">5dp</item>
<!-- 弹出层水平方向上的偏移,即距离屏幕左边的距离,负值会导致右边出现空隙 -->
<item name="android:dropDownHorizontalOffset">-10dp</item>
<!-- 弹出层背景颜色 -->
<item name="android:popupBackground">@android:color/white</item>
<!-- 设置弹出菜单文字颜色 -->
<item name="android:textColor">@android:color/holo_blue_dark</item>
</style>

监听器

因为Toolbar是继承的ViewGroup, 所以也可以像LinearLayout一样在里面写任意的控件, 这种控件只要通过FindViewById就可以找到并监听事件了,而对于Toolbar自定定义好的控件则可以通过其提供的监听器方法

1
2
3
4
5
6
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});

菜单监听器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
// 通过Item的id判断点击的是哪个菜单选项
switch (item.getItemId()) {
case R.id.editor:
Toast.makeText(MainActivity.this, "编辑", Toast.LENGTH_SHORT).show();
break;
case R.id.share:
Toast.makeText(MainActivity.this, "分享", Toast.LENGTH_SHORT).show();
break;
case R.id.info:
Toast.makeText(MainActivity.this, "关于", Toast.LENGTH_SHORT).show();
break;
}
// 这里返回True将会让Item发生状态变化
return false;
}
});