纸墨设计文档: Toolbar

jopen 9年前

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

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  }
</div>
  • 你的 Activity 继承至 android.support.v7.app.AppCompatActivity ：

Java 

public class MainActivity extends AppCompatActivity {        ...  }
public class MainActivity extends AppCompatActivity {        ...  }
</div>
  • 在布局文件中使用 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"      />
</div>

如何修改样式？

  • 在你的 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>  
</div>
  • 通过 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"      />
</div>

带有图标菜单的 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>
</div>
  • 通过 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);  
</div>
  • 通过实现并设置 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;  }
</div>

带有返回按钮的 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>  
</div>
  • 通过 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"      />
</div>
  • 处理返回按钮点击事件。

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();      }  });
</div>

高度更大的 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>  
</div>
  • 通过 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"      />
</div> </div>

来自： http://blog.chengyunfeng.com/?p=848

相关经验