1. 程式人生 > >Material Design之CoordinatorLayout CollapsingToolbarLayout

Material Design之CoordinatorLayout CollapsingToolbarLayout

如想實現專案中相關效果,需要新增以下jar包至工程中

在專案對應的build.gradle中新增以下配置
dependencies {
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.android.support:design:23.1.0'
}

CoordinatorLayout

  • CoordinatorLayout實現了多種Material Design中提到的滾動效果,
    此框架提供幾種不需要寫java程式碼就可以實現的動畫效果,此控制元件為以下控制元件的最大父容器

CollapsingToolbarLayout

  • 可摺疊的ToolBar容器

    如想使用app開頭的屬性,需在佈局檔案的名空間做以下申明
    xmlns:app="http://schemas.android.com/apk/res-auto"
    
    部分可用屬性說明
    屬性1:expandedTitleMarginStart
    使用示例:
    app:expandedTitleMarginStart="14dp":指定文字和左邊緣的間距
    
    屬性2:layout_scrollFlags
    使用示例
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    屬性值說明:
    scroll:現有容器,可以滾動摺疊
    exitUntilCollapsed:可以讓ToolBar固定在最頂部,而不伴隨手勢的滾動也移出
    enterAlways:ToolBar完全在滾動過程中隱藏,如果手勢向下移動則此ToolBar再次顯示
    
    屬性3:contentScrim
    使用示例        
    app:contentScrim="#30469b":摺疊後容器的色值
    

ToolBar

  • 應用標題
    部分屬性說明

    屬性1:layout_collapseMode
    使用示例:
    app:layout_collapseMode="pin"
    屬性值說明
    pin:設定為這個模式時,當CollapsingToolbarLayout完全收縮後,Toolbar還可以保留在螢幕上
    parallax:設定為這個模式時,在內容滾動時,CollapsingToolbarLayout中的View(比如ImageView)也可以同時滾動,實現視差滾動效果,通常和layout_collapseParallaxMultiplier(設定視差因子)搭配使用。
    
    屬性2:android:layout_height
    使用示例:android:layout_height="?attr/actionBarSize"
    指定ToolBar收縮後的高度和actionBar保持一致
    

AppBarLayout

  • CollapsingToolbarLayout的父容器,用於管理可摺疊ToolBar容器,即CollapsingToolbarLayout伴隨手勢滾動

AppBarLayout伴隨底部列表滾動

1,定義AppBarLayout與滾動檢視之間的聯絡
2,在RecyclerView或者任意支援巢狀滾動的view,如:NestedScrollView上新增app:layout_behavior,並將其屬性值設定為@string/appbar_scrolling_view_behavior
3,support library包含了一個特殊的字串資源@stringappbar_scrolling_view_behavior,
它和AppBarLayout.ScrollingViewBehavior相匹配,用來通知AppBarLayout這個特殊的view何時發生了滾動事件,這個behavior需要設定在滾動觸發事件的view之上