Material Design之AppBarLayout总结

1,765 阅读4分钟

CoordinatorLayout

  1. 官方文档

  2. CoordinatorLayout 是一个加强型的FrameLayout.

  3. CoordinatorLayout 主要用于两种场景:

作为activity最外层布局

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

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

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

AppBarLayout

符合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>

1.appbarLayout几个方法

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

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

  3. removeOnOffsetChangedListener 移除监听器

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

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

结合scrollenterAlways一起使用。可理解为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.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>

3.设置标题

  1. Java 中设置
//  设置标题
    CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapse_layout);
    collapsingToolbarLayout.setTitle("This is Tom");
    
  1. 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>

参考链接

  1. Material.io
  2. Material Design之 AppbarLayout
  3. CoordinatorLayout的使用如此简单