coordinatorLayout 和AppBarLayout的踩坑记

Posted 2022-12-09 pszh

5.0的材质化引入了很多的新东西，网上的资料也有很多http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html 介绍了Design Support Library 设计库,其他的用起来和找资料感觉都是可以搞定， 而coordinatorLayout这个和appBarLayout的一些使用感觉介绍的太少，或者是太多模糊（也可能是我理解太差了，下面说下我对这个的理解吧）

首先，使用这个控件首先你的项目要依赖 com.android.support:design:25.0.1  红色字根据个人项目去修改 

然后你AndroidManifest中application 的theme 设置成@style/AppTheme.

最后你就可以玩这个控件了，首先我来贴一个我的小例子吧

<?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:id="@+id/activity_main"
    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:orientation="vertical"
        >
        <!--
           AppBarLayout的子控件属性
        app:layout_scrollFlags的value：
                    1.scroll|exitUntilCollapsed
                    2.scroll|enterAlways
                    3.Scroll|enterAlwaysCollapsed
                    4,不设置的时候，改变布局不能滑动


                -->

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >
            <!-- app:layout_collapseMode(折叠模式):可取的值如下:
             1.pin:在滑动过程中,此自布局会固定在它所在的位置不动,
                直到CollapsingToolbarLayout全部折叠或者全部展开
             2.parallax:视察效果,在滑动过程中,不管上滑还是下滑都会有视察效果,
                (layout_collapseParallaxMultiplier视差因子 0~1之间取值,当设置了parallax时可以配合这个属性使用,调节自己想要的视差效果)
             3.默认none不设置:跟随NestedScrollView的滑动一起滑动,
                NestedScrollView滑动多少距离他就会跟着走多少距离-->


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="?attr/actionBarSize"
                android:gravity="center"
                android:orientation="vertical"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@mipmap/ic_launcher"

                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="我是一个man"
                    />
            </LinearLayout>

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="top"
                app:layout_collapseMode="pin">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="我是toolbar"/>
            </android.support.v7.widget.Toolbar>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
        </android.support.design.widget.CollapsingToolbarLayout>

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

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

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="11111111111111111"
                android:textSize="30sp"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="twotwotwotwotwotwotwotwotwotwotwotwotwotwotwotwotwotwotwotwotwotwotwo"
                android:textSize="30sp"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="threethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethreethree"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="4444444444444444444444444444444444444444444444444444444444444444444444444444"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="新年快乐！！！！新年快乐！！！！新年快乐！！！！新年快乐！！！！新年快乐！！！！新年快乐！！！！新年快乐！！！！新年快乐！！！！新年快乐！！！！新年快乐！！！！新年快乐！！！！新年快乐！！！！新年快乐！！！！新年快乐！！！！新年快乐！！！！新年快乐！！！！新年快乐！！！！新年快乐！！！！新年快乐！！！！新年快乐！！！！新年快乐！！！！新年快乐！！！！新年快乐！！！！"
                android:textSize="30sp"/>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>


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

然后实现的效果

让我们从最外层往里面一步一步分析

1.首先说下coordinatorLayout吧

    他是一个继承自ViewGroup的空间，使用的时候类似framLayout，后面的布局会覆盖前面的布局,但是又有着和relativelayout类似设置位置的app:Layout_behavior属性，（只有直接子控件能使用的）    

        也说下app:Layout_behavior="@string/appbar_scrolling_view_behavior"这个是demo中的使用例子,具体了解可以看

            http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2016/0224/3991.html  

  2.然后是AppBarLayout

        他是一个继承子linearLayout的控件，所以线性布局的属性他都是拥有的。并且他拥有自己的属性layout_scrollFlags,他拥有自己的四个值         a.默认scroll:要想滚动出屏幕的view都要设置这个值，不设置的话一直固定了         b1:enterAlways:任意向下滚动的操作都会到使view出现，“可做快速返回模式，页面比较长，向上滚动隐藏了标题栏，一向下滚动就显示标题栏，”也就是滚动的时候，先滚动这个view，然后再是 NestedScrollView的内容，         b2:enterAlwaysCollapsed:定义view是何时进入（已经消失之后何时再次显示）。假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完         b3:exitUntilCollapsed:  定义view 何时退出，定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。         上面说的感觉不清楚，给下图吧，感觉更好点  ，从a|b1,a|b2,a|b3         
                      a和b是可以一起使用的，比如scroll|exitUntilCollapsed。

3.折叠控件CollapsingToolbarLayout 

    继承自FragmentLayout，位置通过margin和gravity来进行控制  这里要说的app:layout_collapseMode（也就是折叠的模式）这个属性

    1.pin：在滑动过程中，布局会固定在自己的位置不动，知道父控件CollapsingToolbarLayout全部折叠或全展开。

    2.parallax：视察效果，一般和layout_collapseParallaxMultiplier（vaule 取值范围0.0～1.0），直接看上面三张图的第三张小机器人图片，和我是一个man的所属linearLayout就是设置了值为0.0的效果，你可以设置下1.0的效果（偷偷告诉你，这个linearLayout就不显示了）

    然后也来介绍下这个控件自己用的一些比较好的属性吧

    app:contentScrim="@android:color/holo_red_light"  ：颜色渐变为这个holo_red_light

    app:title="我是CollapsingToolbarLayout的app：title" ：非常不错的一个属性，等会给图

    app:expandedTitleMargin="10dp":上面title的展开时候的margin，具体怎么用的话你设置几个值试试就知道了，和平常的有丢丢不一样

    剩下的还有就不一一介绍了比如

4.android.support.v7.widget.Toolbar

    终于最后一个了，也是一个比较奇葩的一个，奇葩的原因是，只有他配合了title才能有三张图的第三张title悬浮效果你如果自己定一个状态栏的话，一样配置，就是和第二张图效果，不悬浮，（这个bug也可以通过在CollapsingToolbarLayout之后,AppBarLayout之内放一个布局就可以，不知道为啥，if you know ，thank you call me）。吐槽完了，说下这个控件吧

  这个控件继承自ViewGroup ，说明他的内部可以放view的或者是Linearlayout，不过不建议，毕竟这样增加了布局的层数，而且这个控件也相对的封装的很好，一些相应的属性都是有的，比如：

    app:title="控件上显示的字"，app:navigationIcon="@mipmap/ic_arrow_back"左边的控件图标。。。

具体怎么用的话度娘知道的，google那就更不用说了，这里也提供个链接吧http://blog.csdn.net/javazejian/article/details/50451853

ok，终于写完了，累死，歇会