Andorid之官方導航欄Toobar

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

　　老規矩，先看Toolbar效果圖：

 

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

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

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize">
</android.support.v7.widget.Toolbar>

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

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

　　Toolbar和ActionBar並不是孤立的，沒有聯系的，通過調用setSupportActionBar方法，可以使Toolbar支持ActionBar，設置后Toolbar可以向Actionbar一樣使用。根據文檔，一個Toolbar中可包含如下幾部分：

1、A navigation Button：導航按鈕，可以是一個up arrow、navigoation menu toggle等等。

2、A branded logo image:Logo圖片。

3、A title and subtitle：標題和子標題

4、One or more custom views：自定義視圖。

5、An action menu：菜單

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

public void onClick(View view) {
        switch (view.getId()){
            case R.id.btn_navigation:
                toolbar.setNavigationIcon(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
                break;
            case R.id.btn_Logo:
                toolbar.setLogo(R.drawable.jredu_logo);
                break;
            case R.id.btn_title:
                toolbar.setTitle("傑瑞教育");
                break;
            case R.id.btn_subtitle:
                toolbar.setSubtitle("專注IT教育");
                break;
            case R.id.custom_view:
                startActivity(new Intent(this,CustomToolBarActivity.class));
                break;
            case R.id.btn_menu:
                //使用toolbar的inflate方法加載menu，通過setOnMenuItemClickListener設置菜單的點擊處理
                toolbar.inflateMenu(R.menu.menu_main);
                toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
                    @Override
                    public boolean onMenuItemClick(MenuItem menuItem) {
                        Toast.makeText(MainActivity.this,"你選擇了菜單！",Toast.LENGTH_SHORT).show();
                        return true;
                    }
                });
                break;
            case R.id.btn_support_actionbar:
                setSupportActionBar(toolbar);
                break;
            default:
                break;
        }
}

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

1、 主題繼承Theme.AppCompat.Light.NoActionBar

2、 主題繼承Theme.AppCompat.Light.DarkActionBar，並設置如下屬性：

<item name="windowActionBar">false</item>

<item name="windowNoTitle">true</item>

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

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

　　布局文件custom_layout.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<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
        xmlns:app="http://schemas.android.com/apk/res/com.example.myapplication"
        android:id="@+id/top_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:titleTextAppearance="@style/CustomTitleTextAppearance">
    </android.support.v7.widget.Toolbar>

    <android.support.v7.widget.Toolbar
        xmlns:app="http://schemas.android.com/apk/res/com.example.myapplication"
        android:id="@+id/bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:title="課程"
        app:titleTextAppearance="@style/CustomTitleTextAppearance"
        android:background="#454545"
        android:contentInsetStart="5dp">

        <Spinner
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/coursetype"/>
    </android.support.v7.widget.Toolbar>
</RelativeLayout>

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

    <style name="CustomTitleTextAppearance">
        <item name="android:textColor">#fff</item>
        <item name="android:textSize">20sp</item>
    </style>
    <style name="CustomStyle" parent="Theme.AppCompat.Light.DarkActionBar">
        <!--去掉actionbar-->
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="colorPrimary">#1570A6</item>
        <item name="colorPrimaryDark">#454545</item>
        <item name="colorAccent">#F48309</item>
    </style>

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

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

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

　　效果如下：

 

　　想要了解更多內容的小伙伴，可以點擊查看源碼，親自運行測試。

　　疑問咨詢或技術交流，請加入官方QQ群： （452379712）

 

作者： 傑瑞教育
出處： http://www.cnblogs.com/jerehedu/ 
本文版權歸煙台傑瑞教育科技有限公司和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。