前言
从 Android 3.0 开始，推出了 ActionBar。但是，随着版本的升级，ActionBar 的行为也发生了变化。从 5.0 开始，ActionBar 提供了 Material Design 的体验。但是想要 5.0 之前的系统也支持 Material Design 怎么办呢？那么就用 Toolbar 吧！Toolbar 在 Support Library 中，所有对应的系统版本都能有 Material Design 的体验。
Toolbar 的简单使用
首先添加 v7 appcompat 库
compile 'com.android.support:appcompat-v7:25.4.0'
为了能够用 Toolbar，我们需要隐藏原来的 ActionBar。
通过设置主题来隐藏
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
或者也可以添加属性来隐藏
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
下面介绍 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
app:logo="@drawable/ic_android_white"
app:navigationIcon="@drawable/ic_menu_white"
app:subtitle="subtitle"
app:subtitleTextAppearance="@style/MySubTitleStyle"
app:subtitleTextColor="@android:color/white"
app:title="Toolbar"
app:titleMarginStart="30dp"
app:titleTextAppearance="@style/MyTitleStyle"
app:titleTextColor="@android:color/white" />
</LinearLayout>
app:navigationIcon：设置 NavigationIcon，位于 Toolbar 的最左边
app:logo：设置 Logo，位于 NavigationIcon 的右边，Title 的左边
app:title：设置标题
app:titleTextColor：设置标题颜色
app:titleTextAppearance：设置标题样式（字体大小，字体颜色，等等）
app:titleMarginStart：设置标题左边的 Margin，类似的还有
app:titleMargin、app:titleMarginTop、app:titleMarginBottom、app:titleMarginEnd
app:subtitle：设置副标题
app:subtitleTextColor：设置副标题颜色
app:subtitleTextAppearance：设置副标题样式（字体大小，字体颜色，等等）
MyTitleStyle 和 MySubTitleStyle 如下
<style name="MyTitleStyle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">20sp</item>
</style>
<style name="MySubTitleStyle" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
<item name="android:textSize">10sp</item>
</style>
Activity 中的代码如下
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.tool_bar);
setSupportActionBar(toolbar);
}
}
运行效果如下
添加 Navigation Icon 的点击事件
Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "Navigation Icon Clicked!", Toast.LENGTH_SHORT).show();
}
});
Toolbar 添加 Action Menu
Toolbar 和 ActionBar 一样，也可以添加 Action Menu。
覆写 onCreateOptionsMenu 添加 Menu，覆写 onOptionsItemSelected 添加点击事件。
代码如下
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.my_menu, menu);
return super.onCreateOptionsMenu(menu);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
Toast.makeText(this, item.getTitle(), Toast.LENGTH_SHORT).show();
return super.onOptionsItemSelected(item);
}
my_menu.xml 如下，定义在 res/menu 下
<?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/menu_item1"
android:icon="@drawable/ic_add"
android:title="添加"
app:showAsAction="ifRoom" />
<item
android:id="@+id/menu_item2"
android:icon="@drawable/ic_edit"
android:title="编辑"
app:showAsAction="ifRoom" />
<item
android:id="@+id/menu_item3"
android:icon="@drawable/ic_delete"
android:title="删除"
app:showAsAction="ifRoom" />
<item
android:id="@+id/menu_item4"
android:icon="@drawable/ic_setting"
android:title="设置"
app:showAsAction="ifRoom" />
<item
android:id="@+id/menu_item5"
android:icon="@drawable/ic_zoom_in"
android:title="放大"
app:showAsAction="ifRoom" />
<item
android:id="@+id/menu_item6"
android:icon="@drawable/ic_zoom_out"
android:title="缩小"
app:showAsAction="ifRoom" />
</menu>
app:showAsAction="ifRoom" 表示如果空间足够，就显示在 Toolbar 上，如果空间不够，Toolbar 最右边就会显示三个点的图标，这个三个点的图标叫做 Overflow Icon，溢出按钮，然后点击该图标会出来一个 Overflow Menu，溢出菜单，显示不下的 Item 都会显示到这个 Overflow Menu 中。
空间足够的显示 Icon 在 Toolbar 上。空间不够的显示文字在 Overflow Menu 中。
长按 Icon 会以 Toast 的方式把 Title 显示出来，这个 Toast 会直接显示在对应 Icon 的下方。
显示效果如下
点击 Overflow Icon 之后显示的 Overflow Menu 的效果如下
长按之后显示的 Toast 如下
Overflow Icon 的颜色可以修改，下面把它修改为白色
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<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>
Overflow Menu 的样式也可以修改
<style name="MyPopupTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColor">@android:color/white</item>
<item name="android:textSize">12sp</item>
<item name="android:colorBackground">@android:color/black</item>
<item name="overlapAnchor">false</item>
</style>
app:popupTheme="@style/MyPopupTheme"
overlapAnchor 的作用是让弹出来的 Overflow Menu 不盖住 Toolbar。
效果如下
Overflow Icon 的图标也可以修改
toolbar.setOverflowIcon();
Toolbar 添加 Custom View
Toolbar 其实是一个 ViewGroup，也可以自己添加 View 来达到想要的效果。
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom View"
android:textColor="@android:color/white" />
</android.support.v7.widget.Toolbar>
运行效果如下
发现有默认的 Title 显示出来了，设置不显示即可
getSupportActionBar().setDisplayShowTitleEnabled(false);
效果如下
