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.BehaviorAppBarLayout.ScrollingViewBehaviorFloatingActionButton.BehaviorSwipeDismissBehavior<V extends View>,这些可以直接使用@string/**的形式在layout_behavior属性中使用。

2.自定义的Behavior

  • 自定义的Behavior需要重新实现的回调方法有:
  1. public boolean layoutDependsOn (CoordinatorLayout parent, View child, View dependency)
    该方法确定是否有另一个指定的兄弟View作为依赖布局,并且作为对布局请求的响应,至少会调用一次。如果指定的childdependency返回为true,父ViewCoordinatorLayout可能会做以下两件事:

    • 不管子View的命令,始终在dependencyView后展示child
    • dependency视图布局或位置发生变化时,调用onDepentViewChanged方法;
  2. 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上字体的颜色
}

Android M 控件:AppBarLayout,CoordinatorLayout,CollapsingToolbarLayout的更多相关文章

  1. Android 开源控件与常用开发框架开发工具类

    Android的加载动画AVLoadingIndicatorView 项目地址: https://github.com/81813780/AVLoadingIndicatorView 首先,在 bui ...

  2. android 基础控件(EditView、SeekBar等)的属性及使用方法

        android提供了大量的UI控件,本文将介绍TextView.ImageView.Button.EditView.ProgressBar.SeekBar.ScrollView.WebView ...

  3. Android基本控件之Menus

    在我们的手机中有很多样式的菜单,比如:我们的短信界面,每条短信,我们长按都会出现一个菜单,还有很多的种类.那么现在,我们就来详细的讨论一下安卓中的菜单 Android的控件中就有这么一个,叫做Menu ...

  4. Android:控件布局(相对布局)RelativeLayout

    RelativeLayout是相对布局控件:以控件之间相对位置或相对父容器位置进行排列. 相对布局常用属性: 子类控件相对子类控件:值是另外一个控件的id android:layout_above-- ...

  5. Android:控件布局(线性布局)LinearLayout

    LinearLayout是线性布局控件:要么横向排布,要么竖向排布 决定性属性:必须有的! android:orientation:vertical (垂直方向) .horizontal(水平方向) ...

  6. 矩阵, 矩阵 , Android基础控件之ImageView

    天下文章大家抄,以下所有内容,有来自copy,有来自查询,亦有自己的总结(目的是总结出自己的东西),所以说原创,不合适,说是转载也不恰当,所以我称之为笔记,可惜没有此分类选项,姑且不要脸一点,选择为原 ...

  7. Android给控件添加触摸回调

    Android给控件添加触摸回调 脑补一个场景,一个页面点击某个按钮会弹出PopupWindow,然后点击PopupWindow以外的任意位置关闭 效果图 实现方法 可以在布局的最外层容器监听触摸事件 ...

  8. Android 基本控件相关知识整理

    Android应用开发的一项重要内容就是界面开发.对于用户来说,不管APP包含的逻辑多么复杂,功能多么强大,如果没有提供友好的图形交互界面,将很难吸引最终用户.作为一个程序员如何才能开发出友好的图形界 ...

  9. Github上star数超1000的Android列表控件

    Android开发中,列表估计是最最常使用到的控件之一了.列表相关的交互如下拉刷新,上拉更多,滑动菜单,拖动排序,滑动菜单,sticky header分组,FAB等等都是十分常见的体验.Github中 ...

  10. Android:控件布局(相对布局)RelativeLayout(转)

    相对布局常用属性: 子类控件相对子类控件:值是另外一个控件的id android:layout_above----------位于给定DI控件之上android:layout_below ------ ...

随机推荐

  1. Windows Azure HDInsight 使用技巧

    Windows Azure HDInsight是一个面向大数据的PaaS服务,是PaaS版本的Hadoop.HDInsight是微软与Hortonworks合作的产物.可以理解为Hortonworks ...

  2. service postgresql initdb [FAILED]

    一.场景 安装postgresql时可能因为配置有问题[后来定位问题是我把pg_hba.conf中local一栏的ident修改为peer就会出错]导致服务起不来,报错如下: [root@localh ...

  3. Jetty使用攻略

    jetty作为一款小型的web容器用处很大,因为其小巧强大,经常作为嵌入式的组件处理http交互. Jetty 作为一个独立的 Servlet 引擎可以独立提供 Web 服务,但是它也可以与其他 We ...

  4. 如何用ZBrush做人体造型雕刻

    之前我们用ZBrush®中的Curves和Insert笔刷快速创建模型的躯干.四肢以及手指.经过老师耐心的讲解我们也收获了很多,知道了创建模型的流程和雕刻技巧.今天的ZBrush教程将结合一些新的雕刻 ...

  5. Loadrunner将字符串存为参数

    直接代码: Action() { //定义一个字符串 char *URL= "http://linux.cn"; /******************************** ...

  6. Ac日记——大整数减法 openjudge 1.6 11

    11:大整数减法 总时间限制:  1000ms 内存限制:  65536kB 描述 求两个大的正整数相减的差. 输入 共2行,第1行是被减数a,第2行是减数b(a > b).每个大整数不超过20 ...

  7. SWT使用注意点

    出现这个错: java.lang.UnsatisfiedLinkError: no swt-win32-3139 in java.library.path 解决方法: 将swt-win32-3139导 ...

  8. luogu1097统计数字[noip2007提高组Day1T1]

    题目描述 某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5*10^9).已知不相同的数不超过10000个,现在需要统计这些自然数各自出现的次数,并按照自然数从小到大的顺序输出 ...

  9. 用Javascript判断访问来源操作系统, 设备, 浏览器类型

    var browser = { os : function() { var u = navigator.userAgent; return {// 操作系统 linux: !!u.match(/\(X ...

  10. 2016 08 27 印刷菜单增加sql语句

    insert into `module` (`ID`, `CONSONANTCODE`, `CREATEDATE`, `DESCRIPTION`, `HANDLER`, `HASCHILD`, `IC ...