Material Design

Material Design - Toolbar 使用总结

在此之前使用 Toolbar 时都是通过笔记零散的记录下使用方式及一些方法，很少去系统性进行整理，以至于会出现东找找西找找的现象，所以决定写篇文章系统梳理下。本文只是我个人的使用总结，如果想看详细的资料，可以看Android开发：最详细的 Toolbar 开发实践总结 和 android：ToolBar详解（手把手教程） 这两篇文章，这也是我最初所看的文章。

• 主题修改
  新建程序默认都是显示 ActionBar 的，所以先要将 ActionBar 隐藏并在 xml 文件中使用 V7 包下的 Toolbar ，否则无法向下兼容。

<application        android:allowBackup="true"        android:icon="@mipmap/ic_launcher"        android:label="@string/app_name"        android:roundIcon="@mipmap/ic_launcher_round"        android:supportsRtl="true"        android:theme="@style/AppTheme">        ...</application>

可以看到 android:theme 属性指定了一个 AppTheme 的主题，打开 res/values/styles.xml 文件，如下

<resources>   <!-- Base application theme. --><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></style></resources>

可以看到这里引用了 DarkActionBar 主题，这是个深色的 ActionBar 主题，而使用 Toolbar 需要一个不带 ActionBar 的主题， 常有Theme.AppCompat.NoActionBar 和 Theme.AppCompat.Light.NoActionBar 两种主题可选。
Theme.AppCompat.NoActionBar 表示深色主题，即界面的主题颜色为深色，陪衬颜色为浅色，而Theme.AppCompat.Light.NoActionBar 刚好与之相反。根据项目需求选择合适的主题，这里选用 Theme.AppCompat.Light.NoActionBar 。

选择后如下

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">   <!-- Customize your theme here. -->   <item name="colorPrimary">@color/colorPrimary</item>   <item name="colorPrimaryDark">@color/colorPrimaryDark</item>   <item name="colorAccent">@color/colorAccent</item></style>

---

• 使用方式
  经过修改主题，ActionBar 已经被隐藏起来，那么如何使用 Toolbar 代替 ActionBar 呢？在替换之前先看下 Toolbar 的 xml文件，

    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:background="?attr/colorPrimary"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"        app:popupTheme="@style/popup_theme"/>

此处 Toolbar 的Theme被单独指定，可以更加实际需求进行设置，app:popupThme 属性是 Toolbar 上弹出菜单的主题。
在 Activity 中

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

首先得到 Toolbar 的实例，在调用 setSupportActionBar() 方法将 Toolbar 的实例传入即可。Toolbar 也可执行各种属性的设置，如 setTitle() 、 setSubTitle() 、 setNavigationIcon() 等等操作。当然也可在 xml 中进行属性设置。如果属性是在 Android5.0 新增的，则需使用 xmlns:app 命名空间，如 app:title = “xxx”。

• Toolbar Menu
  res 目录下创建相关 xml 文件，如下

<menu xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:app="http://schemas.android.com/apk/res-auto">    <item        android:id="@+id/action_settings"        android:orderInCategory="100"        android:title="@string/action_settings"        app:showAsAction="never"/></menu>

showAsAction可选值：
always 表示永远显示在 Toolbar 上，如果屏幕空间不够在不显示；
ifRoom 表示屏幕空间足够的情况下显示在 Toolbar 中，不够的话显示在菜单当中；
never 表示永远显示在菜单当中；
collapseActionView 表示与 android:actionViewClass 相关联的操作视图是可折叠的。

Activity 中重写相关方法

  @Override  public boolean onCreateOptionsMenu(Menu menu)  {    getMenuInflater().inflate(R.menu.menu_main, menu);    return true;  }  @Override  public boolean onOptionsItemSelected(MenuItem item)  {   switch (item.getItemId())    {      case R.id.action_settings:        break;      default:        break;    }    return super.onOptionsItemSelected(item);  }

或使用 Toolbar 实例初始化Menu

 @Override  protected void onCreate(Bundle savedInstanceState)  {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);    toolbar.inflateMenu(R.menu.menu_main);    //加载Menu    toolbar.setOnMenuItemClickListener(this); //监听    setSupportActionBar(toolbar);  }  @Override  public boolean onMenuItemClick(MenuItem item)  {    switch (item.getItemId())    {      case R.id.action_settings:        break;      default:        break;    }    return false;  }

默认情况下 Toolbar Menu 弹出的位置位于 Toolbar 上，可通过修改 app:popupTheme 主题中属性使其位于 Toolbar 下方。

<item name="overlapAnchor">false</item>//主题中设置

这里是 overlapAnchor 属性，而不是 android:overlapAnchor 属性。

---

• Toolbar 添加搜索

点击前效果如下：

---

点击后效果如下：

---

输入搜索内容后如下：

这里控件图标及提示文字都进行了修改。

首先修改 menu.xml 文件

<menu xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:app="http://schemas.android.com/apk/res-auto"><item android:id="@+id/toolbar_search"       　 android:actionViewClass="android.support.v7.widget.SearchView"　android:icon="@drawable/ic_toolbar_menu"　android:title="@string/toolbar_title"　app:showAsAction="collapseActionView|ifRoom"/></menu>

menu 中指定了 android:actionViewClass 属性及自定义 icon 图标，指定 app:showAction = “collapseActionView|ifRoom” 属性。

Activity 的 onCreateOptionsMenu(Menu menu) 中，

  @Override  public boolean onCreateOptionsMenu(Menu menu)  {    getMenuInflater().inflate(R.menu.menu_main, menu);    MenuItem item = menu.getItem(0);    SearchView searchView = new SearchView(this);    //设置展开后图标的样式,false时ICON在搜索框外,true为在搜索框内，无法修改    searchView.setIconifiedByDefault(false);    searchView.setQueryHint("搜索");    searchView.setSubmitButtonEnabled(true);//设置最右侧的提交按钮    item.setActionView(searchView);    //搜索字体颜色    TextView textView = (TextView) searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);    textView.setHintTextColor(Color.WHITE);    textView.setTextColor(Color.WHITE);        //搜索字体颜色    TextView textView = (TextView) searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);    textView.setHintTextColor(Color.WHITE);    textView.setTextColor(Color.WHITE);    //右侧提交    ImageView goBtn = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_go_btn);    goBtn.setImageDrawable(getDrawable(R.drawable.ic_go_btn));    //搜索    ImageView magBtn = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_mag_icon);    magBtn.setImageDrawable(getDrawable(R.drawable.ic_toolbar_menu));    //清除    ImageView closeBtn = (ImageView) searchView.findViewById(android.support.v7.appcompat.R.id.search_close_btn);    closeBtn.setImageDrawable(getDrawable(R.drawable.ic_close_btn));    return true;  }

通过系统 ＶiewId 找到相关控件并进行设置即可。

添加搜索回调监听

searchView.setOnQueryTextListener(this);//搜索监听

• 总结
  Toolbar 比 ActionBar 灵活的很多，Google 推荐开发者使用 Toolbar 。这里只列出 Toolbar 的一小部分用法，配合 Material Design 中其他控件使用时，会展现出更加炫酷的效果。

• 后记
  第一次写博客，未写之前感觉和写个笔记没啥大区别，当动起手写才发现自己想的太简单了，笔记是零散、片段式记录下来，而要写好一篇博客需要在头脑中有良好的大纲，清晰的思路，这样才能良好的表达出来，同时也可加深自己对其认识。阅读中如果发现不妥之处，希望大家踊跃提出，帮助纠正，同时也请大家海涵。
  学习贵在坚持，加油！！！