折叠功能
前言：
想实现折叠功能需要用到
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout
需先引入依赖
compile'com.android.support:design:27.1.1'
compile'com.android.support:cardview-v7:27.1.1'
compile'com.android.support:palette-v7:27.1.1'
- CoordinatorLayout
CoordinatorLayout是一个直接继承自 ViewGroup 并实现 NestedScrollingParent 接口的控件，是一个增强型的FrameLayout，它主要的功能，作为顶层布局协调多个 View 进行互动。
1.1 布局属性
app:layout_anchor 设置CoordinatorLayout 的直接子控件的锚点（以某个 Coordinatorlayout直接或间接子控件 为参考设置本控件的位置），这个值通常设置为控件的id。
app:layout_anchorGravity设置CoordinatorLayout 直接子控件 相对锚点的位置，值有 bottom、center、right、left、top等。
app:layout_behavior ： CoordinatorLayout 的精华， 直接子控件使用，设置子控件的行为（如平移，缩放，位置，显示状态等），可以用系统自带的属性，也可自己自定义。
- AppBarLayout
AppbarLayout继承于LinearLayout,是一个垂直的LinearLayout,它实现了Material Design的许多功能和特性,即滚动手势(Scrolling Gestures)
我们可以定义行为Behavior,当某个可滑动View(如ListView)滑动手势发生改变时,AppbarLayout 内部的子View该做什么动作
AppBarLayout需要使用AppBarLayout.ScrollingViewBehavior behavior 行为类绑定一个滚动的View,以便知道何时结束滚动 app:layout_behavior=”@string/appbar_scrolling_view_behavior”
AppbarLayout严重依赖于CoordinatorLayout,必须作为CoordinatorLayout的子View来使用.如果在不同的ViewGroup中使用AppbarLayout,那么会有大部分的功能无效.
AppBarLayout 依赖于CoordinatorLayout,一般结合ToolBar和TabLayout,以及滚动View(ScrollView/NestedScrollView)使用
2.1 控件属性
app:expanded 设置AppBarLayout默认的状态(ture为展开,false为折叠) 要同时设置 app:layout_scrollFlags 才有效果
app:layout_scrollFlags
5种状态： scroll , enterAlways , enterAlwaysCollapsed , exitUntilCollapsed , snap
五种状态效果说明：
Scroll
AppBarLayoutd的子View设置了该属性时,这个View将跟随滚动View滚动
换句话说->默认显示Toolbar的layout_height内容,跟随ScrollView滚动
enterAlways
其实就是向下滚动时ScrollView和Child View之间的滚动优先级问题.对比scroll和scroll | enterAlways设置,当向下滑动时,前者优先滚动ScrollView,后者优先滚动Child View,当优先滚动的一方已经全部滚进屏幕之后,另一方才开始滚动.
换句话说->默认显示Toolbar的layout_height,上滑时Toolbar跟随ScrollView,下滑时不用滑动到底部就显示完上滑时Toolbar跟随ScrollView的layout_height的内容
注意需要 scroll | enterAlways 搭配使用,否则滑动没响应
enterAlwaysCollapsed
AppBarLayoutd的子View设置了该属性时,当滚动View向下滑到最低时,子View会继续滑动一部分距离,这部分距离通过子View设置的android:minHeight决定
换句话说->默认显示Toolbar的部分layout_height内容,上滑跟随ScrollView滚动,下滑先显示Toolbar设置的minHeight部分内容,下滑到底部再显示Toolbar完整的layout_height
需要scroll | enterAlways | enterAlwaysCollapsed 搭配使用
exitUntilCollapsed
AppBarLayoutd的子View设置了该属性时,当滚动View向下滑到最低时,子View会继续滑动一部分距离,这部分距离通过子View设置的android:minHeight 决定,但滚动view向上滑动一直到底前,子view设置的minHeight高度保持固定
换句话说->默认显示Toolbar的layout_height内容,上滑显示Toolbar设置的minHeight内容,下滑到底部前先显示Toolbar设置的minHeight内容,下滑到底部后继续下滑显示Toolbar的layout_height内容
需要scroll | exitUntilCollapsed 搭配使用
snap
AppBarLayoutd的子View设置了该属性时,当滚动View向下滑动超出其25%,被拉伸的子View会将滚动View回滑到子View固定高度android:minHeight,滚动View向上滑动时同理
换句话说->默认显示Toolbar的layout_height内容.上滑时,当layout_height显示少于一半松手,layout_height内容自动滚出屏幕理,下滑时,当layout_height显示多余一半松手,layout_height的内容全部滚进屏幕
需要scroll | snap 搭配使用
- CollapsingToolbarLayout
CollapsingToolbarLayout作用是提供了一个可以折叠的工具栏，它继承至FrameLayout，给它设置layout_scrollFlags就可以实现折叠效果！
3.1 控件属性
app:title
ToolBar的标题，当CollapsingToolbarLayout展开时，title显示的是大字体，在折叠的过程中，title不断变小到一定大小的效果。
app:contentScrim
ToolBar被折叠到顶部固定时候的背景。
app:statusBarScrim
折叠后状态栏的背景。
app:scrimVisibleHeightTrigger
设置收起多少高度时，显示ContentScrim的内容。
app:scrimAnimationDuration
展开状态和折叠状态之间，内容转换的动画时间。
下面两个属性是作为CollapsingToolbarLayout的子View才能设置并生效的：
app:layout_collapseMode折叠模式
none： 跟随滚动的手势进行折叠。
parallax： 视差滚动，搭配layout_collapseParallaxMultiplier（视差因子）使用。
pin： 固定不动。
app:layout_collapseParallaxMultiplier
视差因子，范围：0-1，默认0.5。
- 代码实现
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/cons"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="@color/transparent"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="#000000"
app:layout_scrollFlags="scroll"
>
<ImageView
android:background="@drawable/aaaa"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_collapseMode="parallax"
/>
</android.support.design.widget.CollapsingToolbarLayout>
<RadioGroup
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#D1EEEE"
android:orientation="horizontal">
<RadioButton
android:id="@+id/pl_bt"
android:text="评论"
android:textSize="20sp"
android:button="@null"
android:gravity="center"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<RadioButton
android:id="@+id/wg_bt"
android:text="玩过"
android:textSize="20sp"
android:button="@null"
android:gravity="center"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<RadioButton
android:id="@+id/sc_bt"
android:text="收藏"
android:textSize="20sp"
android:button="@null"
android:gravity="center"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
</RadioGroup>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
网友评论