Toolbar使用详解

2016-08-07 本文已影响20482人 DoAndKeep

Toobar与ActionBar

从Android3.0(API level 11)开始，所有使用默认主题的activity都自带一个ActionBar，但是随着Android版本的迭代，ActionBar的特性不断增加，从而导致了在不同Android系统的设备上，ActionBar的显示不一致。

从Android5.0(API level 21)开始，引进了Toolbar，它包含了ActionBar最近添加的大多数特性，同时添加到了支持库中，使得在低版本设备上也可以使用Toolbar。

Toolbar与ActionBar的区别：

ToolBar就是一个View，跟其它View一样包含在布局中。
像常规View一样，Toolbar很容易来放置、实现动画以及控制。
一个Activity中可以有多个Toolbar。

Toolbar是简单使用

在应用的build.gradle中添加v7 appcompat支持库。

com.android.support:appcompat-v7:24.1.1

让Activity继承自AppCompatActivity。

public class MyActivity extends AppCompatActivity {
    // ...
}

在AndroidManifest.xml文件中，设置<application>元素使用appcompat中的某个NoActionBar主题，从而来去除使用ActionBar来提供操作栏。

<application
        android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

在activity的布局中添加Toolbar。

<android.support.v7.widget.Toolbar
   android:id="@+id/my_toolbar"
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:background="?attr/colorPrimary"
   android:elevation="4dp"
   android:theme="@style/ThemeOverlay.AppCompat.ActionBar"  
   app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

在activity的onCreate()方法中，调用setSupportActionBar()方法，并传入toolbar，这样就会将toolbar设置为activity的操作栏了。

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_my);
    Toolbar toolbar = (Toolbar) findViewById(R.id.my_toolbar);
    setSupportActionBar(toolbar);
}

运行之后，效果图如下：

Toolbar简单使用.png

至此，activity有了一个基本的操作栏。可以通过获取的toolbar的引用，调用相关API来实现更多操作，例如隐藏或显示操作栏。

Toolbar元素

上面的效果图中，只显示了App的名称，但是Toolbar可以包含以下元素：

导航按钮
应用的Logo
标题和子标题
若干个自定义View
动作菜单

好的，接下来我们就让它们全部显示出来。

显示导航按钮、应用的Logo、标题和子标题。

// 显示应用的Logo
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setDisplayUseLogoEnabled(true);
getSupportActionBar().setLogo(R.mipmap.ic_launcher);

// 显示标题和子标题  
getSupportActionBar().setDisplayShowTitleEnabled(true);
toolbar.setTitle("ToolbarDemo");
toolbar.setSubtitle("the detail of toolbar");
// 显示导航按钮
toolbar.setNavigationIcon(R.drawable.icon_back);

显示动作菜单。
首先在res/menu目录下的xml文件中定义的，要添加几个动作，则在<menu>节点下添加几个item。

<?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/toolbar_action1"
        android:icon="@drawable/icon_weibo_timeline_mine"
        android:title="Action"
        app:showAsAction="always"/>

    <item
        android:id="@+id/toolbar_action1"
        android:icon="@drawable/icon_weibo_timeline_mine"
        android:title="Action"
        app:showAsAction="never"/>

  </menu>

item的icon和title属性顾名思义，而app:showAsAction属性则是用来指定这个动作是放置在操作栏上，还是溢出菜单中。当它的值设置为”ifRomom”时，如果操作栏有空间放置，则放置在操作栏上，否则放置到溢出菜单中。当它的值设置为”always”，这个动作将总是放置在操作栏上。当它的值设置为”never”，这个动作将总是放置在溢出菜单中。

之后重写activity的onCreateOptionsMenu()方法，设置显示的menu资源：

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

当点击了按钮，可以通过重写activity的onOptionsItemSelected()方法来进行处理：

  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
      switch (item.getItemId()) {
          case R.id.toolbar_action1:
              // do something
              return true;
          default:
              // If we got here, the user's action was not recognized.
              // Invoke the superclass to handle it.
              return super.onOptionsItemSelected(item);

      }
  }

显示自定义View

因为Toolbar是ViewGroup的子类，因此可以向其内部添加View进行显示。这里我们简单的添加一个TextView显示一个文本。

<android.support.v7.widget.Toolbar
  android:id="@+id/toolbar"
  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="?attr/actionBarSize"
  android:background="?attr/colorPrimary"
  android:elevation="4dp"
  android:theme="@style/ToolbarTheme"
  app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
  app:titleTextAppearance="@style/Toolbar.TitleText">

  <TextView
      android:id="@+id/toolbar_title"
      style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:text="自定义"
      android:textSize="21sp"/>

</android.support.v7.widget.Toolbar>

好了，所有的元素都添加到了Toolbar上，运行效果图如下：

Toolbar元素

Toolber复用

应用中有很多界面，每个Activity一般都需要操作栏，且大多数activity的操作栏的元素是一致的，那每个布局文件里面都写这么多资源文件是累赘的。因此可以对Toolbar进行复用，使得布局文件看起来更精炼，更改Toolbar整体效果，如背景之类的可以更方便。

首先，在布局文件toolbar.xml中定义Toolbar。

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    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="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:contentInsetLeft="0dp"
    android:contentInsetStart="0dp"
    android:elevation="4dp"
    android:theme="@style/ToolbarTheme"
    app:navigationIcon="@drawable/icon_back"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:titleTextAppearance="@style/Toolbar.TitleText">

    <!--  any custom view -->

</android.support.v7.widget.Toolbar>

之后，在需要添加Toolbar的地方引入这个布局资源。

<include
  layout="@layout/toolbar"/>

最后，在BaseActivity(一般app都会有)中的onCreate()方法设置Toolbar。注意，这个时候Activity不再继承AppCompatActivity，而是继承BaseActivity，而BaseActivity继承AppCompatActivity。BaseActivity部分代码如下：

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    if (toolbar != null) {
        setSupportActionBar(toolbar);

        mToolbarHelper = new ToolbarHelper(toolbar);

        hanldeToolbar(mToolbarHelper);
    }
}

protected void hanldeToolbar(ToolbarHelper toolbarHelper) {}

public static class ToolbarHelper {

    private Toolbar mToolbar;

    public ToolbarHelper(Toolbar toolbar) {
        this.mToolbar = toolbar;
    }

    public Toolbar getToolbar() {
        return mToolbar;
    }

    public void setTitle(String title) {
        TextView titleTV = (TextView) mToolbar.findViewById(R.id.toolbar_title);
        titleTV.setText(title);
    }
}

代码中首先获取到Toolbar将其设置为操作栏，之后创建了一个ToolbarHelper对象，ToobarHelper主要是封装了下Toolbar，并提供操作自定义View的方法。然后调用hanldeToolbar()方法，子Activity通过重写这个方法，可以对Toolbar进行定制操作。

在真实项目中应用Toolbar

在上面我们看到了显示所有Toolbar元素的效果图，肯定会说，这跟我们产品设计的不一样，跟应用中所需要的不一样。一般我们应用中大多是这样的：

常用Toolbar.png

观察下，首先左边是一个返回按钮，中间是标题，有可能右边是文本或者按钮来提供分享、编辑之类的操作。接下来，我们来看看如何实现。

实现返回按钮，在之前我们设置过显示导航按钮、logo、标题及子标题。现在将导航按钮作为返回按钮，设置为UI提供的图标，而logo和标题类的设置不显示就可以了。

接下来就是设置事件监听了，还记得添加按钮时的事件处理么？一样的都是在onOptionsItemSelected()进行处理，它的id是android.R.id.home：

@Override
public boolean onOptionsItemSelected(MenuItem item) {
  switch (item.getItemId()) {
      case android.R.id.home:
          FragmentManager fm = getSupportFragmentManager();
          if (fm != null && fm.getBackStackEntryCount() > 0) {
              fm.popBackStack(null, FragmentManager.POP_BACK_STACK_INCLUSIVE);
          } else {
              finish();
          }
          return true;
      default:
          return super.onOptionsItemSelected(item);
  }
}

实现中间标题的显示。在上一步我们禁用了Toolbar原本显示在左边的标题，中间的标题我们可以通过向Toolbar中添加TextView实现，与之前显示Toolbar上所有元素中的自定义View是一样的。对于更改标题，则通过上面Toolbar复用所提到的ToolbarHelper进行操作。
右边的文本及图标显示。这个可以使用Toolbar本身的menu(前面已经介绍过)，也可以将其作为自定义View。

总之，这三部分(左边+中间+右边)实现方式大致如此，根据你的项目，合理地进行安排。

最后，附上源码地址：
https://github.com/FILWAndroid/DevJourney

关于源码：

不只是本文涉及的代码，会包含很多知识点的代码，应该都会在我的简书中进行介绍。
有可能代码与本文中所贴出来的有差异，但应该都是我觉得更好的方式吧。
欢迎大家对我进行批评教育。

Toolbar使用详解

Toobar与ActionBar

Toolbar是简单使用

Toolbar元素

Toolber复用

在真实项目中应用Toolbar

猜你喜欢

热点阅读