官方文档html
CoordinatorLayout 是一个增强型的FrameLayout.android
CoordinatorLayout 主要用于两种场景:bash
做为activity最外层布局app
做为协调一个或多个具备特定交互的子view的父布局布局
子view之间的特定协调动做,经过app:layout_behavior
指定,如,Google内部实现的@string/appbar_scrolling_view_behavior
; 亦能够经过自定义实现特定的behavior
效果(TODO: 单独做为另一篇文章)。post
<android.support.v4.widget.NestedScrollView
android:id="@+id/nest_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
复制代码
符合material design的增强版的垂直方向的
LinearLayout
,严重依赖于CoordinatorLayout
;内部内置了响应动做,用于定义当某个可滑动的View(如:ScrollView ,ListView ,RecyclerView 等)发生滑动时,其余子view应该如何响应。(app:layout_scrollFlags
)动画
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:title="behaviour"
app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways|snap">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
复制代码
addOnOffsetChangedListener
当AppbarLayout 的偏移发生改变的时候回调,也就是子View滑动。spa
getTotalScrollRange
返回AppbarLayout 全部子View的滑动范围.net
removeOnOffsetChangedListener
移除监听器设计
setExpanded (boolean expanded, boolean animate)
设置AppbarLayout 是展开状态仍是折叠状态,animate 参数控制切换到新的状态时是否须要动画
setExpanded (boolean expanded)
设置AppbarLayout 是展开状态仍是折叠状态,默认有动画
注:滑动的NestedScrollView,简称 "滑动view",设置了scorllFlag的子view,简称 "响应view"
app:layout_scrollFlags="scroll"
响应view至关于滑动view 的一部分,一块儿滑动。
app:layout_scrollFlags="scroll|enterAlways"
结合
scroll
一块儿使用。当滑动view 向下滑动时,响应view截断滑动view的滑动事件,待响应view自身所有显示完后,再把滑动事件还给滑动view; 当用户向下滑动是scrollView时,关注点不在滑动view自己,此时出现响应view的内容,符合material design设计理念
...
android:layout_height="200dp"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
...
复制代码
结合
scroll
和enterAlways
一块儿使用。可理解为enterAlways
的更灵活的版本;可经过android:minHeight="?attr/actionBarSize"
设置最小高度,当滑动view 向下滑动时,响应view截断滑动view的滑动事件,待响应view自身最小高度显示完后,再把滑动事件还给滑动view
...
android:layout_height="200dp"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways|snap"
...
复制代码
结合
scroll
一块儿使用。可理解为"四舍五入"的效果;当中止滑动时,响应view若是已显示了一大部分,则自动弹性滑动显示剩余的部分;若显示的部分不多,则自动收起隐藏
...
android:layout_height="200dp"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
...
复制代码
结合
scroll
一块儿使用。可理解为enterAlways
的相反的效果;可经过android:minHeight="?attr/actionBarSize"
设置最小高度,当滑动view 向上滑动时,响应view截断滑动view的滑动事件,待响应view缩到自身最小高度显示完后,再把滑动事件还给滑动view
折叠式标题栏,丰富toolbar的效果,必须做为appbarLayout的直接子布局
有视觉效果的滚动:app:layout_collapseMode="parallax"
子view固定:app:layout_collapseMode="pin"
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="250dp">
<!--丰富效果的toolbar-->
<!--app:contentScrim 折叠后的背景色,即toolbar颜色-->
<!--app:statusBarScrim 折叠后的statusBar背景色,-->
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapse_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="@color/colorPrimary"
app:expandedTitleGravity="center|bottom"
app:expandedTitleTextAppearance="@style/PersonDetail.TitleExpandTheme"
app:collapsedTitleGravity="start"
app:collapsedTitleTextAppearance="@style/PersonDetail.TitleCollapsedTheme"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!--app:layout_collapseMode="parallax" 折叠过程产生一点偏移-->
<!--android:fitsSystemWindows="true",伸到statusBar,但须要新建style将statusBar颜色改成透明-->
<!--一直到最外层都须要调用android:fitsSystemWindows="true"-->
<ImageView
android:id="@+id/person_portrait"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="app"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
复制代码
// 设置标题
CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapse_layout);
collapsingToolbarLayout.setTitle("This is Tom");
复制代码
app:title="John"
app:contentScrim
:当CollapsingToolbarLayout滑动到一个肯定的阀值时将显示或者隐藏内容纱布,能够通过setContentScrim(Drawable)
来设置纱布的图片。(能够时图片也能够是颜色)
当CollapsingToolbarLayout滑动到一个肯定的阀值时,状态栏显示或隐藏纱布,你能够经过 app:statusBarScrim
或者setStatusBarScrim(Drawable)
来设置纱布图片。(能够时图片也能够是 颜色)
expandedTitleXXX:设置展开时的文字风格布局; app:collapsedTitleXXX:设置收缩时的文字风格布局
...
app:expandedTitleGravity="center|bottom"
app:expandedTitleTextAppearance="@style/PersonDetail.TitleExpandTheme"
app:collapsedTitleGravity="start"
app:collapsedTitleTextAppearance="@style/PersonDetail.TitleCollapsedTheme"
...
复制代码
<!--折叠时为黑色,靠右-->
<style name="PersonDetail.TitleCollapsedTheme" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textColor">#000</item>
</style>
<!--展开时为白色,居中向下-->
<style name="PersonDetail.TitleExpandTheme" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textColor">#eee</item>
</style>
复制代码