转载

纸墨设计文档: Toolbar

在谷歌官方的纸墨设计文档中介绍如下：

Toolbar 是位于内容上方的包含功能按钮菜单的区域。当下面的内容滚动的时候，Toobar 会遮挡下面的内容并且内容不能穿过 Toolbar。

如何使用

在项目的 build.gradle 文件中添加 appcompat 和 design 库：

Java

dependencies {     compile 'com.android.support:cardview-v7:X.X.X' // where X.X.X version     compile 'com.android.support:design:X.X.X' // where X.X.X version }

dependencies {     compile 'com.android.support:cardview-v7:X.X.X' // where X.X.X version     compile 'com.android.support:design:X.X.X' // where X.X.X version }

你的 Activity 继承至 android.support.v7.app.AppCompatActivity ：

Java

public class MainActivity extends AppCompatActivity {       ... }

public class MainActivity extends AppCompatActivity {       ... }

在布局文件中使用 Toolbar

XHTML

<android.support.v7.widget.Toolbar       android:layout_width="fill_parent"     android:layout_height="?attr/actionBarSize"     android:background="?colorPrimary"     app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"     />

<android.support.v7.widget.Toolbar       android:layout_width="fill_parent"     android:layout_height="?attr/actionBarSize"     android:background="?colorPrimary"     app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"     />

如何修改样式？

纸墨设计文档: Toolbar

在你的 styles.xml 中定义自定义样式：

XHTML

<style name="ToolbarTextAppearance">       <item name="android:fontFamily">sans-serif-condensed</item>     <item name="android:textColor">@android:color/white</item>     <item name="android:shadowDx">1</item>     <item name="android:shadowDy">1</item>     <item name="android:shadowRadius">2</item>     <item name="android:shadowColor">?colorAccent</item> </style>  <style name="ToolbarTextAppearance.Title">       <item name="android:textSize">20sp</item> </style>  <style name="ToolbarTextAppearance.Subtitle">       <item name="android:textSize">14sp</item> </style>  <style name="MyToolbar">       <item name="theme">@style/ThemeOverlay.AppCompat.Dark</item>     <item name="android:background">?colorPrimary</item>     <item name="android:elevation">4dp</item> </style>

<stylename="ToolbarTextAppearance">       <itemname="android:fontFamily">sans-serif-condensed</item>     <itemname="android:textColor">@android:color/white</item>     <itemname="android:shadowDx">1</item>     <itemname="android:shadowDy">1</item>     <itemname="android:shadowRadius">2</item>     <itemname="android:shadowColor">?colorAccent</item> </style>   <stylename="ToolbarTextAppearance.Title">       <itemname="android:textSize">20sp</item> </style>   <stylename="ToolbarTextAppearance.Subtitle">       <itemname="android:textSize">14sp</item> </style>   <stylename="MyToolbar">       <itemname="theme">@style/ThemeOverlay.AppCompat.Dark</item>     <itemname="android:background">?colorPrimary</item>     <itemname="android:elevation">4dp</item> </style>

通过 style 属性来使用该theme，还可以通过 titleTextAppearance 和 subtitleTextAppearance 属性来修改标题和子标题的文字样式。

XHTML

<android.support.v7.widget.Toolbar       android:id="@+id/toolbar"     android:layout_width="match_parent"     android:layout_height="?actionBarSize"     app:title="Toolbar"     app:subtitle="Toolbars are amazing"     app:titleTextAppearance="@style/ToolbarTextAppearance.Title"     app:subtitleTextAppearance="@style/ToolbarTextAppearance.Subtitle"     style="@style/MyToolbar"     />

<android.support.v7.widget.Toolbar       android:id="@+id/toolbar"     android:layout_width="match_parent"     android:layout_height="?actionBarSize"     app:title="Toolbar"     app:subtitle="Toolbars are amazing"     app:titleTextAppearance="@style/ToolbarTextAppearance.Title"     app:subtitleTextAppearance="@style/ToolbarTextAppearance.Subtitle"     style="@style/MyToolbar"     />

带有图标菜单的 Toolbar

纸墨设计文档: Toolbar

通过 menu.xml 来创建图标菜单：

XHTML

<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">      <item         android:id="@+id/action_favorite"         android:icon="@drawable/ic_favorite"         app:showAsAction="always"/>      <item         android:id="@+id/action_search"         android:icon="@drawable/ic_search"         app:showAsAction="always"/>      <item         android:id="@+id/action_settings"         android:orderInCategory="100"         android:title="@string/action_settings"         app:showAsAction="never"/> </menu>

<menuxmlns:android="http://schemas.android.com/apk/res/android"         xmlns:app="http://schemas.android.com/apk/res-auto"       xmlns:tools="http://schemas.android.com/tools">       <item         android:id="@+id/action_favorite"         android:icon="@drawable/ic_favorite"         app:showAsAction="always"/>       <item         android:id="@+id/action_search"         android:icon="@drawable/ic_search"         app:showAsAction="always"/>       <item         android:id="@+id/action_settings"         android:orderInCategory="100"         android:title="@string/action_settings"         app:showAsAction="never"/> </menu>

通过 inflateMenu 函数来使用上面定义的图标菜单：

Java

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);   toolbar.inflateMenu(R.menu.main);

Toolbartoolbar = (Toolbar) findViewById(R.id.toolbar);   toolbar.inflateMenu(R.menu.main);

通过实现并设置 Toolbar.OnMenuItemClickListener 来处理点击事件：

Java

public class MyActivity extends AppCompatActivity       implements Toolbar.OnMenuItemClickListener {         ... toolbar.setOnMenuItemClickListener(this);           ...            @Override public boolean onMenuItemClick(MenuItem item) {       switch (item.getItemId()) {         case R.id.action_favorite:             Toast.makeText(this, "Favorite", Toast.LENGTH_SHORT).show();             return true;          case R.id.action_search:             Toast.makeText(this, "Search", Toast.LENGTH_SHORT).show();             return true;     }      return true; }

public class MyActivityextends AppCompatActivity       implements Toolbar.OnMenuItemClickListener {         ... toolbar.setOnMenuItemClickListener(this);         ...          @Override public boolean onMenuItemClick(MenuItemitem) {       switch (item.getItemId()) {         case R.id.action_favorite:             Toast.makeText(this, "Favorite", Toast.LENGTH_SHORT).show();             return true;           case R.id.action_search:             Toast.makeText(this, "Search", Toast.LENGTH_SHORT).show();             return true;     }       return true; }

带有返回按钮的 Toolbar

纸墨设计文档: Toolbar

在你的 styles.xml 中定义自定义样式：

XHTML

<style name="MyToolbar">       <item name="theme">@style/ThemeOverlay.AppCompat.Dark</item>     <item name="navigationIcon">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>     <item name="android:background">?colorPrimary</item>     <item name="android:elevation">4dp</item> </style>

<stylename="MyToolbar">       <itemname="theme">@style/ThemeOverlay.AppCompat.Dark</item>     <itemname="navigationIcon">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>     <itemname="android:background">?colorPrimary</item>     <itemname="android:elevation">4dp</item> </style>

通过 style 属性来使用该theme。

XHTML

<android.support.v7.widget.Toolbar       android:id="@+id/toolbar"     android:layout_width="match_parent"     android:layout_height="?actionBarSize"     app:title="Toolbar"     app:subtitle="Toolbars are amazing"     style="@style/MyToolbar"     />

<android.support.v7.widget.Toolbar       android:id="@+id/toolbar"     android:layout_width="match_parent"     android:layout_height="?actionBarSize"     app:title="Toolbar"     app:subtitle="Toolbars are amazing"     style="@style/MyToolbar"     />

处理返回按钮点击事件。

Java

toolbar.setNavigationOnClickListener(new View.OnClickListener() {       @Override     public void onClick(View v) {         onBackPressed();     } });

toolbar.setNavigationOnClickListener(new View.OnClickListener() {       @Override     public void onClick(View v) {         onBackPressed();     } });

高度更大的 Toolbar

纸墨设计文档: Toolbar

在你的 styles.xml 中定义自定义样式：

XHTML

<style name="MyToolbar">       <item name="theme">@style/ThemeOverlay.AppCompat.Dark</item>     <item name="navigationIcon">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>     <item name="titleMarginTop">?actionBarSize</item>     <item name="android:background">?colorPrimary</item>     <item name="android:elevation">4dp</item> </style>

<stylename="MyToolbar">       <itemname="theme">@style/ThemeOverlay.AppCompat.Dark</item>     <itemname="navigationIcon">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>     <itemname="titleMarginTop">?actionBarSize</item>     <itemname="android:background">?colorPrimary</item>     <itemname="android:elevation">4dp</item> </style>

通过 style 属性来使用该theme。

XHTML

<android.support.v7.widget.Toolbar       android:id="@+id/toolbar"     android:layout_width="match_parent"     android:layout_height="112dp"     app:title="Toolbar"     app:subtitle="Toolbars are really cool"     style="@style/MyToolbar"     />

<android.support.v7.widget.Toolbar       android:id="@+id/toolbar"     android:layout_width="match_parent"     android:layout_height="112dp"     app:title="Toolbar"     app:subtitle="Toolbars are really cool"     style="@style/MyToolbar"     />

原文 http://blog.chengyunfeng.com/?p=848

正文到此结束