Android 標題欄（1）

本文來自網易雲社區

做者：孫有軍

標題欄在每一個應用中都有，有各類各樣的標題欄，今天咱們就主要來講說標題欄怎麼作，主要內容涉及到自定義標題，ActionBar，Toolbar等知識。

自定義標題

幾年前開發安卓是沒有統一的標題的，每個頁面都須要本身來佈局標題，若是有多個頁面標題相似，每每就統一編寫出來一個佈局，統一管理和處理，這裏咱們來看看怎麼編寫自定義佈局標題，不採用系統提供的，由於有時候有些特定的或者特殊效果的標題，自定義比較方便。

須要注意的是如今的應用基本上都從4.0開始支持，就算是低版本也有surpport包可使用，所以在使用以前，給該頁面設置爲NoActionbar。

佈局

首先咱們新建一個title_layout.xml佈局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="56dp"
                android:background="@color/color_FA5864"
                android:orientation="vertical"
                tools:showIn="@layout/activity_custom_title">

    <ImageView
        android:id="@+id/back_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:src="@drawable/actionbar_white_back_icon"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/back_icon"
        android:textColor="@color/white"
        android:textSize="16sp"
        tools:text="@string/ask"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="18dp"
        android:src="@drawable/person_center"/>

</RelativeLayout>

   上面的佈局都很簡單，就是一個相對佈局，兩邊是圖標，中間一個標題，根據具體需求能夠實現更爲複雜的效果，這裏咱們來講說tools效果。

小技巧

tools:showIn="@layout/activity_custom_title"

由於該title_layout是被其餘佈局include引用使用的，所以你在當前界面預覽，只能預覽到當前實現的效果，而若是你添加了tools：showIn屬性，就能夠在當前佈局預覽到放置到目標佈局後的效果。

tools:text="@string/ask" 當咱們在佈局時，有時可能須要設置文案來預覽實現效果，可是當正式提交時又須要刪除默認設置的文案，這裏可使用tools:text來插入文案，這個只在編寫時有效果，正式提交時會刪除該屬性。

佈局引用

在佈局完成後，就能夠在目標佈局中include使用：

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

其餘設置

最後關掉當前的Actionbar，有如下幾種方式能夠關閉：

onCreate中調用requestWindowFeature(Window.FEATURE_NO_TITLE);記住必定要在setContentView以前調用。至於爲何，你看看源碼就知道了。

在AndroidManifest對對應的Activity設置style。style爲NoActionBar

若是設置的style不是NoActionBar，則對使用的style複寫<item name="windowActionBar">false</item> 和<item name="windowNoTitle">true</item>屬性

優缺點

       自定義很容易實現，他主要有哪些優缺點吶？

優勢：

定製度高，靈活 容易實現比較複雜的佈局 容易實現自定義動畫效果

缺點

重複佈局，樣式多時通用性差 不少特定效果，代碼複雜 系統相比原生，優化比較少

ActionBar & Toolbar

 你可能在想爲何這裏要合在一塊兒，不該該一個一個的講解嗎？這咱們先看看他們出現的緣由。

歷史沿革

在系統早期沒有統一的標題設置，每一個頁面就須要本身來實現標題，所以在Andriod 3.0版本，系統中引入了ActionBar來統一實現標題效果，而且對3.0之前的版本採用support包進行支持（其實如今基本上全部手機已經從4.0開始支持了，所以能夠不須要考慮3.0之前的版本），ActionBar的出現，提供了全局統一的UI界面，而且提供了一致的操做效果，只要你是ActionBar進行實現的，都有一樣的效果。

雖然ActionBar統一了不少東西，可是它也犧牲了靈活性，爲了實現某些效果仍是須要採用自定義實現，尤爲是一些炫酷的標題效果，google也認識到了這個問題，尤爲是在當前界面不炫酷都沒有人用的狀況下，google在Android L（5.0）版本提供了Toolbar，在L以前的版本採用support包來實現，Toolbar能夠當作ActionBar來使用，而且提供了靈活性，所以ActionBar已經不怎麼建議使用了。因爲Toolbar能夠當前ActionBar來使用，說明二者具備不少相同的東西，所以這裏放到一塊兒來說解。

ActionBar的顯示與隱藏

ActionBar的顯示

在3.0以上的版本，只要你的Activity實現了Theme.Holo主題，或者Theme.Holo的子主題，他默認就已經有ActionBar效果了。若是是其餘主題，你可能須要調用requestWindowFeature(Window.FEATURE_ACTION_BAR)函數來顯示，或者對你使用的主題中的 windowActionBar屬性設置爲true，而3.0以前的版本（不用考慮3.0以前的版本）你須要讓你的Activity繼承自ActionBarActivity，而且設置主題爲Theme.AppCompat主題。

ActionBar的影藏

在前面自定義的時候咱們已經說了怎麼隱藏，這裏在來提一下，能夠調用requestWindowFeature(Window.FEATURE_NO_TITLE)來隱藏，也能夠對Activity設置NoActionBar主題進行隱藏，或者設置windowActionBar爲false，還能夠在代碼中調用getActionBar().hide或者getSupportActionBar().hide()。這裏調用的函數不一樣是根據你繼承的Activity來區分的，若是你直接繼承的是Activity則調用getActionBar（），若是是support包中則調用getSupportActionBar（）。

Toolbar的使用

要使用Toolbar，首先要將默認出現的ActionBar隱藏，所以須要設置NoActionBar，或者設置windowActionBar爲false，以後在佈局中加入Toolbar節點。樣例以下，Activity引入的一個toolbar_layout.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context="com.netease.study.ui.title.ToolbarActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="內容內容內容"/>


</LinearLayout>

     佈局完成後，在界面中find該View，將他設置到ActionBar，讓Activity將它當作ActionBar來處理。

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_toolbar);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
}

     將find出來的Toolbar設置到ActionBar。就這麼簡單，以後全部的使用方式都跟以前的ActionBar同樣了。從佈局中也能夠看出咱們將Toolbar放置在線性佈局的頂部，其實它能夠放置在任何位置，與ActionBar不同，ActionBar默認在頂部，狀態欄如下的位置。

設置屬性

既然是標題欄，那確定是有一些屬性能夠進行設置的，那咱們就來以此的設置一些屬性，這裏設置的屬性對於ActionBar，Toolbar（這裏的Toolbar是當作ActionBar來使用的，就是調用了setSupportActionBar(toolbar)函數）都實用。咱們來看看一張圖片，先來認識一下ActionBar上的各個屬性：

爲ActionBar圖標，通常爲應用圖標，不過如今不少應用已經再也不顯示圖標了，包含它只是爲了品牌曝光和宣傳；

Action按鈕，點擊這些圖標能夠作一系統響應Overflow按鈕，當前面的Action按鈕顯示不下，且配置了某些屬性時會顯示該按鈕。

設置圖標

能夠採用以下的方式來設置應用圖標：

1. 在AndroidManifest中的Application節點或者Activity節點設置logo屬性

可是要注意的是若是你的主題是Theme.Holo的，若是設置了logo屬性，默認是會顯示圖標的，可是若是你設置的是Theme.AppCompat，那恭喜你，默認不顯示，若是你想顯示怎麼辦代碼中調用。

2.調用代碼來顯示

若是配置中沒有設置logo屬性，咱們須要代碼來控制，可是這裏也分爲兩種狀況:

a.若是你的Activity是繼承自Activity的，那麼你能夠直接調用getActionBar().setLogo()

b.若是你的Activity是繼承自AppCompatActivity的，那麼你須要以下的方式來進行設置，三個設置方式一個都不能少：

private void setLogo() {
    ActionBar actionBar = getSupportActionBar();
    actionBar.setLogo(R.drawable.logo);
    actionBar.setDisplayUseLogoEnabled(true);
    actionBar.setDisplayShowHomeEnabled(true);
}

上面就是整個設置logo的方式，Android就是這麼的坑爹啊！不一樣的版本，不一樣的主題，不一樣的基類狀況就徹底不同了，這也是Android適配的一方面，全是坑，坑。

設置標題

設置標題是比較簡單的，不會出上面的那些幺蛾子，主要有如下兩種方式來設置：

       1：在AndroidManifest的Activity設置label節點，可是要注意的是這裏只能設置主標題

       2：在代碼中設置，若是是繼承自Activity調用getActionBar().setTitle()來設置主標題，調用getActionBar().setSubTitle()來設置副標題。若是是繼承自AppCompatActivity，則須要調用getSupportActionBar來進行設置。

設置Action按鈕

咱們在上面的ActionBar圖中認識到了有Action按鈕。那怎麼添加Action按鈕吶？

1：首先建立一個菜單佈局 action_menu.xml，放置到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/search_icon"
        android:icon="@drawable/actionbar_search_dark_icon"
        android:title="@string/search"
        app:showAsAction="always">
    </item>

    <item
        android:id="@+id/plus"
        android:icon="@drawable/actionbar_plus_icon_normal"
        android:title="@string/more"
        app:showAsAction="always">
    </item>
</menu>

菜單裏面包含兩個按鈕一個搜索，一個加號，每個item就表示一個菜單，item裏面能夠繼續嵌套menu，做爲該項item的子菜單。這裏咱們來看看每個item有哪些屬性須要設置：

1. id標識該菜單

2. icon 顯示圖標，若是在overflow則顯示title

3. title 若是在overflow中不顯示icon，直接顯示title，若是在ActionBar長按顯示該title

4. showAsAction標識顯示規則，重點看一下該屬性：

always： always永遠顯示ActionBar中，若是空間不夠則沒法顯示 ifRoom： ifRoom表示有空間的時候顯示在ActionBar中，不然顯示在overflow中 never：never一直顯示在overflow中

同時還須要注意的是：若是你使用的support，也就是Theme爲Theme.AppCompat，須要聲明xmlns:app="http://schemas.android.com/apk/res-auto" app能夠改爲任何名稱，showAsAction前面用app來標識， 若是不是採用的support，也就是Theme爲Theme.Holo，前面用android來標識，不然全部菜單都默認顯示在overflow中

2：代碼中加載菜單，須要複寫onCreateOptionsMenu函數

@Overridepublic boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.action_menu, menu);    
    return true;
}

 通過上述兩步，菜單就已經顯示在ActionBar上面了。

響應Action按鈕

顯示菜單後，須要響應點擊事件，怎麼來響應點擊事件？須要複寫onOptionsItemSelected函數:

@Overridepublic boolean onOptionsItemSelected(MenuItem item) {  
  switch (item.getItemId()) {        case R.id.search_icon:
            Toast.makeText(this, "clicked", Toast.LENGTH_LONG).show();          
              break;        
              case R.id.plus:           
               break;
    }   
     return super.onOptionsItemSelected(item);
}

在onOptionsItemSelected中根據id來進行響應。

設置ActionView

咱們能夠在菜單中設置ActionView，好比搜索，他是一個帶圖標和輸入框的控件，他分別有兩種不一樣的形態，展開和摺疊。接下來咱們就講講怎麼設置ActionView。        1.在menu菜單的item中設置actionViewClass屬性：

<item    
android:id="@+id/search_icon"  
  android:icon="@drawable/actionbar_search_dark_icon"   
   android:title="@string/search"    
   app:actionViewClass="android.support.v7.widget.SearchView"  
     app:showAsAction="ifRoom|collapseActionView">
</item>
// 注意 根據是否引用的support包，actionViewClass設置的類不一樣，若是是support包則設置爲android.support.v7.widget.SearchView且用app來標識， 不然設置爲android.widget.SearchView且用android來標識

2：在代碼中能夠獲取到ActionView，也能夠設置ActionView：

@Overridepublic boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.action_menu, menu);
    MenuItem search = menu.findItem(R.id.search_icon);    
    // 這種方式也能夠獲取到ActionView
    // SearchView view = (SearchView) search.getActionView();
    // 必定要注意導入的類是否正確,要區分support和非support包中的類
    SearchView view = (SearchView) MenuItemCompat.getActionView(search);
    view.setOnQueryTextListener(new SearchView.OnQueryTextListener() {     
       @Override
        public boolean onQueryTextSubmit(String query) {         
           return false;
        }        @Override
        public boolean onQueryTextChange(String newText) {       
             return false;
        }
    });    return true;
}

若是menu菜單中沒有設置actionViewClass，也能夠在代碼中手動設置，search.setActionView(new SearchView(this));，上面就是獲取到的SearchView，必定要注意引入的類是否正確，不然會崩潰，拿到後就能夠設置查詢等監聽了，這裏就不在演示了。

網易雲免費體驗館，0成本體驗20+款雲產品！ 

更多網易研發、產品、運營經驗分享請訪問網易雲社區。

相關文章：
【推薦】 質量報告之我見
【推薦】 網易易盾驗證碼的安全策略