MaterialDesign系列文章(八)CollapsingToolbarLayout的使用

不怕跌倒,所以飛翔

CollapsingToolbarLayout的使用

CollapsingToolbarLayout作用是提供了一個可以折疊的Toolbar,它繼承至FrameLayout,給它設置layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控件(如:ImageView、Toolbar)在響應layout_behavior事件時作出相應的scrollFlags滾動事件(移除屏幕或固定在屏幕頂端)。

1一些屬性的說明:(http://blog.csdn.net/tablle/article/details/52288515)

  • app:layout_scrollFlags可以設置的屬性值
    • scroll View 伴隨著滾動事件而滾出或滾進屏幕。注意兩點:第一點,如果使用了其他值,必定要使用這個值才能起作用;第二點:如果在這個child View前面的任何其他Child View沒有設置這個值,那么這個Child View的設置將失去作用。
    • snap View要么向上全部滾出屏幕,要么向下全部滾進屏幕,有點類似ViewPager的左右滑動。
    • enterAlways 快速返回模式。其實就是向下滾動時Scrolling View和Child View之間的滾動優(yōu)先級問題。對比scroll和scroll | enterAlways設置,發(fā)生向下滾動事件時,前者優(yōu)先滾動Scrolling View,后者優(yōu)先滾動Child View,當優(yōu)先滾動的一方已經(jīng)全部滾進屏幕之后,另一方才開始滾動。
    • exitUntilCollapsed 這里也涉及到最小高度。發(fā)生向上滾動事件時,Child View向上滾動退出直至最小高度,然后Scrolling View開始滾動。也就是,Child View不會完全退出屏幕。
    • enterAlwaysCollapsed enterAlways的附加值。這里涉及到Child View的高度和最小高度,向下滾動時,Child View先向下滾動最小高度值,然后Scrolling View開始滾動,到達邊界時,Child View再向下滾動,直至顯示完全。
  • app:contentScrim 設置當完全CollapsingToolbarLayout折疊(收縮)后的背景顏色。("?attr/colorPrimaryDark")
  • app:expandedTitleMarginStart 設置擴張時候(還沒有收縮時)title向左填充的距離。
  • app:collapsedTitleGravity 指定折疊的標題如何處理 可選值Top,Bottom等
  • app:collapsedTitleTextAppearance 指定折疊狀態(tài)文字的樣貌("@style/TextAppearance.CollapsedTitle")
  • app:expandedTitleTextAppearance 指定展開狀態(tài)標題文字的樣貌("@style/TextAppearance.ExpandedTitle")
  • app:expandedTitleGravity 展開狀態(tài)的標題如何放置
  • app:titleEnabled 是否顯示標題文本
  • app:toolbarId 指定與之關聯(lián)的ToolBar,如果未指定則默認使用第一個被發(fā)現(xiàn)的ToolBar子View
  • app:expandedTitleMarginStart="10dp"
  • app:expandedTitleMargin
  • app:expandedTitleMarginBottom
  • app:expandedTitleMarginEnd 這四個類似 展開狀態(tài)改變標題文字的位置通過margin設置
  • app:layout_collapseParallaxMultiplier 設置時差的系數(shù)介于0~1之間
  • app:layout_collapseMode 子布局設置折疊模式有兩種(pin 固定模式在折疊的時候最后固定在頂端;parallax視差模式,在折疊的時候會有個視差折疊的效果)

2簡單的使用說明

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/colorPrimary"
            app:expandedTitleGravity="bottom"
            app:layout_scrollFlags="exitUntilCollapsed|scroll"
            app:title="AppBarLayout的使用">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="@mipmap/photo"
                android:minHeight="?android:attr/actionBarSize"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"
                app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolBar"
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                app:layout_collapseMode="pin"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

一些參數(shù)上面都寫著呢,基本上就是這樣;

3一些操作的方法

  • 擴張時title的顏色設置 mCollapsingToolbarLayout.setExpandedTitleColor();
  • 收縮后title的顏色設置 CollapsingToolbarLayout.setCollapsedTitleTextColor();

這一系列文章的地址,希望對大家有幫助

項目地址

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容