一個Demo學會用Android兼容包新控件

<!--
    AppBarLayout跟它的名字一樣，把容器類的組件全部作為AppBar。
        將AppBarLayout放在CoordinatorLayout中，就可以實現滾動效果。
        本例中，TabLayout在界面滾動時，隨著Toolbar的逐漸隱藏，將占據Toolbar的位置，
            達到節省屏幕空間，界面動畫效果的目的。
-->
<android.support.design.widget.AppBarLayout
    android:id="@+id/id_appbarlayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <!--

    屬性解析：
        app:theme：指定Toolbar的樣式，包括ActionbarToggle和popupMenu的指示圖標顏色
        app:popupTheme：指定popupMenu溢出后的樣式
        app:title:    指定Toolbar中主Title的內容
    -->

    <!--
        app:layout_scrollFlags的意思是：

            設置的layout_scrollFlags有如下幾種選項：
                scroll: 所有想滾動出屏幕的view都需要設置這個flag- 沒有設置這個flag的view將被固定在屏幕頂部。
                enterAlways: 這個flag讓任意向下的滾動都會導致該view變為可見，啟用快速“返回模式”。
                enterAlwaysCollapsed: 當你的視圖已經設置minHeight屬性又使用此標志時，你的視圖只能以最小高度進入，只有當滾動視圖到達頂部時才擴大到完整高度。
                exitUntilCollapsed: 當視圖會在滾動時，它一直滾動到設置的minHeight時完全隱藏。

        需要注意的是，后面兩種模式基本只有在CollapsingToolbarLayout才有用，
        而前面兩種模式基本是需要一起使用的，也就是說，這些flag的使用場景，基本已經固定了。
    -->
    <android.support.v7.widget.Toolbar
        android:id="@+id/id_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:title="@string/toolbar_title" />

    <!--
        Tabs選項卡，和ViewPager搭配使用可以增大界面的內容展示量，實現各種個性化分類內容展示而不互相干擾！
        Google在Design support library中提供官方的Tab組件，它就是TabLayout。
        相比Github上面開源的第三方庫，這個更加簡單易用。

        有以下常用屬性：
            app:tabGravity="fill"  表示TabLayout中的Tabs要占滿屏幕的width；
            app:tabSelectedTextColor：Tab被選中字體的顏色；
            app:tabTextColor：Tab未被選中字體的顏色；
            app:tabIndicatorColor：Tab指示器下標的顏色；
    -->
    <android.support.design.widget.TabLayout
        android:id="@+id/id_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/main_white" />

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

<!--
    我們常用的ViewPager，不多說了。你會發現多了一個 app:layout_behavior 屬性，沒錯，
        如果你使用CoordinatorLayout來實現Toolbar滾動漸變消失動畫效果，那就必須在它下面的那個控件中加入這個屬性，
        并且下面的這個控件必須是可滾動的。
    當設置了layout_behavior的控件滑動時，就會觸發設置了layout_scrollFlags的控件發生狀態的改變。
-->
<android.support.v4.view.ViewPager
    android:id="@+id/id_viewpager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />


<!--
    這是一個浮動按鈕。由于FloatingActionButton是重寫ImageView的，
    所有FloatingActionButton擁有ImageView的一切屬性。

    屬性介紹：
        app:backgroundTint : FAB的背景色。
        app:elevation      ：FAB的陰影效果。
        app:rippleColor    ：設置漣漪的顏色，默認是由背景色生成的暗色調，可以自己指定。
        app:pressedTranslationZ  ：FAB動畫效果，在它被按下的時候陰影就會增大。
-->
<android.support.design.widget.FloatingActionButton
    android:id="@+id/id_floatingactionbutton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:src="@mipmap/ic_action_plusone"
    app:backgroundTint="@color/main_blue_light"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    app:rippleColor="@color/main_blue_dark" />

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

frag_main.xml源碼（Fragment的布局）