天天看点
返回

AppBarLayout、CollapsingToolBarLayout、ToolBar组合实现狂拽屌炸天头部效果

以前app的头部非常呆板，MeterialDesign出现之后，头部栏变的丰富起来，今天介绍几种常用的酷炫效果，实用为主。

效果一：往上滑动页面，头部消失；往下滑动，头部出现。

AppBarLayout、CollapsingToolBarLayout、ToolBar组合实现狂拽屌炸天头部效果

xml文件：

<?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.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:actionBarSize"
            android:background="#53b2d7"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways"
            app:navigationIcon="@drawable/icon_back_white"
            app:title="知乎日报"
            app:titleTextColor="@color/colorWhite"></android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nsv_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/iv_image"
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <WebView
                android:id="@+id/webview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"></WebView>

        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

一脸蒙逼是不是，没关系，我们来了解一下这几种MeterialDesign风格的布局。

Toolbar

不过多解释，一种类似与actionbar的头部栏，那为什么要用它不用actionbar呢？因为这有ToolBar才能配合其他的几种布局实现我们想要的效果。

AppBarLayout

AppBarLayout继承自LinearLayout，布局方向为垂直方向。所以你可以把它当成垂直布局的LinearLayout来使用。AppBarLayout是在LinearLayou上加了一些材料设计的概念，它可以让你定制当某个可滚动View的滚动手势发生变化时，其内部的子View实现何种动作(这句话很重要，换句话说也就是必须将AppBarLayout作为ToolBar的父容器才能在滚动时支配ToolBar的行为)。

CoordinatorLayout

CoordinatorLayout见名思意，协调者布局，协调使用新的思路通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。CoordinatorLayout通过设置子View的 Behaviors来调度子View。换句话说没有它作为整个xml的父容器的话，那么材料设计中view与view之间协调的效果也不会出现。

NestedScrollView

这个控件其实和普通的ScrollView并没有多大的区别，这个控件其实是MD（Meterial Design）中设计的一个控件，目的是跟MD中的其他控件兼容。应该说在MD中，RecyclerView代替了ListView，而NestedScrollView代替了ScrollView，他们两个都可以用来跟ToolBar交互，实现上拉下滑中ToolBar的变化。在NestedScrollView的名字中其实就可以看出他的作用了，Nested是嵌套的意思，而ToolBar基本需要嵌套使用

下面介绍实现时必要的属性：

在可以滚动的View上设置属性app:layout_behavior=”@string/appbar_scrolling_view_behavior”

该属性的值实际上是一个完整的class名字,而上面例子中的 @string/appbar_scrolling_view_behavior 是Android Support Library 定义后的值,可以被直接使用,其实就是通知头部，在这个view滚动时，要做出改变。

在要发生改变的view上添加属性：app:layout_scrollFlags=”scroll|enterAlways”

设置该属性，代表在设置了app:layout_behavior=”@string/appbar_scrolling_view_behavior”属性的view滚动时，自己要做出指定的动作，scrollFlags的类型有：

scroll：这个标志为视图滚动出屏幕，不使用这个标志,他们会保持固定在屏幕的顶部，想滚动就必须用这个。

enterAlways：这个标志可以确保向下滚动将导致view变得可见。

enterAlwaysCollapsed :当你的View已经设置minHeight属性又使用此标志时，你的View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。

exitUntilCollapsed：向上滚动时收缩View，但可以固定Toolbar一直在上面。

其他属性 

app:contentScrim="#30469b"//设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。
app:expandedTitleMarginStart="48dp"//设置扩张时候(还没有收缩时)title向左填充的距离。
app:layout_scrollFlags="scroll|exitUntilCollapsed"//向上滚动时收缩View，但可以固定Toolbar一直在上面。
app:layout_collapseMode="parallax"//设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。
app:layout_collapseParallaxMultiplier="0.7"//设置视差滚动因子，值为：0~1。
app:layout_collapseMode="pin"//pin设置为这个模式时，当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上。

这样，效果一就出来了，会了效果一，我们来点拓展的。

效果二(头部固定，图片随着view的滚动而隐藏)

AppBarLayout、CollapsingToolBarLayout、ToolBar组合实现狂拽屌炸天头部效果

这里面涉及到两个点，第一ToolBar的固定，第二imageview的折叠

先看xml文件：

<?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.support.design.widget.CollapsingToolbarLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             app:layout_scrollFlags="scroll|exitUntilCollapsed">

             <ImageView
                 android:id="@+id/iv_image"
                 android:layout_width="match_parent"
                 android:layout_height="250dp"
                 android:scaleType="centerCrop"
                 app:layout_collapseMode="parallax" />

         </android.support.design.widget.CollapsingToolbarLayout>
     </android.support.design.widget.AppBarLayout>

     <android.support.v4.widget.NestedScrollView
         android:id="@+id/nsv_content"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         app:layout_behavior="@string/appbar_scrolling_view_behavior">

         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:orientation="vertical">

             <WebView
                 android:id="@+id/webview"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"></WebView>

         </LinearLayout>
     </android.support.v4.widget.NestedScrollView>

     <android.support.v7.widget.Toolbar
         android:id="@+id/toolbar"
         android:layout_width="match_parent"
         android:layout_height="?android:actionBarSize"
         android:background="#3b000000"
         app:navigationIcon="@drawable/icon_back_white"
         app:title="知乎日报"
         app:titleTextColor="@color/colorWhite"></android.support.v7.widget.Toolbar>

</android.support.design.widget.CoordinatorLayout>

介绍一下CollapsingToolbarLayout：

CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar，它继承至FrameLayout，给它设置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。

效果4

AppBarLayout、CollapsingToolBarLayout、ToolBar组合实现狂拽屌炸天头部效果

xml:

<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.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/ctl_collapsing"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:expandedTitleMarginStart="48dp"
            app:contentScrim="@color/text_content_color"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/iv_image"
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                 />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?android:actionBarSize"
                app:navigationIcon="@drawable/icon_back_white"
                app:layout_collapseMode="pin"></android.support.v7.widget.Toolbar>

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nsv_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"></WebView>

    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

使用CollapsingToolbarLayout时必须把title设置到CollapsingToolbarLayout上，设置到Toolbar上不会显示。即：

mCollapsingToolbarLayout.setTitle(” “);

app:contentScrim="#30469b"//设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。

//扩张时候的title颜色：
mCollapsingToolbarLayout.setExpandedTitleColor(ContextCompat.getColor(this,R.color.colorWhite));

//收缩后在Toolbar上显示时的title的颜色：
mCollapsingToolbarLayout.setCollapsedTitleTextColor(ContextCompat.getColor(this,R.color.colorWhite));

这个颜色的过度变化其实CollapsingToolbarLayout已经帮我们做好，它会自动的过度
android toolbar appbar Collapsing 头部导航
上一篇: 761. 特殊的二进制序列(分治)
下一篇: java 函数参数类型转换_类型转换函数参数

继续阅读