介绍

CoordinatorLayout,中文翻译,协调布局,顾名思义,此布局中的子View之间,子View与父布局之间应该是可以协调工作的,如何协调,Behavior。
今天看下Android Studio给我们提供的一个模板Activity

Android Studio创建Scrolling Activity

File - > New - > Activity -> Scrolling Activity
这里写图片描述

或者在New Project的时候选择初始化Activity为 Scrolling Activity

Sample效果

其实从上面的图已经可以看出一点效果来
这里写图片描述

Sample代码

AS提供的这个Sample的关键除了布局,还是布局,主要有两个布局
activity_scrolling.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="mraz.com.coordinatorlayoutdemo.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_scrolling" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end" />

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

这个布局中又包含了另外一个布局
content_scrolling.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="mraz.com.coordinatorlayoutdemo.ScrollingActivity"
    tools:showIn="@layout/activity_scrolling">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/text_margin"
        android:text="@string/large_text" />

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

一般都是这样的使用方式,考虑到它之所以这样子将两个布局分开,主要是方便开发者替换自己的实现内容,也就是
content_scrolling.xml中的内容,而activity_scrolling.xml文件中定义的一些内容可以理解成使用的框架,这样子就可以理解为什么AS在提供Sample的时候会使用两个布局。
android.support.design.widget.CoordinatorLayout
|---------->AppBarLayout
|--------------->CollapsingToolbarLayout
|--------------------->ToolBar
|---------->NestedScrollView
|---------->FloatingActionButton

关于这几个Layout

AppBarLayout

AppBarLayout是一个垂直方向上的LinearLayout,它实现了如滚动手势等材料设计app bar的特性。AppBarLayout的子View必须通过LayoutParams#setScrollFlags(int)或者xml中的属性值app:layout_scrollFlags 提供他们想要的滚动行为。这个Layout基本上只能在CoordinatorLayout下使用,如果在其他的ViewGroup下使用的话,很多功能都不能使用。
AppBarLaytou同时需要一个和他配合的可以滚动的视图,通过ScrollingViewBehavior来互相绑定,如Sample中的

app:layout_behavior="@string/appbar_scrolling_view_behavior"

指代的就是

android.support.design.widget.AppBarLayout$ScrollingViewBehavior

或者指定一个其他的Behavior,但是这个字符串要是这个类的全类名。这里的这个ScrollingViewBehavior在AppBarLayout.java中定义,继承HeaderScrollingViewBehavior,而它就继承ViewOffsetBehavior< View>,而它又继承自CoordinatorLayout.Behavior< V>,所以最后的父类还是这个Behavior。这里暂时先不看,后面我自己学习之后再来另写一篇,应该有点搞头。
layout_scrollFlags有几个对应的属性

属性名 意义
scroll 要滚动出屏幕的view都需要设置这个flag-没有设置这个flag的view将被固定在屏幕顶部
enterAlways 所有的下滑动作都会导致该视图的出现,启“快速返回”模式
enterAlwaysCollapsed 定义了一个最小高度(minHeight)同enterAlways也定义了,那么view将在到达这个最小高度的时候开始示,并且从这个时候开始慢慢展开,当滚动到顶部的时候展开完
exitUntilCollapsed 当你定义了一个minHeight,这个view将在动到达这个最小高度的时候消失

CollapsingToolbarLayout

CollapsingToolbarLayout是ToolBar的封装类,实现可伸缩的Toolbar,它被设计用来当做AppBarLayout的直接子布局,CollapsingToolbarLayout 包含如下特性:

  1. Collapsing title
    当toolbar伸展开时显示的相对较大,当移除屏幕的时候会慢慢变小,过
    setTitle(CharSequence)设置,title的外观可以用collapsedTextAppearance和expandedTextAppearance分别设置

  2. Content Scrim
    当滚动位置达到一个固定值的时候出现或者消失的内容,setContentScrim(Drawable)或者属性值app:contentScrim设置

  3. Status bar scrim 当滚动值达到一个固定值的时候出现在状态栏后面的内容,通setStatusBarScrim(Drawable),这个特性只能在L版本上实现,并且要设置android:fitsSystemWindows=“true”

  4. Parallax scrolling children
    视差滚动子布局,当内容滚动的时候,子布局中的内容可以跟着一起动
    滚动视差因子可以通过setParallaxMultiplier(float)或layout_collapseParallaxMultiplier设置,与此对应的折叠模式要成layout_collapseMode=“parallax”。Sample中设置的Toolbarlayout_collapseMode为"pin"

属性 用法
pin CollapsingToolbarLayout完全收缩后,Toolbar还可以保留在幕上
parallax 在内容滚动时,CollapsingToolbarLayout中的View(比ImageView)也可以同时滚动,实现视差滚动效果,通常layout_collapseParallaxMultiplier(设置视差因子)搭配使用

一般Toolbar设置为pin,CollapsingToolbarLayout中的其他视图可尝试使用parallax属性

  1. Pinned position children
    上面已经讲解了,如Sample中的Toolbar

Sample代码修改实战

CollapsingToolbarLayout中加个图片看看

 <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/bg"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"
                />
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />
        </android.support.design.widget.CollapsingToolbarLayout>

效果:
这里写图片描述

CollapsingToolbarLayout的标题颜色变变

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:title="Beautiful Title"
            app:expandedTitleTextAppearance="@style/MyExpandedText"//只定义一个字体颜色
            app:collapsedTitleTextAppearance="@style/MyCollapsedText"//同上
            app:contentScrim="?attr/colorPrimaryDark"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

效果:
这里写图片描述

备注:
当我直接在xml文件中直接在app:expandedTitleTextAppearance后面设置color的时候,得到的结果不是改变字体颜色,而是改变了整个背景的颜色,你们可以试试

FloatingActionButton的位置改改

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/toolbar"
        app:layout_anchorGravity="bottom|center" />

换个坐标系,也就是layout_anchor就是基准点,相对于它在bottom和center是相对于这个基准点的位置
效果:
这里写图片描述 这里写图片描述

results matching ""

    No results matching ""