Android5.x新特性之Toolbar，AppBarLayout，CoordinatorLayout，CollapsingToolbarLayout等彙總

一：Toolbar

Toolbar是繼承ViewGroup的，可以自定義Toolbar

使用Toolbar，是以要把原來的ActionBar隐藏起來，有兩種方式：

(1) 在原主題隐藏actionbar

<resources>
 
  <!-- Base application theme. -->
  <style name="AppTheme" parent="AppTheme.Base">
  </style>
   
  <style name="AppTheme.Base" parent="Theme.AppCompat">
    <item name="windowActionBar">false</item>
    <del><item name="android:windowNoTitle">true</item></del>
    <!-- 使用 API Level 22 編譯的話，要拿掉前綴字 -->
    <item name="windowNoTitle">true</item>
  </style>
 
</resources>

(2) app主題繼承沒有actionbar的主題,表示不使用actionbar

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

接着配置toolbar的主題，也是在appTheme裡面配置

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!--導航欄底色-->
        <item name="colorPrimary">@color/accent_material_dark</item>
        <!--狀态欄底色-->
        <item name="colorPrimaryDark">@color/accent_material_light</item>
        <!--導航欄上的标題顔色-->
        <item name="android:textColorPrimary">@android:color/black</item>
        <!--Activity視窗的顔色-->
        <item name="android:windowBackground">@color/material_blue_grey_800</item>
        <!--按鈕選中或者點選獲得焦點後的顔色-->
        <item name="colorAccent">#00ff00</item>
        <!--和 colorAccent相反，正常狀态下按鈕的顔色-->
        <item name="colorControlNormal">#ff0000</item>
        <!--Button按鈕正常狀态顔色-->
        <item name="colorButtonNormal">@color/accent_material_light</item>
        <!--主視窗體的背景-->
        <item name="android:windowBackground">@color/dim_foreground_material_dark</item>
        <!--EditText 輸入框中字型的顔色-->
        <item name="editTextColor">@android:color/white</item>
</style>

然後在Toolbar中進行設定：

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

?attr/colorPrimary表示沿用actionbar的主題，也就是apptheme中的主題，這樣就把它設定到了toolbar中

?attr/actionBarSize表示沿用actionBar的尺寸

注意：Toolbar的title和菜單鍵之類的在java代碼中設定

Android5.x新特性之Toolbar，AppBarLayout，CoordinatorLayout，CollapsingToolbarLayout等彙總

1.colorPrimary: Toolbar導航欄的底色。

2.colorPrimaryDark：狀态欄的底色，注意這裡隻支援Android5.0以上的手機。

3.textColorPrimary：整個目前Activity的字型的預設顔色。

4.android:windowBackground：目前Activity的窗體顔色。

5.colorAccent：CheckBox，RadioButton，SwitchCompat等控件的點選選中顔色

6.colorControlNormal：CheckBox，RadioButton，SwitchCompat等預設狀态的顔色。

7.colorButtonNormal：預設狀态下Button按鈕的顔色。

8.editTextColor：預設EditView輸入框字型的顔色。

9.navigationBarColor：底部導航欄顔色隻能在api21以後的版本才能使用，是以要放在res/values-v21/styles.xml 中

二：AppBarLayout

AppBarLayout 是繼承LinerLayout實作的一個ViewGroup容器元件，它是為了Material Design設計的App Bar，支援手勢滑動操作。

AppBarLayout把它包裹的内容都當做一個App Bar，一般與CoordinatorLayout連用來實作滑動效果

二：CoordinatorLayout

CoordinatorLayout是一個增強型的framelayout

CoordinatorLayout應該要作為父布局，而他的子布局應該要有

1.AppBarLayout

2.可滑動的view，如recyclerView和NestedScrollView，listView之類則不行

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="160dp">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill" />


    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rvId"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:paddingTop="10dp">

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/sym_action_email"
        android:layout_gravity="bottom|end"
        android:layout_margin="10dp"
        >
    </android.support.design.widget.FloatingActionButton>

</android.support.design.widget.CoordinatorLayout>

為了做到動畫效果，我們要做下面這幾步：

1.需要滑動的元件設定 app:layout_scrollFlags

(1) scroll: 所有想滾動出螢幕的view都需要設定這個flag- 沒有設定這個flag的view将被固定在螢幕頂部。

(2) enterAlways: 這個flag讓任意向下的滾動都會導緻該view變為可見，啟用快速“傳回模式”。

(3) enterAlwaysCollapsed: 當你的視圖已經設定minHeight屬性又使用此标志時，你的視圖隻能已最小高度進入，隻有當滾動視圖到達頂部時才擴大到完整高度。

(4) exitUntilCollapsed: 滾動退出螢幕，最後折疊在頂端。

2.給CoordinatorLayout下可滑動的控件如recyclerView加上

app:layout_behavior="@string/appbar_scrolling_view_behavior"

作用：告訴CoordinatorLayout，我（recyclerView）是可滑動的控件，并且在我滑動的時候，設定了

app:layout_scrollFlags的ToolBar可以滑出或滑入

并且layout_behavior可以自定制（這裡不詳細說了）

二：CoordinatorLayout

CollapsingToolbarLayout包裹 Toolbar 的時候提供一個可折疊的 Toolbar，一般作為AppbarLayout的子視圖使用。

此時CollapsingToolbarLayout作為CoordinatorLayout滑動的布局，是以，别忘了在CollapsingToolbarLayout的屬性下設定app:layout_scrollFlags，并且在RecyclerView中設定app:layout_behavior="@string/appbar_scrolling_view_behavior"

CollapsingToolbarLayout 提供以下屬性和方法：

1. Collapsing title：ToolBar的标題

當CollapsingToolbarLayout全屏沒有折疊時，title顯示的是大字型，在折疊的過程中，title不斷變小到一定大小的效果。你可以調用setTitle(CharSequence)方法設定title。

2. ExpandedTitleMarginStart：ToolBar标題伸縮前的margin

3. ExpandedTitleMarginEnd：ToolBar标題伸縮後的margin

4. Content scrim：ToolBar被折疊到頂部固定時候的背景

你可以調用setContentScrim(Drawable)方法改變背景或者在屬性中使用 app:contentScrim=”?attr/colorPrimary”來改變背景。

5. Status bar scrim：狀态欄的背景

調用方法setStatusBarScrim(Drawable)。隻能在Android5.0以上系統有效果。

6. Parallax scrolling children：CollapsingToolbarLayout滑動時，子視圖的視覺差

可以通過屬性app:layout_collapseParallaxMultiplier=”0.6”改變。

7. CollapseMode ：子視圖的折疊模式，有兩種

“pin”：固定模式，在折疊的時候最後固定在頂端；

“parallax”：視差模式，在折疊的時候會有個視差折疊的效果。我們可以在布局中使用屬性

app:layout_collapseMode來改變。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="160dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:expandedTitleMarginEnd="64dp"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:statusBarScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

            <ImageView
                android:id="@+id/image"
                app:layout_collapseParallaxMultiplier="0.6"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="fitXY"
                android:src="@drawable/yuwenle"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/tl_custom"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways"
                app:layout_collapseMode="pin">
            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.CollapsingToolbarLayout>


    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rvId"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:paddingTop="10dp">

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/sym_action_email"
        android:layout_gravity="bottom|end"
        android:layout_margin="10dp"
        >
    </android.support.design.widget.FloatingActionButton>

</android.support.design.widget.CoordinatorLayout>

Android5.x新特性之Toolbar，AppBarLayout，CoordinatorLayout，CollapsingToolbarLayout等彙總

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯