Material Design之AppBarLayout总结

CoordinatorLayout

官方文档

CoordinatorLayout 是一个加强型的FrameLayout.

CoordinatorLayout 主要用于两种场景:

作为activity最外层布局

作为协调一个或多个具有特定交互的子view的父布局

子view之间的特定协调动作，通过app:layout_behavior指定，如，Google内部实现的@string/appbar_scrolling_view_behavior； 亦可以通过自定义实现特定的behavior效果（TODO： 单独作为另外一篇文章）。

<android.support.v4.widget.NestedScrollViewandroid:id="@+id/nest_view"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"> 复制代码

AppBarLayout

符合material design的加强版的垂直方向的LinearLayout，严重依赖于CoordinatorLayout；内部内置了响应动作，用于定义当某个可滑动的View（如：ScrollView ,ListView ,RecyclerView 等）发生滑动时，其他子view应该如何响应。（app:layout_scrollFlags）

<android.support.design.widget.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><android.support.v7.widget.Toolbarandroid: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> 复制代码

1.appbarLayout几个方法

addOnOffsetChangedListener 当AppbarLayout 的偏移发生改变的时候回调，也就是子View滑动。

getTotalScrollRange 返回AppbarLayout 所有子View的滑动范围

removeOnOffsetChangedListener 移除监听器

setExpanded (boolean expanded, boolean animate)设置AppbarLayout 是展开状态还是折叠状态，animate 参数控制切换到新的状态时是否需要动画

setExpanded (boolean expanded) 设置AppbarLayout 是展开状态还是折叠状态,默认有动画

AppBarLayout的ScrollFlg

注:滑动的NestedScrollView，简称 "滑动view"，设置了scorllFlag的子view，简称 "响应view"

1.scorll

app:layout_scrollFlags="scroll"

响应view相当于滑动view 的一部分，一起滑动。

2.enterAlways

app:layout_scrollFlags="scroll|enterAlways"

结合scroll一起使用。当滑动view 向下滑动时，响应view截断滑动view的滑动事件，待响应view自身全部显示完后，再把滑动事件还给滑动view； 当用户向下滑动是scrollView时，关注点不在滑动view本身，此时出现响应view的内容，符合material design设计理念

3.enterAlwaysCollapsed

... 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

4.snap

... android:layout_height="200dp" android:minHeight="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways|snap" ... 复制代码

结合scroll一起使用。可理解为"四舍五入"的效果；当停止滑动时，响应view如果已显示了一大部分，则自动弹性滑动显示剩余的部分；若显示的部分很少，则自动收起隐藏

5.exitUntilCollapsed

... android:layout_height="200dp" android:minHeight="?attr/actionBarSize" app:layout_scrollFlags="scroll|exitUntilCollapsed" ... 复制代码

结合scroll一起使用。可理解为enterAlways的相反的效果；可通过android:minHeight="?attr/actionBarSize"设置最小高度，当滑动view 向上滑动时，响应view截断滑动view的滑动事件，待响应view缩到自身最小高度显示完后，再把滑动事件还给滑动view

CollapsingToolbarLayout

折叠式标题栏，丰富toolbar的效果，必须作为appbarLayout的直接子布局

1.parallax

有视觉效果的滚动：app:layout_collapseMode="parallax"

2.pin

子view固定：app:layout_collapseMode="pin"

<android.support.design.widget.AppBarLayoutandroid: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.CollapsingToolbarLayoutandroid: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"--><ImageViewandroid: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.Toolbarandroid: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> 复制代码

3.设置标题

Java 中设置

// 设置标题CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapse_layout);collapsingToolbarLayout.setTitle("This is Tom");复制代码

xml设置 app:title="John"

4.contentScrim

app:contentScrim：当CollapsingToolbarLayout滑动到一个确定的阀值时将显示或者隐藏内容纱布，可以通过setContentScrim(Drawable)来设置纱布的图片。（可以时图片也可以是颜色）

5.statusScrim

当CollapsingToolbarLayout滑动到一个确定的阀值时，状态栏显示或隐藏纱布，你可以通过 app:statusBarScrim或者setStatusBarScrim(Drawable)来设置纱布图片。（可以时图片也可以是 颜色）

6. app:expandedTitleXXX和app:collapsedTitleXXX

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> 复制代码

参考链接

Material.io

Material Design之 AppbarLayout

CoordinatorLayout的使用如此简单

总结

以上是生活随笔为你收集整理的Material Design之AppBarLayout总结的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。