Android M 控件：AppBarLayout,CoordinatorLayout,CollapsingToolbarLayout

2023-07-21 17:10:10

AppBarLayout

AppBarLayout跟它的名字一样，把容器类的组件全部作为AppBar。是继承LinerLayout实现的一个ViewGroup容器组件，它是为了Material Design设计的App Bar，支持手势滑动操作。

默认的AppBarLayout是垂直方向的，它的作用是把AppBarLayout包裹的内容都作为AppBar。

上图就是把Toolbar和TabLayout放到了AppBarLayout中，让他们当做一个整体作为AppBar。

常用代码布局:

<android.support.design.widget.AppBarLayout

android:id="@+id/appbar"

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="?attr/actionBarSize"

android:background="?attr/colorPrimary"

android:minHeight="?attr/actionBarSize"></android.support.v7.widget.Toolbar>

<android.support.design.widget.TabLayout

android:id="@+id/tabs"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:layout_scrollFlags="scroll"

app:tabIndicatorColor="@android:color/holo_red_dark"

app:tabSelectedTextColor="@android:color/holo_red_dark"

app:tabTextColor="@android:color/black" />

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

注意： AppBarLayout必须作为Toolbar的父布局容器

AppBarLayout是支持手势滑动效果的，不过的跟CoordinatorLayout配合使用。

AppBarLayout这个控件也是让子view共同协作的，它和CoordinatorLayout的区别在于：

AppBarLayout是在效果上的协作，用AppBarLayout包裹的子view会以一个整体的形式作为AppBar。

CoordinatorLayout是在行为上的一种协作，尤其是在滚动的协作上，可以说比较完美(有很多改进)。

CoordinatorLayout

CoordinatorLayout是这次新添加的一个增强型的FrameLayout。从音译来看叫协调布局，它的作用有两个：

1、作为顶层布局
2、调度协调子布局

通过对子View的Behaviors的指定，可以实现子View之间的通信，从而确定它们具体的交互行为。

提供了几种不用写动画代码就能工作的方法，这些效果包括：
1）让浮动操作按钮上下滑动，为Snackbar留出空间。如下图：

2）扩展或者缩小Toolbar或者头部，让主内容区域有更多的空间。

控制哪个view应该扩展还是收缩，以及其显示大小比例，包括视差滚动效果动画。

2）参考文章：

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0717/3196.html

http://blog.csdn.net/xyz_lmn/article/details/48055919

Behavior
1.官方的Behavior

Behaivor是CoordinatorLayout子View之间进行交互的插件，包括了一种或多种交互行为，如拖拉、滑动、下拉等各种手势。已知的子类有AppBarLayout.Behavior，AppBarLayout.ScrollingViewBehavior， FloatingActionButton.Behavior和SwipeDismissBehavior<V extends View>,这些可以直接使用@string/**的形式在layout_behavior属性中使用。

2.自定义的Behavior

自定义的Behavior需要重新实现的回调方法有：

public boolean layoutDependsOn (CoordinatorLayout parent, View child, View dependency)
该方法确定是否有另一个指定的兄弟View作为依赖布局，并且作为对布局请求的响应，至少会调用一次。如果指定的child和dependency返回为true,父ViewCoordinatorLayout可能会做以下两件事：
- 不管子View的命令，始终在dependencyView后展示child；
- 当dependency视图布局或位置发生变化时，调用onDepentViewChanged方法；
public boolean onDependentViewChanged (CoordinatorLayout parent, View child, View dependency)
无论dependency尺寸或者布局改变，该方法都会被调用。Behavor可能会合适地使用该方法来更新视图以此作为回应。当layoutDependsOn被调用时或者child设置了以一个锚视图，dependency也会改变。如果Behavor改变了child的位置或者大小，则返回true。

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

代码如下：
<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:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="160dp"
        >
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:statusBarScrim="?attr/colorPrimary"
            >
            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@drawable/img3"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.6" />
            <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/ThemeOverlay.AppCompat.Light"
                />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        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"
            android:paddingTop="24dp">
            <include layout="@layout/item_card_view" />
            <include layout="@layout/item_card_view" />
            <include layout="@layout/item_card_view" />
            <include layout="@layout/item_card_view" />
            <include layout="@layout/item_card_view" />
            <include layout="@layout/item_card_view" />
            <include layout="@layout/item_card_view" />
            <include layout="@layout/item_card_view" />
            <include layout="@layout/item_card_view" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

在CollapsingToolbarLayout中设置了一个ImageView和一个Toolbar。并把这个CollapsingToolbarLayout放到AppBarLayout中作为一个整体。

1、在CollapsingToolbarLayout中：
我们设置了layout_scrollFlags:关于它的值我这里再说一下：

scroll - 想滚动就必须设置这个。

EnterAlways - 实现quick return效果, 当向下移动时，立即显示View（比如Toolbar)。

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

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

其中还设置了一些属性，简要说明一下：
contentScrim - 设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。

expandedTitleMarginStart - 设置扩张时候(还没有收缩时)title向左填充的距离。

2、在ImageView控件中：

我们设置了：
layout_collapseMode (折叠模式) - 有两个值:

pin - 设置为这个模式时，当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上。

parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。

layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子，值为：0~1。

3、在Toolbar控件中：
我们设置了layout_collapseMode(折叠模式)：为pin。
总结：当设置了layout_behavior的控件响应起了CollapsingToolbarLayout中的layout_scrollFlags事件时，ImageView会有视差效果的向上滚动移除屏幕，当开始折叠时CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就会变为我们设置好的背景色，Toolbar也一直会固定在最顶端。

【注】：使用CollapsingToolbarLayout时必须把title设置到CollapsingToolbarLayout上，设置到Toolbar上不会显示。即：
mCollapsingToolbarLayout.setTitle(" ");

title的字体颜色：
扩张时候的title颜色：mCollapsingToolbarLayout.setExpandedTitleColor();

收缩后在Toolbar上显示时的title的颜色：mCollapsingToolbarLayout.setCollapsedTitleTextColor();

代码设置如下：
@Override
protected void initView() {
    Toolbar mToolbar=findView(R.id.toolbar);
    setSupportActionBar(mToolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            onBackPressed();
        }
    });
    //使用CollapsingToolbarLayout必须把title设置到CollapsingToolbarLayout上，设置到Toolbar上则不会显示
    CollapsingToolbarLayout mCollapsingToolbarLayout = findView(R.id.collapsing_toolbar);
    mCollapsingToolbarLayout.setTitle("CollapsingToolbar");
    //通过CollapsingToolbarLayout修改字体颜色
    mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//设置还没收缩时状态下字体颜色
    mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//设置收缩后Toolbar上字体的颜色
}

来自为知笔记(Wiz)

码农公寓

Behavior1.官方的Behavior

2.自定义的Behavior

相关文章

Behavior
1.官方的Behavior