ToolBar與AppcompatAcitivity實現浸入式Statusbar效果

標籤：浸入式狀態列   android support libr   toolbar   

toolbar是android sdk API21新增的組件，下面是Google官方的介紹文檔：

A standard toolbar for use within application content.

A Toolbar is a generalization of action bars for use within application layouts. While an action bar is traditionally part of an Activity‘s opaque window decor controlled by the framework, a Toolbar may be placed at any arbitrary level of nesting within a view hierarchy. An application may choose to designate a Toolbar as the action bar for an Activity using the setActionBar() method.

Toolbar supports a more focused feature set than ActionBar. From start to end, a toolbar may contain a combination of the following optional elements:

• A navigation button. This may be an Up arrow, navigation menu toggle, close, collapse, done or another glyph of the app‘s choosing. This button should always be used to access other navigational destinations within the container of the Toolbar and its signified content or otherwise leave the current context signified by the Toolbar. The navigation button is vertically aligned within the Toolbar‘s minimum height, if set.
• A branded logo image. This may extend to the height of the bar and can be arbitrarily wide.
• A title and subtitle. The title should be a signpost for the Toolbar‘s current position in the navigation hierarchy and the content contained there. The subtitle, if present should indicate any extended information about the current content. If an app uses a logo image it should strongly consider omitting a title and subtitle.
• One or more custom views. The application may add arbitrary child views to the Toolbar. They will appear at this position within the layout. If a child view‘sToolbar.LayoutParams indicates a Gravity value of CENTER_HORIZONTAL the view will attempt to center within the available space remaining in the Toolbar after all other elements have been measured.
• An action menu. The menu of actions will pin to the end of the Toolbar offering a few frequent, important or typical actions along with an optional overflow menu for additional actions. Action buttons are vertically aligned within the Toolbar‘s minimum height, if set.

In modern Android UIs developers should lean more on a visually distinct color scheme for toolbars than on their application icon. The use of application icon plus title as a standard layout is discouraged on API 21 devices and newer.

上面的介紹的重點是，toolbar是api21 新增的組件，其主要用來彌補actionbar帶來的不足，其繼承自viewgroup，自由的屬性包括導覽按鈕（類似向上按鈕），logo圖片，標題和子標題，一個或者多個自訂view，菜單。

其中有一句介紹尤為介紹 An application may choose to designate a Toolbar as the action bar for an Activity using the setActionBar() method.我們可以在任何activity中使用toolbar作為actiobar，但是api21之前只能使用setSupportActionbar（),相應的主題也要設定為NoActionbar(不要懷疑就是這樣幹，沒錯兒），about toolbar的好，我會娓娓道來（麼麼噠）

具體介紹詳見sdk/docs/reference/android/widget/Toolbar.html

下面介紹一下AppCompatAcitivity

官方介紹：You can add an ActionBar to your activity when running on API level 7 or higher by extending this class for your activity and setting the activity theme toTheme.AppCompat or a similar theme.

其主要用來向低版本的sdk提供添加actionbar的功能，並且提供Theme.AppCompat（就是Google推薦的Theme.Material）這樣的主題,保證低版本也能獲得高版本的效果。

詳細介紹見：yourSDKpath/sdk/docs/reference/android/support/v7/app/AppCompatActivity.html

Google在新出的22.1 library 還包含了如下的組件，他們最大的特點就是可以在組件之中使用android:theme：來控制組件的樣式

AppCompatAutoCompleteTextView 
AppCompatButton 
AppCompatCheckBox 
AppCompatCheckedTextView 
AppCompatEditText 
AppCompatMultiAutoCompleteTextView 
AppCompatRadioButton 
AppCompatRatingBar 
AppCompatSpinner 
AppCompatTextView

在介紹了如此多的好東西之後，我們開始步入正題，如何使用toolbar 與AppCompatAcitivity實現浸入式Statusbar效果。

首先使用AndroidStudio構建project。

第二步添加依賴庫：

選擇open module settings》app》dependency，點擊下方的加號自行選擇    ‘com.android.support:appcompat-v7:22.1.1‘

第三步：修改系統內建主題

將原有的values /style修改為：

   <pre name="code" class="html"><resources>    <style name="ActionBarTheme" parent="Theme.AppCompat.NoActionBar">        <item name="windowActionBar">false</item>        <item name="android:windowNoTitle">true</item>        <!-- toolbar（actionbar）顏色 -->        <item name="colorPrimary">#673AB7</item>        <!-- 視窗的背景顏色 -->        <item name="colorPrimaryDark">@android:color/holo_blue_bright</item>    </style></resources>

之所以這樣修改是為了能夠使用toolbar，所以我們需要將主題設定為

Theme.AppCompat.NoActionBar否則會因衝突造成程式crash。

然後我們在相同目錄下建立一個folder named：values-v19，此包的作用是提供在api19+以上的效果

我們在其中複製style檔案並修改：

<resources>    <style name="ActionBarTheme" parent="Theme.AppCompat.NoActionBar">        <item name="windowActionBar">false</item>        <item name="android:windowNoTitle">true</item>        <!-- toolbar（actionbar）顏色 -->        <item name="colorPrimary">#673AB7</item>        <!-- 狀態列顏色 -->        <item name="colorPrimaryDark">@android:color/holo_blue_bright</item>    </style></resources>

其中的狀態列顏色只會在api19 以上才會生效。

第四步建立布局檔案：

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.Toolbar    xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/toolbar"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="@android:color/holo_blue_bright"    android:theme="@style/ThemeOverlay.AppCompat.Dark"    android:popupTheme="@style/ThemeOverlay.AppCompat.Dark"    android:minHeight="?attr/actionBarSize">   </android.support.v7.widget.Toolbar>

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:fitsSystemWindows="true">    <include layout="@layout/toobar"></include>    <android.support.v7.widget.AppCompatCheckedTextView        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:text="Hello World, MyActivity"/></LinearLayout>

第五步：使用AppcompatAcitivity與toolbar

public class MainActivity extends AppCompatActivity {    private Toolbar mToolbar;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);//        this.getWindow().setBackgroundDrawableResource(getResources().getColor(android.R.color.holo_blue_bright));//        設定狀態列的顏色，當版本大於4.4時起作用        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {            SystemBarTintManager tintManager = new SystemBarTintManager(this);            tintManager.setStatusBarTintEnabled(true);            tintManager.setStatusBarTintResource(android.R.color.holo_blue_bright);        }        mToolbar = (Toolbar) findViewById(R.id.toolbar);        mToolbar.setTitle("主標題");// 標題的文字需在setSupportActionBar之前，不然會無效        setSupportActionBar(mToolbar);    }}

這樣的話我們就可以實現了浸入式的效果，在項目中我使用了一個開源的工程SystemBarTintManager，這個資源會在我會貼在源碼之中。

然後貼出運行效果：

諸位可能以為我們的追求到此就結束了，其實還未完成。對於這個toolbar我們還未把玩一番，看到其繼承自viewgroup，於是我好奇在其中添加了一個子view，發現竟然能夠運行成功

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.Toolbar    xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/toolbar"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="@android:color/holo_blue_bright"    android:theme="@style/ThemeOverlay.AppCompat.Dark"    android:popupTheme="@style/ThemeOverlay.AppCompat.Dark"    android:minHeight="?attr/actionBarSize">    <TextView        android:layout_width="match_parent"        android:layout_height="40dp"        android:text="123"/>  </android.support.v7.widget.Toolbar>

標題列居然顯示了123，之前設定title就此失效了，之後我又放入一個新的LinearLayout，也能正確布局,如果有子布局會使得setTitile方法失效，而  mToolbar.setNavigationIcon方法卻不受其影響。

如果我們想要類比actionbar上面的導覽按鈕類似向上這樣的效果，需要在java代碼中進行配置mToolbar.setNavigationIcon，xml會因為api版本問題得不到解決。如果不想使用actionbar，我們可以將toolbar注釋掉，狀態列的顏色一樣是可控的。麼麼噠，轉載請註明出處

源碼地址：https://github.com/jelychow/demo
如果有問題歡迎留言或者指正。。。

ToolBar與AppcompatAcitivity實現浸入式Statusbar效果