Andorid之官方導(dǎo)航欄Toobar（轉(zhuǎn)）

nighteagle

在前面學(xué)習(xí)使用ActionBar的時候，我們就發(fā)現(xiàn)ActionBar中有些方法被標記為過時了，原來在android5.0之后，google推出了一個新的導(dǎo)航工具欄，官方將其定義為：A standard toolbar for use within application content.使用Toolbar將會比ActionBar更加有彈性，更加靈活。

　　老規(guī)矩，先看Toolbar效果圖：


下面，我們一起看看，如何使用Toolbar。由于Toolbar是android5.0之后新增的，要想在低版本中使用，需要添加Support v7，確保下載最新的v7支持包。和ActionBar不同，ActionBar是作為Activity窗口的一部分而存在，而Toolbar實際就是繼承ViewGroup，可以直接在布局文件中使用，非常的靈活。

先看布局文件activity_main.xml的Toolbar：

1. <android.support.v7.widget.Toolbar
   
2.         android:id="@+id/toolbar"
   
3.         android:layout_width="match_parent"
   
4.         android:layout_height="wrap_content"
   
5.         android:background="?attr/colorPrimary"
   
6.         android:minHeight="?attr/actionBarSize">
   
7. </android.support.v7.widget.Toolbar>

復(fù)制代碼

注意Toolbar是v7下的Toolbar，本布局文件的根布局是一個RelativeLayout，默認情況下有padding，需要將padding去掉，不然Toolbar和窗口會有間隔。

　　在MainActivity中，只需要toolbar = (Toolbar)findViewById(R.id.toolbar);即可得到Toolbar，不做任何操作，運行后效果如圖：


Toolbar和ActionBar并不是孤立的，沒有聯(lián)系的，通過調(diào)用setSupportActionBar方法，可以使Toolbar支持ActionBar，設(shè)置后Toolbar可以向Actionbar一樣使用。根據(jù)文檔，一個Toolbar中可包含如下幾部分：

1. 1、A navigation Button：導(dǎo)航按鈕，可以是一個up arrow、navigoation menu toggle等等。
   
2. 
   
3. 2、A branded logo image:Logo圖片。
   
4. 
   
5. 3、A title and subtitle：標題和子標題
   
6. 
   
7. 4、One or more custom views：自定義視圖。
   
8. 
   
9. 5、An action menu：菜單

復(fù)制代碼

通過如下代碼，可實現(xiàn)對以上幾個部分的設(shè)置，同時要注意Activity要繼承AppCompatActivity：

1. public void onClick(View view) {
   
2.         switch (view.getId()){
   
3.             case R.id.btn_navigation:
   
4.                 toolbar.setNavigationIcon(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
   
5.                 break;
   
6.             case R.id.btn_Logo:
   
7.                 toolbar.setLogo(R.drawable.jredu_logo);
   
8.                 break;
   
9.             case R.id.btn_title:
   
10.                 toolbar.setTitle("杰瑞教育");
    
11.                 break;
    
12.             case R.id.btn_subtitle:
    
13.                 toolbar.setSubtitle("專注IT教育");
    
14.                 break;
    
15.             case R.id.custom_view:
    
16.                 startActivity(new Intent(this,CustomToolBarActivity.class));
    
17.                 break;
    
18.             case R.id.btn_menu:
    
19.                 //使用toolbar的inflate方法加載menu，通過setOnMenuItemClickListener設(shè)置菜單的點擊處理
    
20.                 toolbar.inflateMenu(R.menu.menu_main);
    
21.                 toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
    
22.                     @Override
    
23.                     public boolean onMenuItemClick(MenuItem menuItem) {
    
24.                         Toast.makeText(MainActivity.this,"你選擇了菜單！",Toast.LENGTH_SHORT).show();
    
25.                         return true;
    
26.                     }
    
27.                 });
    
28.                 break;
    
29.             case R.id.btn_support_actionbar:
    
30.                 setSupportActionBar(toolbar);
    
31.                 break;
    
32.             default:
    
33.                 break;
    
34.         }
    
35. }

復(fù)制代碼

至此，我們完成了大部分的編碼工作，是不是可以運行起來查看效果了呢？別急，還有非常重要的一步，那就是隱藏ActionBar，在這里我們可以通過修改主題來實現(xiàn)，有如下兩種方式：

1. 1、 主題繼承Theme.AppCompat.Light.NoActionBar
   
2. 
   
3. 2、 主題繼承Theme.AppCompat.Light.DarkActionBar，并設(shè)置如下屬性：
   
4. 
   
5. <item name="windowActionBar">false</item>
   
6. 
   
7. <item name="windowNoTitle">true</item>

復(fù)制代碼

到此，可運行查看查看效果圖：


很顯然，我們需要自定義樣式來美化我們的Toolbar，下面我們再實現(xiàn)一個Activity來體現(xiàn)Toolbar的靈活性和樣式的定義。

　　布局文件custom_layout.xml如下：

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     android:layout_width="match_parent"
   
4.     android:layout_height="match_parent">
   
5.     <android.support.v7.widget.Toolbar
   
6.         xmlns:app="http://schemas.android.com/apk/res/com.example.myapplication"
   
7.         android:id="@+id/top_bar"
   
8.         android:layout_width="match_parent"
   
9.         android:layout_height="wrap_content"
   
10.         android:background="?attr/colorPrimary"
    
11.         android:minHeight="?attr/actionBarSize"
    
12.         app:titleTextAppearance="@style/CustomTitleTextAppearance">
    
13.     </android.support.v7.widget.Toolbar>
    
14. 
    
15.     <android.support.v7.widget.Toolbar
    
16.         xmlns:app="http://schemas.android.com/apk/res/com.example.myapplication"
    
17.         android:id="@+id/bottom_bar"
    
18.         android:layout_width="match_parent"
    
19.         android:layout_height="wrap_content"
    
20.         android:layout_alignParentBottom="true"
    
21.         app:title="課程"
    
22.         app:titleTextAppearance="@style/CustomTitleTextAppearance"
    
23.         android:background="#454545"
    
24.         android:contentInsetStart="5dp">
    
25. 
    
26.         <Spinner
    
27.             android:layout_width="wrap_content"
    
28.             android:layout_height="wrap_content"
    
29.             android:id="@+id/coursetype"/>
    
30.     </android.support.v7.widget.Toolbar>
    
31. </RelativeLayout>

復(fù)制代碼

在這個布局文件里面，我們放置了兩個Toolbar，top_bar和bottom_bar,之前我們說過Toolbar其實就是一個ViewGroup，所以我們可以直接在里面進行布局，同時為Toobar設(shè)置了屬性，其中titleTextAppearance用來設(shè)置Toolbar中的標題文字的樣式，CustomStyle中的colorPrimary用于定義Toolbar的背景，具體如下：

1. <style name="CustomTitleTextAppearance">
   
2.         <item name="android:textColor">#fff</item>
   
3.         <item name="android:textSize">20sp</item>
   
4.     </style>
   
5.     <style name="CustomStyle" parent="Theme.AppCompat.Light.DarkActionBar">
   
6.         <!--去掉actionbar-->
   
7.         <item name="windowActionBar">false</item>
   
8.         <item name="windowNoTitle">true</item>
   
9.         <item name="colorPrimary">#1570A6</item>
   
10.         <item name="colorPrimaryDark">#454545</item>
    
11.         <item name="colorAccent">#F48309</item>
    
12.     </style>

復(fù)制代碼

尚有許多樣式屬性，在此不多做介紹，可自行查看，都不復(fù)雜。

　　在bottom_bar中我們放置了一個spinner，那該如何使用呢？很簡單，以前怎么用現(xiàn)在就怎么用。CustomToolBarActivity中相關(guān)代碼如下：

1. bottomBar = (Toolbar)findViewById(R.id.bottom_bar);
   
2.   bottomBar.inflateMenu(R.menu.bottom_menu);
   
3.   spinner = (Spinner)findViewById(R.id.coursetype);
   
4.         ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
   
5.                 android.R.layout.simple_dropdown_item_1line,
   
6.                 new String[]{"Java","Android","IOS","動畫","電商"});
   
7.   spinner.setAdapter(adapter);

復(fù)制代碼

效果如下：