CoordinatorLayout
-
此布局呢主要用于协调子View的显示的位置,核心Behavior(行为)类, 其中更细分的概念就是 Child 和 Dependency . Child 指的就是 移动位置的View (子View),dependency 指的是CoordinatorLayout的直接从属View 。从这样的一个结构上就能看出 。Child 要 怎么移动呢就是在Behavior类中定义的。
-
在XML布局文件加入 app:layout_behavior 就是子View (此处调用的就是Behavior类), 而只定义了app:layout_scrollFlags属性的呢就是dependency 。
-
系统自带的就是支持AppBarLayout 做为dependency , 想支持其他的话就自己 继承 CoordinatorLayout.Behavior<T> 类,其中的泛型 就是传入 child 的类型.
-
Toolbar
更大的作用就是替换ActionBar ,Toolbar 是可以根据需求自由排放的,跟重要的是统一每个版本动作条的外观。在代码中调用setSupportActionBar( )方法设置,使用时还是通过getSupportActionBar( )方法来获取actionBar 对象 ,来进行操作。
-
AppBarLayout
AppBarLayout主要继承LinearLayout,而且布局方向为垂直(并提供滚动手势),其子View通过app:layout_scrollFlags标签设置其需要的滚动行为。通常来讲需要toolbar 的移动效果呢。CoordinatorLayout 作为顶层布局,AppBarlayout 做包含 toolbar 的 父布局,和AppBarlayout 并方置的就是主内容的布局。 综合来看呢就是 AppBarLayout 布局 作为dependency , 主内容布局作为 child (子View) ,这样呢CoordinatorLayout 就是通过dependency 来 协调 child 。
-
scrollFlags 主要常用四个标志位:
-
scroll ,此标志位呢一定得加,这样AppBarLayout下的子View 才能滚动。其他标志位仅仅是决定其滚动的特征的 。 就是scrollView 的一部分。即意味着只有到该view位置时才能滚动。
scroll -
enterAlways , 加入此标识位呢,view总是跟随ScrollView 一起滚动。scrollview下滑时呢就跟着下滑,反之同理。
-
exitUntilCollapsed , 当View 加入此标志位后呢。就是当出现上滑的滚动事件时呢,如果这个View 所占高不是最小呢,就优先此滚动,直至此view 收起后才 ,响应滚动scrollView 。
exitUntilCollapsed.
-
enterAlwaysCollapsed , 此标识位呢一般配合enterAlways来使用。 如果设置了此标志的View 已经隐藏了,scrollView 发生下滑事件,那么该view 会是先出现最小高度,
当scrollView 已经滑动完了,该view 其他部分才出现。但是当出现上滑事件时呢还是此view先滑动,这些效果都是配合CollapsingToolbarLayout 使用。
enterAlwaysCollapsed
-
- 注意 当需要AppBarLayout 和 ScrollView 联动时呢,ScrollView 就只能使用NestedScrollView了,不然 AppBarLayout 是不能滚动的。
CollapsingToolbarLayout
应用此布局呢,就可以实现toolbar 展开时呢,有一个大背景,而收缩后还是toolbar,此布局需要放入到AppBarLayout 布局中作为其的直接子View。做出折叠的效果。
此布局主要有5个功能:
(1) 折叠Title:当此布局全部显示时呢,title 是最大的,但随着View 渐渐移出屏幕,title会逐渐变小。
(2) 内容纱布 :根据滚动的位置看是否达到要求,来决定是否对View盖上"纱布"。通过setContentScrim(Drawable),来设置图片。
(3) 状态栏纱布 :根据滚动的位置是否达到要求,来决定是否对title 盖上"纱布",可通过setStatusBarScrim(Drawable) 。但是只对大于等于LOLLIPOP(棒棒糖)的设备有作用。
(4) 视差滚动子View 。就是将View 滚动速度减慢造成,折叠的效果,在XML文件中设置app:layout_collapseMode设为parallax 。
(5) 将子View 的位置固定,这对Toolbar 很有用,因为当布局移动时呢,就可将其固定。在XML中通过app:layout_collapseMode 设为pin .
布局:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/main.backdrop"
android:layout_width="wrap_content"
android:layout_height="300dp"
android:scaleType="centerCrop"
android:src="@drawable/material_img"
app:layout_collapseMode="parallax" />
<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>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="50dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/my_txt"
android:textSize="20sp" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
实现的效果:
CollapsingToolbarLayout
网友评论