CoordinatorLayout + AppBarLayout 实现标题栏置顶

因为前段时间项目中需要这种效果，之前看过 鸿洋大神写过的一个 360详情界面效果，也下载了源码，做了一些尝试，然而感觉太过于局限了，并不能符合项目需求，后来就自己翻阅了一些资料，了解到了 Design 包 中的 CoordinatorLayout ，AppBarLayout 等新组件。

网上了解到的关于 AppBarLayout 很多都是结合 ToolBar 来使用的，但是我一般项目中都是自己去定义 ToolBar 所以，就根据自己的写法去尝试了一下。
下面是效果图布局：

  

   

    

     

    
    

     

      <?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">
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
        <TextView
     
    
   

    

     

    
    

     
            android:layout_width="match_parent"
     
    
   

    

     

    
    

     
            android:layout_height="50dp"
     
    
   

    

     

    
    

     
            android:background="#999999"
     
    
   

    

     

    
    

     
            android:gravity="center"
     
    
   

    

     

    
    

     
            android:minHeight="50dp"
     
    
   

    

     

    
    

     
            android:text="顶部标题"
     
    
   

    

     

    
    

     
            android:textColor="#fff"
     
    
   

    

     

    
    

     
            app:layout_scrollFlags="scroll" />
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
        <TextView
     
    
   

    

     

    
    

     
            android:layout_width="match_parent"
     
    
   

    

     

    
    

     
            android:layout_height="200dp"
     
    
   

    

     

    
    

     
            android:background="#666666"
     
    
   

    

     

    
    

     
            android:gravity="center"
     
    
   

    

     

    
    

     
            android:minHeight="50dp"
     
    
   

    

     

    
    

     
            android:text="this is content"
     
    
   

    

     

    
    

     
            android:textColor="#fff"
     
    
   

    

     

    
    

     
            android:textSize="18sp"
     
    
   

    

     

    
    

     
            app:layout_scrollFlags="scroll" />
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
        <LinearLayout
     
    
   

    

     

    
    

     
            android:layout_width="match_parent"
     
    
   

    

     

    
    

     
            android:layout_height="44dp"
     
    
   

    

     

    
    

     
            android:background="#fff"
     
    
   

    

     

    
    

     
            android:orientation="horizontal">
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
            <TextView
     
    
   

    

     

    
    

     
                android:id="@+id/tv_title1"
     
    
   

    

     

    
    

     
                android:layout_width="0dp"
     
    
   

    

     

    
    

     
                android:layout_height="match_parent"
     
    
   

    

     

    
    

     
                android:layout_weight="1"
     
    
   

    

     

    
    

     
                android:gravity="center"
     
    
   

    

     

    
    

     
                android:text="scrollFragment"
     
    
   

    

     

    
    

     
                android:textColor="@color/select_option_title"
     
    
   

    

     

    
    

     
                android:textSize="14sp" />
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
            <TextView
     
    
   

    

     

    
    

     
                android:id="@+id/tv_title2"
     
    
   

    

     

    
    

     
                android:layout_width="0dp"
     
    
   

    

     

    
    

     
                android:layout_height="match_parent"
     
    
   

    

     

    
    

     
                android:layout_weight="1"
     
    
   

    

     

    
    

     
                android:gravity="center"
     
    
   

    

     

    
    

     
                android:text="recyclerFragment"
     
    
   

    

     

    
    

     
                android:textColor="@color/select_option_title"
     
    
   

    

     

    
    

     
                android:textSize="14sp" />
     
    
   

    

     

    
    

     
        </LinearLayout>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

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

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    <FrameLayout
     
    
   

    

     

    
    

     
        android:id="@+id/fl_control"
     
    
   

    

     

    
    

     
        android:layout_width="match_parent"
     
    
   

    

     

    
    

     
        android:layout_height="match_parent"
     
    
   

    

     

    
    

     
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

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

需要提醒的是，CoordinatorLayout 中 对于当前滑动效果，目前只支持 v4 包下的 NestedScrollView，以及 v7 包下的 RecyclerView 。

上面布局文件中的 FrameLayout 部分也可以换成 ViewPager ，但是也要注意里面使用的控件 要符合上面所提醒的要求。

另外一点就是，为了能够和 AppBarLayout 进行联动，下面的占位控件 必须要添加的一点属性：

app:layout_behavior="@string/appbar_scrolling_view_behavior"
1
在使用 AppBarLayout 的时候，要注意设置 子控件的 app:layout_scrollFlags 属性，通过上面的布局文件就可以看出来，最后指定的标题栏，是没有设置 layout_scrollFlags 属性的，下面也简单的贴一下 scrollFlags 的属性介绍：

scroll: 所有想滚动出屏幕的view都需要设置这个flag， 没有设置这个flag的view将被固定在屏幕顶部。
enterAlways: 设置这个flag时，向下的滚动都会导致该view变为可见，启用快速“返回模式”。
enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。
snap:在滚动结束后，如果view只是部分可见，它将滑动到最近的边界。比如，如果view的底部只有25%可见，它将滚动离开屏幕，而如果底部有75%可见，它将滚动到完全显示。
这五个属性，大家可以根据自己的想法，或者需求去具体尝试 一下效果。

这个效果现在看起来东西不是很多，基本的上面也有介绍，希望可以给大家带来一些帮助。
（Demo加群，进群找群主要demo）
欢迎各位小伙伴加入我的qq群：开发一群：454430053 开发二群：537532956   这里已经有很多小伙伴在等你了，快来加入我们吧

文章来源: wukong.blog.csdn.net，作者：再见孙悟空_，版权归原作者所有，如需转载，请联系作者。

原文链接：wukong.blog.csdn.net/article/details/106320346