ToolBar的使用

1、ToolBar的介绍

ToolBar基本上继承了ActionBar的风格，使用ToolBar可以简单的实现导航的效果，但toolbar有一此配置比较麻烦，特别是自定义的时候遇到的问题很多，下面是常用的效果图



从api或者源码中看toolbar的主要功能：

2、ToolBar的基本使用

在布局中配置toolbar，注意是support-v7下的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:fitsSystemWindows="true"
tools:context="com.example.administrator.toolbar.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</LinearLayout>

在activity中调用

package com.example.administrator.toolbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("主标题");
toolbar.setSubtitle("附标题");
toolbar.setNavigationIcon(R.mipmap.icon_back);
setSupportActionBar(toolbar);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

效果图

3、ToolBar自定义样式

1、自定义标题只需要在Toolbar中添加一个TextView

<?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:fitsSystemWindows="true"
tools:context="com.example.yu.toolbar.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" >
<TextView
android:gravity="center"
android:textSize="25sp"
android:text="标题"
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>

</LinearLayout>

2、自定义菜单

自定义菜单主要是更换菜单三个点和弹出窗的背景颜色,弹窗的位置

下面也是最常用的布局方式



在布局文件中引用设置的主题

主意：在代码中引用的布局是 android:theme=”@style/Theme.ToolBar.Menu”，而不是 android:popupTheme=”@style/Theme.ToolBar.Menu”

在activity中代码一样

package com.example.yu.toolbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

//        toolbar.setTitle("主标题");
//        toolbar.setTitleTextColor(getResources().getColor(R.color.red));
//
//
//        toolbar.setSubtitle("副标题");
//        toolbar.setSubtitleTextColor(getResources().getColor(R.color.green));
//
//        toolbar.setLogo(R.mipmap.ic_launcher);
toolbar.setNavigationIcon(R.mipmap.icon_back);

setSupportActionBar(toolbar);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

布局文件代码如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.yu.toolbar.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#3F51B5"
android:theme="@style/Theme.ToolBar.Menu"
>
<TextView
android:gravity="center"
android:textSize="25sp"
android:text="标题"
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>

</LinearLayout>

在styles中设置

<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>
</style>

<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

<style name="Theme.ToolBar.Menu" parent="Theme.AppCompat.Light.NoActionBar">
<!-- 设置-弹窗的背景-颜色-->
<item name="android:colorBackground">#4f4f4f</item>

<!-- 字体的颜色-->
<item name="android:textColor">#ffffff</item>
<!-- 字体大小-->
<item name="android:textSize">18sp</item>

<!-- 用于替换菜单的三个小白点，换成自已的图片-->
<item name="actionOverflowButtonStyle">@style/ActionButton.Overflow.Menu</item>

<!--用于控制menu弹出的位置，位于toolbar的下面，而不是上面-->
<item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>
</style>
<style name="ActionButton.Overflow.Menu" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
<item name="android:src">@mipmap/icon_listl</item>

</style>
<!--把该属性改为false即可使menu位置位于toolbar之下-->
<style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
<item name="overlapAnchor">false</item>
</style>
</resources>

最后在menu_main中

<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="com.example.yu.toolbar.MainActivity"
>
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="设置"
app:showAsAction="never" />
<item
android:id="@+id/action_settings1"
android:orderInCategory="100"
android:title="关于"
app:showAsAction="never" />
<item

android:id="@+id/action_settings2"
android:orderInCategory="100"
android:title="查询"
app:showAsAction="never" />
<item
android:id="@+id/action_settings3"
android:orderInCategory="100"
android:title="发现"
app:showAsAction="never" />
</menu>

3、修改popmenu的分割线和宽度

在theme中添加代码

<style name="Theme.ToolBar.Menu" parent="Theme.AppCompat.Light.NoActionBar">
<!-- 设置-弹窗的背景-颜色-->
<item name="android:colorBackground">#4f4f4f</item>

<!-- 字体的颜色-->
<item name="android:textColor">#ffffff</item>
<!-- 字体大小-->
<item name="android:textSize">18sp</item>

<!-- 用于替换菜单的三个小白点，换成自已的图片-->
<item name="actionOverflowButtonStyle">@style/ActionButton.Overflow.Menu</item>

<!--用于控制menu弹出的位置，位于toolbar的下面，而不是上面-->
<item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>

<!-- 用于修改item默认的分割线-->
<item name="android:dropDownListViewStyle">@style/dropDownStyle</item>
<item name="dropDownListViewStyle">@style/dropDownStyle</item>

<!-- 用于控件popmenu的宽度-->
<item name="android:width">150dp</item>

</style>
<!--用于修改popmenu的分割线-->
<style name="dropDownStyle" parent="android:style/Widget.Holo.ListView.DropDown">
<!--<item name="android:listSelector">可添加选中背景颜色</item>-->
<item name="android:divider">#908d8d8d</item>
<item name="android:dividerHeight">0.5dp</item>
</style>

<style name="popupTextProfile" parent="@style/TextAppearance.Widget.AppCompat.ExpandedMenu.Item">
<item name="android:textColor">@android:color/white</item>
</style>

4、ToolBar使用中遇到的问题

1、使用ToolBar直接崩溃问题

崩溃日志如下：

Exception while inflating <vector>
org.xmlpull.v1.XmlPullParserException: Binary XML file line #17<vector> tag requires viewportWidth > 0
at android.support.graphics.drawable.VectorDrawableCompat.updateStateFromTypedArray(VectorDrawableCompat.java:535)
at android.support.graphics.drawable.VectorDrawableCompat.inflate(VectorDrawableCompat.java:472)
at android.support.graphics.drawable.VectorDrawableCompat.createFromXmlInner(VectorDrawableCompat.java:436)
at android.support.v7.widget.AppCompatDrawableManager$VdcInflateDelegate.createFromXmlInner(AppCompatDrawableManager.java:829)
at android.support.v7.widget.AppCompatDrawableManager.loadDrawableFromDelegates(AppCompatDrawableManager.java:303)
at android.support.v7.widget.AppCompatDrawableManager.getDrawable(AppCompatDrawableManager.java:178)
at android.support.v7.widget.AppCompatDrawableManager.getDrawable(AppCompatDrawableManager.java:173)
at android.support.v7.widget.TintTypedArray.getDrawable(TintTypedArray.java:60)
at android.support.v7.widget.Toolbar.<init>(Toolbar.java:254)
at android.support.v7.widget.Toolbar.<init>(Toolbar.java:196)
at java.lang.reflect.Constructor.constructNative(Native Method)

修改：

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.2.0'
compile 'com.android.support:design:23.2.0'
}

修改成下面代码

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:design:23.1.1'
}

2、使用ToolBar不显示菜单中的图片

在menu中的代码

<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="com.example.yu.toolbar.MainActivity"
>
<item
android:icon="@mipmap/menu_group_chat_icon"
android:id="@+id/action_settings"
android:title="发起群聊"
/>
<item
android:icon="@mipmap/menu_add_icon"
android:id="@+id/action_settings1"
android:title="添加朋友"
/>
<item
android:icon="@mipmap/men_scan_icon"
android:id="@+id/action_settings2"
android:title="查询"
/>
<item
android:icon="@mipmap/menu_feedback_icon"
android:id="@+id/action_settings3"
android:title="意见反馈"
/>
</menu>

在activity中重写父类的onPrepareOptionsPanel方法就可以显示menu中的图片

/**
* 显示item中的图片；
*
* @param view
* @param menu
* @return
*/
@Override
protected boolean onPrepareOptionsPanel(View view, Menu menu) {
if (menu != null) {
if (menu.getClass() == MenuBuilder.class) {
try {
Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
m.setAccessible(true);
m.invoke(menu, true);
} catch (Exception e) {
e.printStackTrace();
}
}
}
return super.onPrepareOptionsPanel(view, menu);
}

最后总结一下使用的style属性

<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>
</style>

<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

<style name="Theme.ToolBar.Menu" parent="Theme.AppCompat.Light.NoActionBar">
<!-- 设置-弹窗的背景-颜色-->
<item name="android:colorBackground">#4f4f4f</item>

<!-- 字体的颜色-->
<item name="android:textColor">#ffffff</item>
<!-- 字体大小-->
<item name="android:textSize">18sp</item>

<!-- 用于替换菜单的三个小白点，换成自已的图片-->
<item name="actionOverflowButtonStyle">@style/ActionButton.Overflow.Menu</item>

<!--用于控制menu弹出的位置，位于toolbar的下面，而不是上面-->
<item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>

<!-- 用于修改item默认的分割线-->
<item name="android:dropDownListViewStyle">@style/dropDownStyle</item>
<item name="dropDownListViewStyle">@style/dropDownStyle</item>

<!-- 用于控件popmenu的宽度-->
<item name="android:width">150dp</item>

</style>

<style name="ActionButton.Overflow.Menu" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
<item name="android:src">@mipmap/icon_listl</item>

</style>
<!--把该属性改为false即可使menu位置位于toolbar之下-->
<style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
<item name="overlapAnchor">false</item>
</style>

<!--用于修改popmenu的分割线-->
<style name="dropDownStyle" parent="android:style/Widget.Holo.ListView.DropDown">
<!--<item name="android:listSelector">可添加选中背景颜色</item>-->
<item name="android:divider">#908d8d8d</item>
<item name="android:dividerHeight">0.5dp</item>
</style>

<style name="popupTextProfile" parent="@style/TextAppearance.Widget.AppCompat.ExpandedMenu.Item">
<item name="android:textColor">@android:color/white</item>
</style>
</resources>

代码下载地址

http://download.csdn.net/detail/androidxiaogang/9556455