从ActionBar,沉浸式 再到ToolBar

ActionBar从无到有

ActionBar 是在Android 3.0(API 11）中加入到SK中的，想在低版本中使用ActionBar 需要使用Support Library v7。开发API11以下的程序，首先必须在AndroidManifest.xml中指定Application或Activity的theme是Theme.Holo或其子类，否则将无法使用ActionBar。

ActionBar提供了最常见的三种展示方式

1.下拉导航

   ActionBar actionBar = getSupportActionBar();   actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);//导航模式必须设为NAVIGATION_MODE_LIST   SpinnerAdapter adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,android.R.id.text1,           new String[]{"全部","朋友","家人"});   actionBar.setListNavigationCallbacks(adapter, new ActionBar.OnNavigationListener() {       @Override       public boolean onNavigationItemSelected(int itemPosition, long itemId) {           switch (itemPosition){               case 0:                   Toast.makeText(MainActivity.this,"全部",Toast.LENGTH_SHORT).show();                   break;               case 1:                   Toast.makeText(MainActivity.this,"朋友",Toast.LENGTH_SHORT).show();                   break;               case 2:                   Toast.makeText(MainActivity.this,"家人",Toast.LENGTH_SHORT).show();                   break;           }           return false;       }   });

2.操作视窗

1.在res/menu/main.xml中定义如下文件

<?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/all"        android:icon="@mipmap/ic_launcher"        app:showAsAction="always"        android:title="全部" />    <item        android:id="@+id/family"        app:showAsAction="always"        android:title="家人" />    <item        android:id="@+id/setting"        app:showAsAction="never"        android:title="设置" />    <item        android:id="@+id/share"        app:showAsAction="never"        android:title="分享" /></menu>

2.在Activity中重写onCreateOptionsMenu加载菜单资源

@Overridepublic boolean onCreateOptionsMenu(Menu menu) {    getMenuInflater().inflate(R.menu.main,menu);    return true;}

• 上面的xml文件中标签的id表示选项的id,title表示选项的文本,icon表示选项的图标，如果有图标则不展示文本了；
• showAsAction则是展示是方式 其值的常见选项如下：
  
  • ifRoom 会显示在Item中，但是如果已经有4个或者4个以上的Item时会隐藏在溢出列表中。当然个
    数并不仅仅局限于4个，依据屏幕的宽窄而定
  • never 永远不会显示。只会在溢出列表中显示，而且只显示标题，所以在定义item的时候，最好
    把标题都带上。
  • always 无论是否溢出，总会显示。

注意 这里的属性使用过程中如果如下写法是无效的；

app:showAsAction="always"

需要在最外层标签中添加 一行

<menu ...    xmlns:app="http://schemas.android.com/apk/res-auto" >

并修改使用该属性如下：

app:showAsAction="always"

3.Tab选项卡

1.在界面创建的时候设置Tab选项

@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    //1.获取ActionBar    ActionBar actionBar = getSupportActionBar();    //2.设置tab模式    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);    //3.添加Tab子项    actionBar.addTab(actionBar.newTab().setText("全部")            .setIcon(R.mipmap.ic_launcher).setTabListener(this));    actionBar.addTab(actionBar.newTab().setText("家人")            .setIcon(R.mipmap.ic_launcher).setTabListener(this));    actionBar.addTab(actionBar.newTab().setText("朋友")            .setIcon(R.mipmap.ic_launcher).setTabListener(this));}

2.上面的代码设置了ActionBar.TabListener监听器，需要实现其方法：

@Overridepublic void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {    switch (tab.getPosition()){        case 0:            Toast.makeText(this,"全部",Toast.LENGTH_SHORT).show();            break;        case 1:            Toast.makeText(this,"家人",Toast.LENGTH_SHORT).show();            break;        case 2:            Toast.makeText(this,"朋友",Toast.LENGTH_SHORT).show();            break;    }}@Overridepublic void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {}@Overridepublic void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {}

沉浸式的演化

Android 4.4之前，即使我们打开手机app，我们还总是能看到系统顶部那条黑乎乎的通知栏，这样会使得app稍显突兀。于是Android 4.4开始，便引入了Translucent System Bar的系特性，用于弥补系统通知栏突兀之处。

1.这里提到 沉浸式是安卓4.4后才有的概念 如果直接将其主题样式添加到系统中 那么在低版本的手机运行即会报错 所以，这里做了一些婉转的做法，我们可以将不同的版本的样式隔开处理，低版本的样式做默认的处理：

在res/values/styles.xml定义MyTranslucentTheme如下：

<!-- Base application theme. --><style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">    <!-- Customize your theme here. -->    <item name="colorPrimary">@color/colorPrimary</item>    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>    <item name="colorAccent">@color/colorAccent</item></style><style name="MyTranslucentTheme" parent="AppTheme">    <!-- Android 4.4 之前的默认实现  --></style>

在res/values-v19/styles.xml定义MyTranslucentTheme如下：

...<style name="MyTranslucentTheme" parent="AppTheme">    <item name="android:windowTranslucentStatus">true</item>    <item name="android:windowTranslucentNavigation">true</item></style>

在res/values-v21/styles.xml定义MyTranslucentTheme如下：

...<style name="MyTranslucentTheme" parent="AppTheme">    <item name="android:windowTranslucentStatus">false</item>    <item name="android:windowTranslucentNavigation">true</item>    <!-- 设置通知栏颜色 -->    <item name="android:statusBarColor">#FF31c27c</item></style>

2.从上面的代码中我们看到三行代码：
1）android:windowTranslucentStatus设置透明状态栏，如果设置为true则是半透明，设置为false则是全透明
2）android:windowTranslucentNavigation设置透明导航栏 一般设置为true
3）android:statusBarColor设置通知栏颜色

3.在Activity中配置该主题样式：

<activity    android:name=".MainActivity"    android:theme="@style/MyTranslucentTheme">    <intent-filter>        <action android:name="android.intent.action.MAIN" />        <category android:name="android.intent.category.LAUNCHER" />    </intent-filter></activity>

4.上面的代码出现了ActionBar，可以去掉的，找到对应的Activity。在onCreate()中：

@Overrideprotected void onCreate(Bundle savedInstanceState) {    supportRequestWindowFeature(Window.FEATURE_NO_TITLE);    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);}

5.你会发现 这里的文字因为提示栏被应用同化了，导致字体上升，怎么解决呢？找到Activity的布局。

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true">   ...</RelativeLayout>

6.这里我们模拟QQ音乐的界面。在Activity布局中设置如下：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"><TextView    android:layout_width="match_parent"    android:layout_height="50dp"    android:background="#FF31c27c"    android:textColor="#FFFF"    android:gravity="center"    android:textSize="22sp"    android:text="QQ音乐" /></RelativeLayout>

ToolBar延伸

Toolbar 是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ，Google 推荐使用 Toolbar 来作为Android客户端的导航栏，以此来取代之前的 Actionbar 。ToolBar不但可以放在屏幕上边 还可以放在屏幕的其他地方，无论从位置还是布子控件上都有一定优越性，但ToolBar的某些设置也沿用了Actionbar的代码某些风格。

1.在Activity中创建布局。这里为了兼容性，我们使用了supportv7包的ToolBar工具。

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true">    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="#3975CB" >    </android.support.v7.widget.Toolbar></RelativeLayout>

2.在Activity中为ToolBar添加导航图标/应用Logo/标题/子标题。

@Overrideprotected void onCreate(Bundle savedInstanceState) {    supportRequestWindowFeature(Window.FEATURE_NO_TITLE);    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);    toolbar.setNavigationIcon(R.drawable.navigator);    toolbar.setLogo(R.drawable.logo);    toolbar.setTitle("标题");    toolbar.setTitleTextColor(0xffffffff);    toolbar.setSubtitle("子标题");    toolbar.setSubtitleTextColor(0xffffffff);}

3.前面设置的是系统提供给我们的一些主要属性，我们也在里面添加menu菜单。首先需要创建menu菜单。

<?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:icon="@drawable/sacleup"        android:title="放大"        app:showAsAction="always" />    <item        android:icon="@drawable/sacledown"        android:title="缩小"        app:showAsAction="always" />    <item        android:id="@+id/setting"        android:title="设置"        app:showAsAction="never" />    <item        android:id="@+id/share"        android:title="分享"        app:showAsAction="never" /></menu>

4.为ToolBar添加菜单。代码如下

@Overrideprotected void onCreate(Bundle savedInstanceState) {    supportRequestWindowFeature(Window.FEATURE_NO_TITLE);    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);    toolbar.setLogo(R.drawable.logo);    toolbar.inflateMenu(R.menu.main);}

5.我们也可以为该菜单设置监听器 代码如下：

toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {        @Override        public boolean onMenuItemClick(MenuItem item) {            switch (item.getItemId()){                case R.id.sacleup:                    break;                case R.id.sacledown:                    break;                case R.id.share:                    break;                case R.id.setting:                    break;            }            return false;        }    });