Toolbar的使用.md

1.什麼是Toolbar

Toolbar是在Android5.0時出現的一個新控件，其目的用於取代Actionbar，它與Actionbar最大的差異就是Toolbar使用更加靈活、自由，並且Toolbar遵循Material Design規範。

想要使用Toolbar必須引用appcompat-v7庫。固然另外一種方法。就是將API改動爲21以上，這樣的方法的Toolbar不支持API21下面的系統，因此用的很少。

2.Toolbar的使用

2.1 加入V7支持庫

這裏使用appcompat-v7庫中的Toolbar，這個庫的Toolbar可以兼容5.0下面的系統。
首先在AndroidStudio的build.gradle文件里加入上這行代碼

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    // 加入V7支持庫
    compile 'com.android.support:appcompat-v7:23.2.1'
}

2.2 本身定義Toolbar

在styles文件裏改動主題樣式，使其繼承Theme.AppCompat.Light.NoActionBar。這個主題樣式沒有ActionBar。因此咱們一會本身定義一個。

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- 頂部狀態欄的顏色 --> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <!-- actionbar 的顏色 --> <item name="colorPrimary">@color/colorPrimary</item> <!-- actionbar 文字的顏色 --> <item name="android:textColorPrimary">@color/body_text_1</item> <!-- 改動默認顏色和menu文字顏色 --> <item name="android:textColor">@color/body_text_2</item> <!-- 文字選中時的高亮 --> <item name="android:textColorHighlight">@color/colorPrimary</item> <!-- 各類控件的顏色 --> <item name="colorAccent">@color/colorPrimary</item> </style>

OK，以後在layout中建立一個xml佈局，在佈局中加入例如如下代碼。

<?xml version="1.0" encoding="utf-8"?
> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" android:minHeight="56dp" />

Toolbar定義完畢。假設想使用它。僅僅要在其它的xml佈局中經過include標籤引入它便可了。

2.3 使用Toolbar

在文章的開頭說了。Toolbar主要使用於替換Actionbar的，因此Toolbar的使用方法事實上跟Actionbar的使用方法類似，但也有些不同。
假設想要在Activity中使用Toolbar，那麼該Activity必須繼承AppCompatActivity，並經過setSupportActionBar()方法替換掉Actionbar。

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // 得到Toolbar。替換Actionbar
    mToolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(mToolbar);
}

可以經過例如如下代碼來加入Toolbar的標題和圖標。

mToolbar.setTitle("標題");
mToolbar.setSubtitle("子標題");
mToolbar.setLogo(R.mipmap.ic_launcher);

OK。效果例如如下

2.4 加入Menu菜單

Menu配置也與Actionbar類似，首先在menu目錄中定義menu配置文件

<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" tools:context="com.torment.toolbardemo.MainActivity">
    <item  android:id="@+id/action_settings" android:orderInCategory="100" android:title="@string/str_setting" app:showAsAction="never" />

    <item  android:id="@+id/action_add" android:icon="@mipmap/ic_search_white" android:orderInCategory="100" android:title="@string/str_add" app:showAsAction="ifRoom" />

    <item  android:id="@+id/action_delete" android:icon="@mipmap/ic_notifications_white" android:orderInCategory="100" android:title="@string/str_delete" app:showAsAction="ifRoom" />
</menu>

這裏需要注意app:showAsAction這個屬性。不能使用android:showAsAction。這是因爲使用Toolbar來自V7包，因此使用android:showAsAction設置完是無效的。這是一個坑需要注意一下（下面還有好多坑）。

當配置完menu文件以後。僅僅需要在Activity的onCreateOptionsMenu()中載入這個menu文件便可。

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

假設想要監聽menu的話。需要重寫onOptionsItemSelected()方法。

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // 監聽指定的button
        switch (item.getItemId()) {
            case R.id.action_settings:
                return true;
            case R.id.action_add:
                return true;
            case R.id.action_delete:
                return true;
        }
        return super.onOptionsItemSelected(item);
    }

OK。效果是這樣的。

2.5 加入向上導航button

加入向上導航button與直接加入button的方式有些不同。經過getSupportActionBar()的setDisplayHomeAsUpEnabled()方法設置。

// 開啓向上導航button
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

假設想要監聽這個button的點擊事件。僅僅需要匹配android.R.id.home便可

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                return true;
        }
        return super.onOptionsItemSelected(item);
    }

OK，效果就是這樣，多了一個返回button

2.6 加入搜索功能

給Toolbar加入搜索功能很easy，僅僅需要在menu文件裏配置一下便可。

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

    <item  android:id="@+id/action_search" android:icon="@mipmap/ic_search_white" android:orderInCategory="100" android:title="@string/str_search" app:actionViewClass="android.support.v7.widget.SearchView" app:showAsAction="ifRoom" />
</menu>

經過app:actionViewClass="android.support.v7.widget.SearchView"設置搜索視圖。而後在代碼中處理一下監聽便可了。

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_search, menu);
    // 得到SearchView
    final MenuItem item = menu.findItem(R.id.action_search);
    SearchView searchView = (SearchView) MenuItemCompat.getActionView(item);
    searchView.setQueryHint("請輸入搜索內容");
    // 設置彈出鍵盤類型
    searchView.setInputType(InputType.TYPE_CLASS_NUMBER);
    searchView.setIconified(true);
    searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
        @Override
        public boolean onQueryTextSubmit(String query) { // 提交時觸發
            return false;
        }

        @Override
        public boolean onQueryTextChange(String newText) { // 當字符串變化時觸發
            return false;
        }
    });
    return true;
}

OK，效果例如如下

2.7 加入分享功能

分享功能與搜素功能類似。經過配置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:id="@+id/action_share" android:icon="@mipmap/ic_search_white" android:orderInCategory="100" android:title="@string/str_share" app:actionProviderClass="android.support.v7.widget.ShareActionProvider" app:showAsAction="ifRoom" /> </menu>

相同在代碼中處理一下分享邏輯便可了。

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_share, menu);
    MenuItem item = menu.findItem(R.id.action_share);
    mShareActionProvider = (ShareActionProvider) MenuItemCompat.getActionProvider(item);
    // 設置分享內容以及類型
    mShareActionProvider.setShareIntent(getDefaultIntent());
    return true;
}
private Intent getDefaultIntent() {
    Intent intent = new Intent(Intent.ACTION_SEND);
    intent.putExtra(Intent.EXTRA_TEXT, "測試分享文本");
    intent.setType("text/plain");
    return intent;
}

OK。效果例如如下

除了這樣的分享以外，還有另外一種更簡單的分享方式，直接定義一個普通的menu，而後經過startActivity調用系統的分享功能。

<?
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/action_share2" android:icon="@mipmap/ic_search_white" android:orderInCategory="100" android:title="@string/str_share" app:showAsAction="ifRoom" /> </menu>

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.action_share2:
            Intent shareIntent = new Intent();
            shareIntent.setAction(Intent.ACTION_SEND);
            shareIntent.putExtra(Intent.EXTRA_TEXT, "測試分享文本");
            shareIntent.setType("text/plain");

            // 設置分享列表的標題
            startActivity(Intent.createChooser(shareIntent, "分享到"));
            return true;
    }
    return super.onOptionsItemSelected(item);
}

OK。效果例如如下

另一種眼下使用的比較多，寫起來也比較簡單。

眼下先寫這麼多，等有時間繼續無缺。

源代碼地址

http://download.csdn.net/detail/m_irror/9479870