萌妹子.jpeg

在開發(fā)的過程中經(jīng)常要用到工具欄和菜單欄徙邻，有時候你看到有些APP的工具欄多么炫酷排嫌，然你也想做一個類似的，發(fā)現(xiàn)在做的過程中會遇到許多的坑缰犁，至于那些坑只有你自己去通過編碼淳地、調(diào)試怖糊、發(fā)現(xiàn)問題、查閱資料颇象、解決問題一般開發(fā)都需要經(jīng)過這個過程蓬抄。所以在此將此知識點通過博客的形式記錄下來。

• 工具欄文字樣式設(shè)置：居中夯到、顏色嚷缭、大小等屬性設(shè)置

1. 設(shè)置工具欄的Style

<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/view_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:minHeight="?attr/actionBarSize">


    <TextView
        android:id="@+id/tv_toolbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/colorAccent"
        android:layout_gravity="center"
        android:text="Toolbar Title"/>

</android.support.v7.widget.Toolbar>

需要注意的幾點是：

• Toolbar可以通過android:background設(shè)置背景色。
• Toolbar可以通過layout_height設(shè)置工具欄的高度耍贾，上面是設(shè)置為系統(tǒng)AcitonBar默認大小阅爽，我個人習(xí)慣設(shè)置為50dp。
• 工具欄的各種屬性可以通過設(shè)置TextView的屬性來展現(xiàn)到UI荐开，layout_gravity屬性相對于父布局也就是這里的Toolbar來說的付翁，而gravity屬性是相對于自己控件本身的布局。

2. 代碼設(shè)置工具欄的標(biāo)題等屬性

tvToolbar.setText(title);//set toolbar textView content

• 如何隱藏系統(tǒng)自帶的工具欄晃听？

1. 通過配置XML實現(xiàn)

• 設(shè)置界面全屏效果

android:theme="@android:style/Theme.NoTitleBar.Fullscreen"  

• 設(shè)置無標(biāo)題

android:theme="@android:style/Theme.NoTitleBar"  

本Demo是統(tǒng)一設(shè)置所有頁面為無標(biāo)題百侧，通過設(shè)置Style

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

然后添加到AndroidManifest.xml的App的theme屬性中

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">

2. 通過代碼實現(xiàn)

• 設(shè)置全屏

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,  WindowManager.LayoutParams.FLAG_FULLSCREEN);  

• 設(shè)置無標(biāo)題欄

requestWindowFeature(Window.FEATURE_NO_TITLE);  

注意：這些都是設(shè)置代碼需要寫在調(diào)用設(shè)置布局文件之前

• 如何在工具欄上優(yōu)雅地使用菜單欄(SearchView)

1. 工具欄配置文件XML

<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="@android:drawable/ic_menu_search"
        android:title="@android:string/search_go"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="collapseActionView|ifRoom"/>
</menu>

*注意：這里一定要設(shè)置app:actionViewClass="android.support.v7.widget.SearchView"不然實例化獲取到的對象為null，app:showAsAction設(shè)置有collapseActionView屬性能扒，searchView菜單欄才會有返回箭頭

2. 使用工具欄的配置文件XML

<include layout="@layout/view_toolbar"/>

3. 加載工具欄的Menu

//toolbar add menu
toolbar.inflateMenu(R.menu.menu_search);
toolbar.setOnMenuItemClickListener(onMenuItemClickListener);

//toolbar search menu click listener
private Toolbar.OnMenuItemClickListener onMenuItemClickListener = new Toolbar.OnMenuItemClickListener() {
    @Override
    public boolean onMenuItemClick(MenuItem item) {
        //charge the id is equal what you want
        if (item.getItemId() == R.id.action_search) {
            queryData(item);
        }
        return false;
    }
};

• 不使用系統(tǒng)菜單欄會導(dǎo)致一些菜單欄相關(guān)函數(shù)Override的onPrepareOptionsMenu佣渴、onOptionsItemSelected等函數(shù)不調(diào)用如何解決绷耍？

1. 基于Fragment頁面
   在onCreate設(shè)置setHasOptionsMenu(true)
   和 onViewCreated設(shè)置getActivity().invalidateOptionsMenu()
   但是我測試發(fā)現(xiàn)并沒有沒有調(diào)用onPrepareOptionsMenu等函數(shù)处渣，這個后續(xù)查閱資料stackOverFlow這個好像沒有解決此問題
2. 基于Activity頁面

setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);

也可以像設(shè)置前面設(shè)置APP所有頁面無標(biāo)題一樣設(shè)置Activity

<!-- Activity theme. -->
<style name="ActivityTheme" 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>

然后設(shè)置到AndroidManifest.xml的指定的Activity的theme屬性中

 <activity
    android:name=".SearchViewActivity"
    android:theme="@style/ActivityTheme">
</activity>

• 使用SearchView過程中你需要注意的問題和一個常見的BackPress退出問題

1. 開啟系統(tǒng)搜索服務(wù)

SearchManager manager = (SearchManager) getContext().getSystemService(Context.SEARCH_SERVICE);

2. 實例化SearchView對象

mSearchView = (SearchView) item.getActionView();

3. 設(shè)置setOnQueryTextListener事件監(jiān)聽搜索條件

//on query text listener
private SearchView.OnQueryTextListener onQueryTextListener = new SearchView.OnQueryTextListener() {
    @Override //submit the search condition
    public boolean onQueryTextSubmit(String query) {
        Toast.makeText(getContext(), "Search Data in fragment", Toast.LENGTH_SHORT).show();
        return false;
    }
    @Override //the search condition once changed will invoke this funtion
    public boolean onQueryTextChange(String newText) {
    return false;
    }
};

4. 設(shè)置setOnQueryTextFocusChangeListener事件監(jiān)聽輸入框焦點的變化通過此函數(shù)解決了OnBackPressed直接退出APP的問題

//the focus of the query condition box once changed , will call this funtion
mSearchView.setOnQueryTextFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View view, boolean focused) {
        //charge the focus is changed and the searchview icon isn't iconified
        if (!focused && !mSearchView.isIconified()) {
            //in the fragment you mus you this way can solve it
            MenuItemCompat.collapseActionView(item);
        }
    }
});

5. 網(wǎng)上說的關(guān)閉活動的SearchView時的解決辦法是override onBackPressed函數(shù)

@Override
public void onBackPressed() {
    if (!searchView.isIconified()) {
        searchView.setIconified(true);
    } else {
        super.onBackPressed();
    }
}

在Fragment中當(dāng)然沒有這個函數(shù)可以讓你重寫跋选，但是可以通過在基類implement OnBackPressed(自己定義的)接口詳情請見onBackPressed() for Fragments,我通過此方法脐区，使用上面的這種發(fā)現(xiàn)效果圖如before.gif并不是解決辦法，還是監(jiān)聽setOnQueryTextFocusChangeListener是正確的抑党，正確圖片如下perfect.gif

before.gif

perfect.gif

• 關(guān)于Toolbar使用的一些思考和總結(jié)

1. 網(wǎng)絡(luò)上此類型的提問太多么介，回答也太多谭跨，至于真正正確的答案需要你自己動手編碼鹃答，自己經(jīng)過測試才知道乎澄。
2. Toolbar是受到系統(tǒng)樣式的約束，如果自己設(shè)置了NoActionBar ,FullScreen等樣式的話就會沒有工具欄测摔。
3. 你使用系統(tǒng)默認的樣式<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">置济，然后在每個頁面有自己定義的toolbar的話，這樣會導(dǎo)致有兩個工具欄[自己可以測試]避咆。
4. 題外簡書如何生成目錄舟肉，網(wǎng)絡(luò)上找的在后面添加[toc]貌似沒用修噪。

• 參考鏈接

如何使用菜單Menu

如何使用SearchView

Android系統(tǒng)自帶樣式

Implementing SearchView in action bar

Android toolbar center title and custom font

How do I close a SearchView programmatically?

onPrepareOptionsMenu not getting called in Fragments

• 完整源碼傳送門
  CenterTooolBarText:https://github.com/GitACDreamer/CenterToolbarText

希望大家多多關(guān)注star and fork查库，各位覺得如果有幫助給個贊，謝謝