Android Develop —— ToolBar使用
2017-09-19 本文已影响18人
So_ProbuING
Android ToolBar
简介
ToolBar是Android 5.0 推出的一个新的导航控件，用于取代之前的ActionBar,具有高度可定制性、灵活性、具有Material Design风格等特点。被广大开发者所推崇。为了兼容低版本的手机。ToolBar也放进了support v7 内。
基本使用
- 导入v7
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.1.1'
}
- 更改主题
为了能够正常使用ToolBar 我们需要隐藏原来的ActionBar,避免产生影响。我们需要在主题中修改，在values/styles.xml中修改
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>
- 在布局文件中引用
ToolBar实际上是一个ViewGroup,支持在其内部放入子View
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="这是标题"
android:textColor="@color/colorAccent"
android:textSize="14sp"
/>
</android.support.v7.widget.Toolbar>
改变ToolBar颜色
在布局中改变ToolBar颜色，只需要在布局中指定一个background
android:background="?attr/colorPrimary"
修改后效果为：
toolbar.png
我们发现，顶部状态栏也变成了深蓝色，这是由于"colorPrimary"的属性。颜色的指定如下图
toolbarcolor.jpg
所以我们可以轻松的在style.xml中定制我们的样式。
添加title、logo 导航栏图标、
为ToolBar添加一些元素，可以在代码中获取ToolBar的实例，通过一些列的set方法来设置
/**
* 设置ToolBar
*
* @param tooBar
*/
private void setToolBar(Toolbar tooBar) {
//设置ToolBar标题
tooBar.setTitle("toolBar title");
//设置副标题
tooBar.setSubtitle("subtitle");
//设置logo
tooBar.setLogo(R.mipmap.ic_launcher_round);
//设置导航图标
setSupportActionBar(tooBar);
//设置返回图标
tooBar.setNavigationIcon(R.mipmap.ic_launcher);
}
toolbarsettitle.png
设置标题和子标题的字体大小、颜色、可以调用
- setTitleTextColor
- setTitleTextApparance
- setSubTitleTextColor
- setSubTitleTextAppearance
这些方法支持在代码中调用，也支持在布局文件中设置，但要注意，在xml中使用的不是android命名空间，是自定义命名空间
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:toolbar="http://schemas.android.com/apk/res-auto"
...>
<android.support.v7.widget.Toolbar
...
toolbar:logo="@mipmap/ic_launcher"
toolbar:title="Title"
toolbar:subtitle="Sub Title"
toolbar:titleTextColor="#ffffff">
</android.support.v7.widget.Toolbar>
</FrameLayout>
添加菜单选项图标及点击事件
1.添加菜单选项图标
一般的导航条，在其右侧都会有菜单选项。我们要在ToolBar中添加菜单项需要修改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">
<item
android:id="@+id/action_search"
android:icon="@mipmap/ic_launcher"
android:title="Search"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/action_notifications"
android:icon="@mipmap/ic_launcher"
android:title="notifications"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/action_settings"
android:icon="@mipmap/ic_launcher"
android:orderInCategory="100"
android:title="设置"
app:showAsAction="never"/>
</menu>
在menu中，我们使用了app:showAsAction="ifRoom/never" app是自定义的命名控件，因为我们的activity继承的是AppCompatActivity,是v7包下的，并不是原生的，因此不能使用这个属性。
ifRoom表示有空间则显示，没有空间则不显示
never 表示从不显示
在Activity中，重写onCreateOptionsMenu()加载菜单
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
2添加点击事件
tooBar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_search:
Toast.makeText(MainActivity.this, "search", Toast.LENGTH_SHORT).show();
break;
case R.id.action_notifications:
Toast.makeText(MainActivity.this, "notification", Toast.LENGTH_SHORT).show();
break;
case R.id.action_settings:
Toast.makeText(MainActivity.this, "setting", Toast.LENGTH_SHORT).show();
break;
}
return false;
}
});
toolbarsettitle.png
改变右上角的三个点的颜色：
通过样式：
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="android:textColorSecondary">#ffffff</item>
</style>
</resources>
4.其他样式修改
改变菜单menu的背景颜色和字体
<!-- toolbar弹出菜单样式 -->
<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark">
<item name="android:colorBackground">#000000</item>
</style>
# 然后在布局文件中指定
toolbar:popupTheme="@style/ToolbarPopupTheme"
修改Toolbar popup menu弹出位置
# 定义style
<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark">
<item name="android:colorBackground">#000000</item>
<item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item> <!--新增一个item，用于控制menu-->
</style>
<style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
<item name="overlapAnchor">false</item> <!--把该属性改为false即可使menu位置位于toolbar之下-->
</style>
