前言
本文实现了多列表下banner可上滑，条目可吸顶的效果。

欢迎加入学习小组QQ群: 193765960。

版权归作者所有，如有转发，请注明文章出处：http://www.jianshu.com/u/d43d948bef39

技术方案

场景：

• 使用自定义的Titlebar
• 多tab多列表切换
• 顶部有公用的view,要求在列表上滑时，顶部View要滑出屏幕，tabs吸顶

选型：

• 其实项目之初，是没有明确要求顶部view是可上下跟随滑动的，所以开始开发时自然而然的选择了：TabLayout+Viewpager+fragment的方案。其中fragment的内容为列表，可上拉自动加载：RecyclerView实现。
  效果如下图：
  Banner展开状态
• 后来产品确认时指出顶部的view要可上下跟随滑动，Tabs要吸顶。
  效果如下图：
  Banner收起，Tabs吸顶状态
  第一反应是使用CollapsingToolbarLayout，但是因为app统一使用的自定义Titlebar,所以认为这个方案可能不合适，毕竟CollapsingToolbarLayout是要搭配AppBarLayout和Toolbar来使用的，目的是为了实现可伸缩的toolbar。
  • 实践证明我还是浅薄的很，对知识的掌握还是不够
  • CollapsingToolbarLayout远比我想的要灵活，以后再也不要认为CollapsingToolbarLayout就是专用于实现伸缩性Toolbar了。

顶部view可滑动跟随的最终方案：

CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout，熟悉的同学可以发现，我们这里是不带Toolbar玩了。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">

    <!--自定义title bar-->
    <include
        android:id="@+id/title_bar_view"
        layout="@layout/my_title_bar"/>

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:visibility="gone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="@android:color/transparent"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:expandedTitleGravity="top"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">
                
                //顶部view
                <ImageView
                    android:scaleType="fitXY"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.7" />

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

        //正常视图
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:orientation="vertical">

            <android.support.design.widget.TabLayout
                    android:id="@+id/deals_header_tab"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    app:tabGravity="fill"
                    app:tabIndicatorColor="#ffcb05"
                    app:tabIndicatorHeight="2dp"
                    app:tabMode="scrollable"
                    app:tabSelectedTextColor="#ffcb05"
                    app:tabTextColor="#ffffff"/>

            <android.support.v4.view.ViewPager
                android:id="@+id/page"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#f5f4ef"/>

        </LinearLayout>
        //正在加载中视图
        <LinearLayout
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical"
            android:visibility="gone">
        </LinearLayout>

        //断网时，重新加载视图
        <LinearLayout
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#f5f4ef"
            android:gravity="center"
            android:orientation="vertical"
            android:visibility="gone">
            ...
        </LinearLayout>
    </android.support.design.widget.CoordinatorLayout>
</LinearLayout>

细节处理

• 收缩的顶部view显示处理：要求整个滑动过程一直可见

<android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="@android:color/transparent"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:expandedTitleGravity="top"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

app:contentScrim="@android:color/transparent":view收缩到最后阶段，前景色显示透明，这样就可以显示后面的图片

• fragment中显示空界面和异常界面时，也要求整个屏幕可以滑动

使用ScrollView或者NestedScrollview包裹fragment的空界面和异常界面，这样就可以触发系统的滑动机制，将滑动事件交给外层的CollapsingToolbarLayout来协同滑动。

后记
如果原本就允许使用系统的toolbar,选型上不会经历很多的纠结，不过好在还是尝试并成功了。通过这次的尝试，也是对CollapsingToolbarLayout有了更新的认识，举一反三，做吸顶类的项目我们是不是掌握了更加便捷的实现？