美文网首页Android_MaterialDesign
MaterialDesign系列文章(八)CollapsingT

MaterialDesign系列文章(八)CollapsingT

作者: 笔墨Android | 来源:发表于2017-11-06 23:53 被阅读39次

    不怕跌倒,所以飞翔

    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之间的滚动优先级问题。对比scroll和scroll | enterAlways设置,发生向下滚动事件时,前者优先滚动Scrolling View,后者优先滚动Child View,当优先滚动的一方已经全部滚进屏幕之后,另一方才开始滚动。
      • exitUntilCollapsed 这里也涉及到最小高度。发生向上滚动事件时,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 指定折叠状态文字的样貌("@style/TextAppearance.CollapsedTitle")
    • app:expandedTitleTextAppearance 指定展开状态标题文字的样貌("@style/TextAppearance.ExpandedTitle")
    • app:expandedTitleGravity 展开状态的标题如何放置
    • app:titleEnabled 是否显示标题文本
    • app:toolbarId 指定与之关联的ToolBar,如果未指定则默认使用第一个被发现的ToolBar子View
    • app:expandedTitleMarginStart="10dp"
    • app:expandedTitleMargin
    • app:expandedTitleMarginBottom
    • app:expandedTitleMarginEnd 这四个类似 展开状态改变标题文字的位置通过margin设置
    • app:layout_collapseParallaxMultiplier 设置时差的系数介于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>
    

    一些参数上面都写着呢,基本上就是这样;

    3一些操作的方法

    • 扩张时title的颜色设置 mCollapsingToolbarLayout.setExpandedTitleColor();
    • 收缩后title的颜色设置 CollapsingToolbarLayout.setCollapsedTitleTextColor();

    这一系列文章的地址,希望对大家有帮助

    项目地址

    相关文章

      网友评论

        本文标题:MaterialDesign系列文章(八)CollapsingT

        本文链接:https://www.haomeiwen.com/subject/mbormxtx.html