使用ToolBar代替AppCompatActivity中的ActionBar

Android Toolbar AppCompatActivity Actionbar

部分译自：https://guides.codepath.com/android/Using-the-App-Toolbar
图片引用：http://blog.mosil.biz/2014/10/android-toolbar/
Google文档：https://developer.android.com/training/appbar/index.html#SplitBar

首先明确ActionBar（也叫App Bar）的作用：固定在整个应用的顶部，显示一些导航信息。其中可以包含：

• 应用图标(material design规范不再建议加入图标)
• 返回上层的导航
• 应用名或者具体到某个Activity的名称
• Activity的主要功能（如：搜索）
• 固定的导航（包括导航的抽屉）

Google官方定义：

应用栏AppBar也称操作栏Actionbar，是应用活动中最重要的一项设计元素，因为它为用户提供了熟悉的视觉结构和交互元素。使用应用栏可让您的应用与其他 Android 应用保持一致，允许用户快速了解如何使用您的应用并获得一流的体验。应用栏的主要功能包括：

• 一个专用区域，可以标识您的应用并指示用户在应用中的位置。
• 以可预测的方式访问搜索等重要操作。
• 支持导航和视图切换（通过标签页或下拉列表）。

为什么要用ToolBar替代ActionBar？

• ToolBar是一个ViewGroup，可以包含一个布局文件
• 作为一个视图，它更容易被调整各种属性。
• 多种不同的ToolBar可以在一个Activity文件中定义。
  明确一点：如果你只想要用到一个固定的、只显示返回按钮和一些固定内容的顶栏，那么ActionBar依然可以很好的满足你的要求。

兼容的安卓版本

ToolBar是在安卓5.0中引入的(android.widget.Toolbar)。在不引入兼容库的情况下，只能在5.0以上的版本运行；而在引用android.support.v7.widget.Toolbar类之后，可以支持安卓2.1以上版本。

下面开始动手

• 确保应用引入了android.support.v7兼容库。

    //build.gradle
    compile 'com.android.support:appcompat-v7:25.3.0'

• 然后更改Application的主题，找到values文件夹下的styles.xml，更改主题为NoActionBar

<!--AndroidManifest.xml-->
<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme
        <!--修改AppTheme的定义-->
        >

<!--styles.xml-->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

• 接着在layout文件中创建自己的ToolBar(默认情况下最外层的RelativeLayout的与四周的Padding不为0，会导致ToolBar无法与完全与状态栏贴合，删去各个Padding属性即可)。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="me.zxm.learnactionbartoolbar.MainActivity"
        >
    <android.support.v7.widget.Toolbar
            android:id="@+id/ToolBar"
            android:minHeight="?attr/actionBarSize"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:titleTextColor="@android:color/white"
            android:background="?attr/colorPrimary"
            ></android.support.v7.widget.Toolbar>
</RelativeLayout>

• 在Activity文件中设置ToolBar

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setSupportActionBar((Toolbar) findViewById(R.id.ToolBar));
    }
}

再定制一下ToolBar的样式

第二个写错了（应该是setLogo）

• 贴一下前四个方法的代码，可以对应上图来看。

package me.zxm.learnactionbartoolbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
public class MainActivity extends AppCompatActivity {
    private Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.ToolBar);
        toolbar.setNavigationIcon(R.mipmap.ic_launcher);
        //原文写到必须在setSupportActionBar后调用，我测试后发现并不需要
        toolbar.setLogo(R.mipmap.ic_launcher);
        toolbar.setTitle("ToolBar");
        //如果未调用setTitle，在setSupportActionBar时,
        //就会自动把Title设置为:
        //在AndroidManifest.xml中声明、在strings.xml定义的
        //android:label(默认为应用名)。
        toolbar.setSubtitle("toolbar");
        setSupportActionBar(toolbar);
    }
}

• 第五个原文没有讲清楚，我来说一下。设置ClickListener前，必须让ToolBar有一个Menu类型的布局文件，设置好每个按钮，然后在页面呈现出来。具体过程如下：

  • 首先在res文件夹下新建menu文件夹，然后在该文件夹下创建一个布局文件

  <?xml version="1.0" encoding="utf-8"?>
  <menu
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:android="http://schemas.android.com/apk/res/android">
  <item
          android:id="@+id/mySearch"
          android:icon="@android:drawable/ic_menu_search"
          app:showAsAction="ifRoom"
          android:title="Search">
  </item>
  <item
          android:id="@+id/myMore"
          android:icon="@android:drawable/ic_menu_more"
          app:showAsAction="ifRoom|withText"
          android:title="More">
  </item>
  </menu>

  • 然后在Activity文件中让ActionBar显示这个布局，这时你设计的按钮才会被生成在界面中。

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
      getMenuInflater().inflate(R.menu.menu,toolbar.getMenu());
      return true;
  }

  • 最后才可以设置ClickListener(必须在setSupportActionBar后设置才会生效)。

  setSupportActionBar(toolbar);
  toolbar.setOnMenuItemClickListener(this);
  //让MainAcitivty实现Toolbar.OnMenuItemClickListener

  @Override
  public boolean onMenuItemClick(MenuItem item) {
      String string="";
      switch (item.getItemId()){
          case R.id.mySearch:
              string+="search ";
              Log.d("toolbar","s");
              break;
          case R.id.myMore:
              string+="more ";
              Log.d("toolbar","m");
              break;
      }
      Toast.makeText(MainActivity.this,string,Toast.LENGTH_SHORT).show();
      return true;
  }

最后的几句话

• 其实ToolBar的很多方法，在ActionBar中 都有替代，比如：

  • setLogo方法

  getSupportActionBar().setDisplayShowHomeEnabled(true);
  //设置是否在“home”显示，默认为false，也就是启动页面是否显示。
  //若为否，下面设置的Logo将不会在启动页面显示。
  getSupportActionBar().setLogo(R.mipmap.ic_launcher);        
  getSupportActionBar().setDisplayUseLogoEnabled(true);

  • onOptionsItemSelected和onMenuItemClick实现的功能是一样的

  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
      String string="";
      switch (item.getItemId()){
          case R.id.mySearch:
              string+="search ";
              Log.d("toolbar","s");
              break;
          case R.id.myMore:
              string+="more ";
              Log.d("toolbar","m");
              break;
      }
      Toast.makeText(MainActivity.this,string,Toast.LENGTH_SHORT).show();
      return true;
  }