ActionBar 和 Toolbar

　　在Android 3.0中除了Fragment外，ActionBar也是一个重要的内容。ActionBar主要是用于代替传统的标题栏与Menu按钮：

-  标题栏：使用ActionBar来做标题栏，可以展示更多丰富的内容，且方便操控。
-  Menu按钮：
   -  在Android 3.0系统之前，Android手机有一个专门的Menu按钮用于打开设置选项。
   -  从Android 3.0系统开始，系统通过引进ActionBar移除了系统对于硬件Menu按钮的依赖，让用户在屏幕的标题栏上直接可以看到各种设置选项。当然，这不意味着OEM厂商们不会继续在手机上提供这个按钮，但从Google的角度来说，Menu按钮已经是过去时了。

第一节 V7 appcompat

　　本节将以添加V7 appcompat库的方式来讲解如何使用ActionBar。

　　ActionBar有多种形式，你既可以在上面同时放置多个图标、按钮，也可以什么都不放。但对于大多数应用来说，ActionBar可以分割为3个不同的功能区域，下面是一张使用ActionBar的界面截图：

　　其中，[1]是ActionBar的图标与标题，[2]是两个action按钮，[3]是overflow按钮（就是那三个点，点击后会打开一个列表）。

　　提示：

-  如果你使用的是Eclipse，并且搭建了最新的开发环境，那么在创建新项目的时候，会自动引入v7 appcompat库，如果没有自动引用，可以从<sdk>/extras/android/support/v7/appcompat/中复制一份。

图标和标题

　　下图展示的是一个新项目的MainActivity在三星S5手机（左）以及Android2.2模拟器（右）中的运行效果。

　　从上图中我们可以看到，当ActionBar运行在Android3.0以下的版本中时，标题栏的右上角不会出现overflow按钮，但是我们可以通过点击设备的Menu按钮来弹出overflow菜单。也就是说Android3.0中的overflow按钮就等价于Android3.0之前的Menu按钮。（不过，即便系统版本高于Android3.0也不一定保证会显示overflow按钮，具体后述）。
　　现在我们要实现如下图所示的一个效果：

　　由于ActionBar在不同的Android版本中显示的效果是不一样的，因此为了提供统一的视觉效果，我们接下来要修改一下ActionBar的背景图片。
　　范例1：修改背景图片。

public class MainActivity extends AppCompatActivity {

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// 修改ActionBar的背景图片。

getSupportActionBar().setBackgroundDrawable(getResources().getDrawable(R.drawable.bg_topbar));

}

// 以下省略其它代码。

}

语句解释：
-  getSupportActionBar()方法继承自android.support.v7.app.AppCompatActivity类。
-  getSupportActionBar()方法返回一个ActionBar对象，我们可以通过这个对象来修改ActionBar的样式。
-  ActionBar的setBackgroundDrawable()方法就是用来修改背景图片的。

　　ActionBar支持两个文本标题，在上面的被称为主标题（title），在下面的被称为子标题（subTitle）。
　　范例2：修改标题文本。

public class MainActivity extends ActionBarActivity {

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// 修改ActionBar的背景图片。

getSupportActionBar().setBackgroundDrawable(getResources().getDrawable(R.drawable.bg_topbar));

// 修改标题文字。

getSupportActionBar().setTitle( "店小二。");

getSupportActionBar().setSubtitle( "陌陌号：18204884");

}

// 以下省略其它代码。

}

语句解释：
-  调用setTitle()方法来设置标题文本。
-  调用setSubtitle()方法来设置子标题文本。如果不设置子标题，则默认只显示主标题，且是垂直居中。
-  调用getSupportActionBar().setDisplayShowTitleEnabled(false);可以同时隐藏两个标题。
-  调用getSupportActionBar().setDisplayShowHomeEnabled(true);显示图标。
-  调用getSupportActionBar().setIcon(R.drawable.ic_launcher);设置图标。

　　仔细观察上面的图1可以发现，当程序运行在三星S5手机上时，标题的字体颜色为白色，而运行在Android2.2模拟器时，颜色则为黒色。这个情况肯定是不能忍的，需要给它们设置一个统一的颜色。
　　为了方便管理与更新，我们不会去直接修改V7 appcompat库里的属性，而是在自己项目里创建一个res\values\custom_actionbar.xml文件，并在该文件中创建一些与V7 appcompat库中同名的属性，即用我们的值覆盖掉它们的值。

　　范例3：修改字体颜色。

</style>

<item name="actionBarStyle">@style/MyActionBar </item>

</style>

<item name="background">@android:color/black </item>

<item name="titleTextStyle">@style/MyActionBarTitleText </item>

<item name="subtitleTextStyle">@style/MyActionBarSubtitleText </item>

</style>

</style>

<item name="android:textColor">#cccfff </item>

</style>

</resources>

语句解释：
-  首先，定义一个名为MyActionBarTheme的主题，并为该主题指定了新的ActionBar样式。
-  然后，又为ActionBar指定了背景色、主标题、子标题的样式。
-  最后，就可以在清单文件中为某个Activity使用这个主题了。

ActionButton

　　前面已经说了，在Android3.0之后菜单被移到了标题栏上，以便用户直接可以看到各种设置选项。
　　ActionButton相当于之前Menu菜单下的一个菜单项（MenuItem），它也包含一个图标和文字，同时它会直接显示在ActionBar上。当然，如果按钮过多导致ActionBar上显示不完，多出的一些按钮可以隐藏在overflow里面，点击一下overflow按钮就可以看到全部的ActionButton了。

　　现在我们要实现如下图所示的一个效果：

　　范例1：创建菜单文件（res\menu\main.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_plus"

android:icon= "@drawable/actionbar_add_icon"

android:title= "@string/action_plus"

app:showAsAction= "always"/>

<item

android:id= "@+id/action_album"

android:icon= "@drawable/ofm_photo_icon"

android:title= "我的相册"

app:showAsAction= "never"/>

<item

android:id= "@+id/action_collection"

android:icon= "@drawable/ofm_collect_icon"

android:title= "我的收藏"

app:showAsAction= "never"/>

<item

android:id= "@+id/action_card"

android:icon= "@drawable/ofm_card_icon"

android:title= "我的银行卡"

app:showAsAction= "never"/>

<item

android:id= "@+id/action_settings"

android:icon= "@drawable/ofm_setting_icon"

android:title= "设置"

app:showAsAction= "never"/>

<item

android:id= "@+id/action_feed"

android:icon= "@drawable/ofm_feedback_icon"

android:title= "意见反馈"

app:showAsAction= "never"/>

</menu>

语句解释：
-  各个Activity的Actionbar里包含的选项可能是不同的，因而每个Activity会有一个对应的menu.xml文件。
-  在menu.xml中，每一个<item>标签都表示一个ActionButton。
-  其中android:id、android:icon、android:title依次表示ActionButton的id、图标、文本标题。
-  其中app:showAsAction属性用来设置ActionButton显示的位置，注意这个属性是在app命名空间里的。常用取值为：
   -  always：表示永远显示在ActionBar中，如果屏幕空间不够则无法显示。
   -  ifRoom：表示屏幕空间够的情况下显示在ActionBar中，不够的话就显示在overflow中。
   -  never：则表示永远显示在overflow中。

　　范例2：将菜单添加到Activity的ActionBar中。

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.main, menu);

return true;

}

语句解释：
-  在MainActivity中重写此方法即可，当Activity检测到它自己没有创建过菜单时，就会调用此方法，此方法只会调用一次。系统会根据方法的返回值做出相应的反应：
   -  返回true意味着菜单已初始化完毕，系统会在ActionBar中显示出overflow按钮。
   -  返回false意味着菜单没被初始化，此时ActionBar中则不会出现overflow按钮。
-  MenuInflater类是一个用来将菜单文件加载并解析为一个Menu对象的工具类。调用Activity的getMenuInflater()方法可以获取一个MenuInflater对象。

　　范例3：响应菜单项的点击事件。

@Override

public boolean onOptionsItemSelected(MenuItem item) {

// Handle action bar item clicks here. The action bar will

// automatically handle clicks on the Home/Up button, so long

// as you specify a parent activity in AndroidManifest.xml.

int id = item.getItemId();

switch(id){

case R.id.action_album:

Toast.makeText( this, "我的相册", Toast.LENGTH_SHORT).show();

break;

case R.id.action_plus:

Toast.makeText( this, "加号被点击", Toast.LENGTH_SHORT).show();

break;

}

return super.onOptionsItemSelected(item);

}

语句解释：
-  当用户选择了选项菜单中的一个菜单项（也包括ActionBar中的ActionButton），系统会调用Activity的onOptionsItemSelected()方法。这个方法把用户选择的菜单项作为参数来传递。你能够通过调用getItemId()方法来识别菜单项，这个方法返回了对象菜单项的唯一ID（这个ID是在菜单资源的android:id属性中定义的，或者是传递给add方法的一个整数）。你能够把这个ID与已知的菜单项匹配，让它执行对应的动作。
-  在MainActivity中重写此方法即可。

　　前面说了，即使手机系统版本高于Android3.0，也不保证在ActionBar中一定会显示出overflow按钮。
　　《Android ActionBar完全解析，使用官方推荐的最佳导航栏(上)》中解释了，即overflow按钮的显示情况和手机的硬件情况是有关系的，如果手机没有物理Menu键的话，overflow按钮就可以显示，如果有物理Menu键的话（比如Android模拟器都有物理Menu键），overflow按钮就不会显示出来。

　　范例4：显示出overflow按钮。

private void setOverflowShowingAlways() {

try {

ViewConfiguration config = ViewConfiguration.get( this);

Field menuKeyField = ViewConfiguration.class.getDeclaredField( "sHasPermanentMenuKey");

menuKeyField.setAccessible( true);

menuKeyField.setBoolean(config, false);

} catch (Exception e) {

e.printStackTrace();

}

语句解释：
-  在Activity的onCreate()方法的最后一行调用setOverflowShowingAlways()方法即可。
-  在ViewConfiguration这个类中有一个叫做sHasPermanentMenuKey的静态变量，系统就是根据这个变量的值来判断手机有没有物理Menu键的。本范例就是使用反射的方式将sHasPermanentMenuKey的值设置成false。

　　如果你此时运行程序，然后点击overflow按钮，你会发现里面的ActionButton都是只显示文字不显示图标的。这是官方的默认效果，但我们可以通过反射来改变这一默认行为。

　　范例5：让菜单项显示图标。

@Override

public boolean onMenuOpened(int featureId, Menu menu) {

if (featureId == Window.FEATURE_ACTION_BAR && menu != null) {

if (menu.getClass().getSimpleName().equals( "MenuBuilder")) {

try {

Method m = menu.getClass().getDeclaredMethod( "setOptionalIconsVisible", Boolean.TYPE);

m.setAccessible( true);

m.invoke(menu, true);

} catch (Exception e) {}

}

return super.onMenuOpened(featureId, menu);

}

语句解释：
-  直接在Activity中重写onMenuOpened()方法即可。
-  由MenuBuilder这个类的setOptionalIconsVisible()方法来决定overflow中的ActionButton应不应该显示图标，如果我们在overflow被展开的时候给这个方法传入true，那么里面的每一个ActionButton对应的图标就都会显示出来了。

　　最后，来我们就要修改一下overflow菜单以及其内的各个ActionButtom的样式了，比如字体颜色等。

　　范例6：修改样式。

<item name="android:popupBackground">@drawable/bg_dropmenu_topbar </item>

</style>

<item name="android:divider">@drawable/ic_divider </item>

<item name="android:listSelector">@drawable/actionbar_item_selector </item>

</style>

<item name="android:textColor">@android:color/black </item>

</style>

</resources>

　　范例7：现在我们要实现如下图所示的一个效果：

　　上图中添加了两个新修改，一个是标题栏左边的“←”，另一个是overflow按钮左边是一个文本的ActionButton。

-  前者，调用getSupportActionBar().setDisplayHomeAsUpEnabled(true);即可。
   -  当它被点击时同样会调用onOptionsItemSelected()方法，菜单项id为android.R.id.home。
-  后者，在main.xml文件中，只为<item>标签指定android:title属性，而不指定android:icon属性即可。

　　下面是文本ActionButton相关的样式：

// 字体的大小、背景selector

<item name="android:background">@drawable/actionbar_text_actionbtn_selector </item>

</style>

自定义布局

　　ActionBar为用户提供了统一方式来展示操作和导航，但是这并不意味着你的app要看起来和其他app一样，我们可以自定义自己的布局。
　　将ActionBar划分为如下所示的4个区域：

　　其中：

-  1表示返回按钮和图标。
-  2表示标题
-  3表示ActionButton、ActionProvider、ActionView。
-  4表示Overflow按钮。

　　我们可以通过调用如下代码来自定义ActionBar的布局：

1 2	getSupportActionBar().setDisplayShowCustomEnabled( true); getSupportActionBar().setCustomView(R.layout.common_title);

语句解释：
-  自定义的布局将显示在上图中“2”的位置，如果你把其他三个位置都给隐藏掉，那么我们自定义的布局将占据整个ActionBar的空间。

　　ActionBar的高级用法（ActionView、ActionProvider），笔者不打算继续介绍了，下面的参考阅读中都有。

本节参考阅读：

第二节 Toolbar

　　Toolbar是Android 5.0中新引入的一个控件，其出现的目的就是为了取代ActionBar。

　　为什么要替换ActionBar呢？

　　因为ActionBar是属于应用UI的一部分，但是我们却又不能对其完全控制：

-  ActionBar是由系统创建并对其进行相关参数的初始化。
-  ActionBar限制多、定制困难（比如标题居中、修改字体样式等）。

　　基于这两点（但不限于），Google在Android 5.0后推出了Toolbar。

　　这里先说一下，Toolbar所带来的自由性与其本身的定位密不可分，因为它是一个ViewGroup：

public class Toolbar extends ViewGroup {

// 此处省略了Toolbar内的代码

}

　　既然Toolbar是用来替代ActionBar的，那么就意味着之前ActionBar能实现的功能，Toolbar也能实现，下面就来介绍它。

　　范例1：添加Gradle依赖。

dependencies {

compile 'com.android.support:appcompat-v7:23.1.1'

}

语句解释：
-  由于Toolbar被放到了appcompat-v7库中，所以我们需要先引用该库。

　　回想一下，我们以前使用ActionBar时，都会让项目的AppTheme去继承ActionBar的主题，比如：

</style>

　　接着，会再让Application去使用这个主题，这样项目里的所有Activity里就会显示出ActionBar了：

<application

android:icon= "@mipmap/ic_launcher"

android:label= "@string/app_name"

android:theme= "@style/AppTheme" >

</application>

　　不过，如果想用Toolbar来替代ActionBar，则就需要修改AppTheme主题了：

</style>

语句解释：
-  这么做是为了不让Toolbar和ActionBar的样式起冲突。
-  当然也可以不修改AppThem，而是直接在清单文件的activity标签上修改。

　　范例2：在布局文件中创建Toolbar。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width= "match_parent"

android:layout_height= "match_parent">

<android.support.v7.widget.Toolbar

android:id= "@+id/mToolbar"

android:layout_width= "match_parent"

android:layout_height= "wrap_content" />

</RelativeLayout>

语句解释：
-  因为Toolbar是一个ViewGroup，所以可以直接在布局文件中使用它。
-  此时的Toolbar可能没有背景色，后面会介绍如何给它设置。

　　范例3：Activity的代码。

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Toolbar toolbar = (Toolbar) findViewById(R.id.mToolbar);

// 将toolbar做为ActionBar设置到Activity中。

setSupportActionBar(toolbar);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.menu_main, menu);

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

// Handle action bar item clicks here. The action bar will

// automatically handle clicks on the Home/Up button, so long

// as you specify a parent activity in AndroidManifest.xml.

int id = item.getItemId();

//noinspection SimplifiableIfStatement

if (id == R.id.action_settings) {

return true;

}

return super.onOptionsItemSelected(item);

}

语句解释：
-  注意，这里继承的是AppCompatActivity类，第10行调用的setSupportActionBar方法也是继承自该类。
-  另外，onCreateOptionsMenu方法返回的菜单同样会被放到Toolbar中。

　　范例4：修改标题栏。

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Toolbar toolbar = (Toolbar) findViewById(R.id.mToolbar);

setSupportActionBar(toolbar);

toolbar.setTitle( "店小二");

toolbar.setSubtitle( "陌陌号：18204884");

// 设置一个不可点击图标。

toolbar.setLogo(R.mipmap.ic_launcher);

// 设置一个可以点击的图片，即上图最左侧的那个“三条横线”的图。

toolbar.setNavigationIcon(R.drawable.ic_menu);

toolbar.setNavigationOnClickListener( new View.OnClickListener() {

public void onClick(View v) {

Toast.makeText(MainActivity. this, "AAA", Toast.LENGTH_SHORT).show();

}

});

}

语句解释：
-  有两点需要注意：
   -  第一，要先调用setSupportActionBar，然后再调用setNavigationOnClickListener才会有效果。
   -  第二，如果执行本代码时，发现标题并没有变成“店小二”，则有两个方法可以解决：
      -  1、将第8行代码放到第6行之前。
      -  2、将第8行代码改成getSupportActionBar().setTitle()。
      -  这是因为当我们把toolbar设置到Activity上之后，调用toolbar的某些方法进行修改，是无法反映到Activity中的。

　　范例5：修改字体颜色。

<item name="android:textColorPrimary">@android:color/white </item>

<item name="android:textColorSecondary">@android:color/white </item>

<item name="android:windowBackground">@android:color/white </item>

</style>

语句解释：
-  上面设置的色值会作用于整个项目，以textColorPrimary和textColorSecondary为例：
   -  为它们设置颜色之后，不止会影响Toolbar的标题的颜色，还会影响到其他多个地方的字体颜色。
   -  因此笔者不推荐通过修改它们二者来达到修改标题栏字体的目的。
   -  而应该使用Toolbar提供的setTitleTextColor和setSubtitleTextColor方法去修改。
-  windowBackground会影响使用此主题的所有Activity（但不限于Activity）的背景色，使用时也要注意。

　　由于Toolbar自带的设置会覆盖上面的colorPrimary，所以还需要修改一下它：

<android.support.v7.widget.Toolbar

android:id= "@+id/mToolbar"

android:background= "?colorPrimary"

android:layout_width= "match_parent"

android:layout_height= "wrap_content" />

　　其中?colorPrimary表示引用当前主题下的colorPrimary属性的值，也可以写成?attr/colorPrimary。

　　范例6：修改overflow菜单样式。

<item name="android:textColor">#ffffff </item>

</style>

　　然后在布局文件中设置：

<RelativeLayout 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= "match_parent">

<android.support.v7.widget.Toolbar

android:id= "@+id/mToolbar"

android:layout_width= "match_parent"

android:layout_height= "wrap_content"

android:background= "?attr/colorPrimary"

app:popupTheme= "@style/PopupMenu" />

</RelativeLayout>

语句解释：
-  使用popupTheme属性设置菜单的样式。

　　范例7：自定义Toolbar。

<RelativeLayout 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= "match_parent">

<android.support.v7.widget.Toolbar

android:id= "@+id/mToolbar"

android:layout_width= "match_parent"

android:layout_height= "wrap_content"

android:background= "?attr/colorPrimary"

app:popupTheme= "@style/PopupMenu">

<TextView

android:layout_width= "wrap_content"

android:layout_height= "wrap_content"

android:layout_gravity= "center"

android:text= "Title"

android:textColor= "@android:color/white"

android:textSize= "22sp" />

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

</RelativeLayout>

语句解释：
-  由于Toolbar是一个ViewGroup，因此直接在Toolbar标签里添加控件即可。
-  本范例用于创建一个标题居中的Toolbar，在执行之前还需要在Activity里把原有的标题给隐藏了：
   -  getSupportActionBar().setDisplayShowTitleEnabled(false);