Toolbar

MaterialDesign之Toolbar
一、簡介
屏幕中的導航—頂部導航：android.support.v7.widget.Toolbar

1.由於早期的觸屏手機中蘋果的設計和體驗深入人心，在android中爲了設計一種頂部導航的效果，谷歌乾脆規範了頂部導航—ActionBar（3.0API，也有兼容包）。

2.但是隨着Android系統不斷更新以及開發者在實際開發中，使用ActionBar開發起來很蛋疼（1.用來比較費勁；2.擴展性太差 太死板）。
所以大多數人都會使用一個民間的ActonBar，叫SherlockActionBar。谷歌也意識到了這個問題，就重新定義了一個Toolbar。

3.現在又有個MaterialDesign的APPBar

二、作用
導航控件—顯示標題、導航back、快捷操作、菜單等。而且Toolbar不一定要放在頂部，也可以放底部。

三、使用

1.基本使用
（1）.引入support-v7包
（2）.修改主題：

<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">

注意主題一定要使用：NoActionBar
（3）.寫佈局，把Toolbar當做一個普通的容器使用。
（4）.Activity繼承AppcompatActivity
（5）.使用Toolbar替換ActionBar：

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

2.細節
（1）Toolbar屬性：

android:background="?attr/colorPrimary" 

設置背景顏色，可以使用系統屬性colorPrimary主色調，需要在主題裏面設置。

（2）讓標題居中顯示在toobar

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.seasons.live.toolbar.ToolbarActivity" 
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:title="網易新聞"
        app:titleTextColor="#ff0"
        app:subtitle="旅行"
        app:logo="@drawable/ic_launcher"
        app:navigationIcon="@drawable/abc_ic_ab_back_mtrl_am_alpha"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
        >
    </android.support.v7.widget.Toolbar>
</LinearLayout>

（3）佈局中設置navigationIcon圖標：

app:navigationIcon="@drawable/abc_ic_ab_back_mtrl_am_alpha"

（4）設置NavigationIcon的點擊事件監聽，比如返回按鈕。

toolbar.setNavigationOnClickListener(new OnClickListener() {

    @Override
    public void onClick(View v) {
        finish();
    }
});

（5）將彈出的菜單泡泡窗體修改成黑底白字Dark；Light白底黑字

app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"

四、拓展
實現新浪微博話題的Toolbar滑動半透明效果
1.思路：

（1）.監聽ScrollView的滑動事件，不斷地修改Toolbar透明度
（2）.給MyScrollView設置paddingTop

<RelativeLayout>
    <ScrollView>
    </ScrollView>
    <Toobar>
</RelativeLayout>

然後還要注意設置：
（1）android:clipToPadding=”false” 該控件的繪製範圍是否不在Padding裏面。false：繪製的時候範圍會考慮padding即會往裏面縮進。
（2）android:clipChildren=”false” 子控件是否能不超出padding的區域（比如ScrollView上滑動的時候，child可以滑出該區域）。

五.Toolbar中的搜索框
在上面的基礎上，重寫onCreateOptionMenu
SearchView屬於：android.support.v7.widget.SearchView;

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.search, menu);
        //SearchView在Menu裏面
        MenuItem item = menu.findItem(R.id.action_search);
        SearchView searchView = (SearchView) MenuItemCompat.getActionView(item);
        //設置一出來就直接呈現搜索框---SearchView
//      searchView.setIconified(false);
        //進來就呈現搜索框並且不能被隱藏
//      searchView.setIconifiedByDefault(false);
        //有時候我們需要實現自定義擴展效果
        //通過猜想，searchView用到了一個佈局，去appcompat裏面找到abc_search_view.xml,該裏面的控件的屬性
        ImageView icon = (ImageView) searchView.findViewById(R.id.search_go_btn);
        icon.setImageResource(R.drawable.abc_ic_voice_search_api_mtrl_alpha);
        icon.setVisibility(View.VISIBLE);
//      searchView.setMaxWidth(200);

        SearchView.SearchAutoComplete et = (SearchView.SearchAutoComplete) searchView.findViewById(R.id.search_src_text);
        et.setHint("輸入商品名或首字母");
        et.setHintTextColor(Color.WHITE);


        //設置提交按鈕是否可用(可見)
        searchView.setSubmitButtonEnabled(true);

//      icon.setOnClickListener(new OnClickListener() {
//          
//          @Override
//          public void onClick(View v) {
//              Toast.makeText(MainActivity.this, "提交", 1).show();
//          }
//      });

        //監聽焦點改變
        searchView.setOnQueryTextFocusChangeListener(new OnFocusChangeListener() {

            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                // TODO Auto-generated method stub

            }
        });
        //searchView的關閉監聽
        searchView.setOnCloseListener(new OnCloseListener() {

            @Override
            public boolean onClose() {
                // TODO Auto-generated method stub
                return false;
            }
        });
        searchView.setOnSearchClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                Toast.makeText(ToolbarActivity.this, "提交", 0).show();
            }
        });
        //監聽文本變化，調用查詢
        searchView.setOnQueryTextListener(new OnQueryTextListener() {

            @Override
            public boolean onQueryTextSubmit(String text) {
                //提交文本
                Toast.makeText(ToolbarActivity.this, "提交文本:"+text, 0).show();
                return false;
            }

            @Override
            public boolean onQueryTextChange(String text) {
                // 文本改變的時候回調
                System.out.println("文本變化~~~~~"+text);

                return false;
            }
        });

        return true;
    }

其中菜單佈局：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.seasons.live.toolbar.ToolbarActivity"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_search"
        android:orderInCategory="100"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always"
        android:title="查找"/>
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        app:showAsAction="never"
        android:title="設置"/>
    <item
        android:id="@+id/action_share"
        android:orderInCategory="100"
        app:showAsAction="always"
        android:title="分享"
        android:icon="@android:drawable/ic_menu_share"/>
    <item
        android:id="@+id/action_edit"
        android:orderInCategory="100"
        app:showAsAction="ifRoom"
        android:title="編輯"
        android:icon="@android:drawable/ic_menu_edit"/>

</menu>