MaterialDesign系列文章(八)CollapsingT
2017-11-06 本文已影响39人
笔墨Android
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();
