CoordinatorLayout:AppBarLayout應用標題欄容器

首先稍微說下CoordinatorLayout(協調者佈局)實現了多種Material Design中提到的滾動效果,把CoordinatorLayout作爲根佈局容器,

其子控件可以不用寫動畫相關的代碼就能產生動畫;

MD提供的主要子控件有:

FloatingActionButton浮動操作按鈕

AppBarLayout應用標題欄容器

NestedScrollView類似ScrillView,配合AppBarLayout執行動畫使用

ToolBar工具欄

Snackbar反饋提示欄

今天demo裏面主要用到CoordinatorLayout(協調者佈局),AppBarLayout(應用標題欄容器),NestedScrollView,ToolBar工具欄

不瞭解ToolBar的可以看下這個博客:

http://blog.csdn.net/zheng_jiao/article/details/52587746


想要使用這些5.0的特效,必須在build中配置:

dependencies {
    compile 'com.android.support:design:23.1.1'
}

xml佈局:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true"
    tools:context="www.abld.com.appbarlayoutdemo.MainActivity"
    >

    <!--AppBarLayout標題的容器,只能作爲coordinatorlayout裏面的第一個子View
    AppBarLayout是一個容器,需要滾動的子view必須放到這個容器裏面

    android:fitsSystemWindows="true"          適應系統,是否把內容顯示到狀態欄

    app:layout_scrollFlags="scroll"           決定子view能否滾出屏幕
    -->
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:src="@drawable/lbone"
            android:scaleType="centerCrop"
            app:layout_scrollFlags="scroll"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toobar"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            app:layout_scrollFlags="scroll"
            android:background="@android:color/holo_blue_dark" />

        <TextView
            android:background="@android:color/holo_orange_dark"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="15dp"
            android:text="小成功靠磨難,大成就靠災難!"/>

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

    <!--主內容寫在這裏

    必須是NestedScrollView或者是RecyclerView,其他控件不能滑動
    因爲他們都能配置layout_behavior這個屬性
    NestedScrollView和ScrollView使用方法一模一樣

    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    不寫這個屬性整個佈局會佔滿屏幕;用來通知AppBarLayout界面內容發生了滾動事件,
    不配置滾動的話上面內容會一下子滾上去
    -->
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_text"
            android:padding="15dp"/>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

向上滑動的時候文章的標題能夠停留在屏幕的頂端就是因爲沒有配置app:layout_scrollFlags

其實可以通過配置app:layout_scrollFlags的屬性來實現不同的動畫效果:

scroll:列表在頂端時,可以跟着滑動方向滑動(只有配置scroll其他屬性才能生效)

enterAlways:不管滑動列表到哪,只要往下拉當前控件就跟着向下劃出

enterAlwaysCollapsed:跟enterAlways類似,但是最大隻能劃出摺疊後的大小,要配合android:minHeight屬性使用,最小高度即爲摺疊後的高度

(配置方式“scroll | enterAlways | enterAlwaysCollapsed”)

exitUntilCollapsed:不管滑動列表到哪隻要向上拉,這個View會跟着滑動直到摺疊,配合android:minHeight屬性使用,最小高度即爲摺疊後的高度

(配置方式"scroll | exitUntilCollapsed")

snap:滑動結束的時候,如果這個View部分顯示,它會滑動到離他最近的上邊緣或下邊緣


默認可以兼容到android2.2,但是清單文件中的theme要配置好,不然在5.0一下的版本中運行會報錯:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowActionBar">false</item>
        <item name="android:windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowNoTitle">true</item>
    </style>


點擊打開鏈接免費下載源碼

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章