Android 页面上滑置顶悬停实现 (CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+NestedScrollView)

我开始炒冷饭了啊,有人说这套组合已经被用烂了,有人说这玩意谁都会,其实没有人说哈,我就是怕被人说,提前预警哈.

最近,工作比较忙,好久都没有写一下博客来说点什么.

刚刚我去翻了一下项目,发现去年的上滑置顶页面可以给大家拿出来讲一下:

上滑触发置顶后的样子:

好,如果你也想要实现类似的效果,那么请你调整一下坐姿,开始进入正题.

内个谁! 后排的童鞋帮忙把同桌喊一下,别睡了... (^_^)∠※

首先介绍用到的控件:

最外层:CoordinatorLayout

上半部分_外层:AppBarLayout  

上半部分_上滑后隐藏的部分:CollapsingToolbarLayout

下半部分_上滑充满的部分:NestedScrollView

豁出去了,我要画图了:

怎么样,是不是画的简洁易懂!

最后我把我这个页面的代码分享出来:

<?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">
    <!-- 第一部分:CoordinatorLayout -->
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        >
        <!-- 第二部分:缩放控件-->
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:elevation="0dp">

            <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:layout_scrollFlags="scroll">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:orientation="vertical"
                    android:background="@color/white"
                    android:layout_height="wrap_content">

                    <FrameLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content">

                        <ImageView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:scaleType="fitXY" />

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="90px"
                            android:background="@color/white1"
                            android:orientation="horizontal">

                            <ImageView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:paddingBottom="30px"
                                android:paddingLeft="40px"
                                android:paddingRight="60px"
                                android:src="@mipmap/back_white" />

                            <TextView
                                android:layout_width="0px"
                                android:layout_height="wrap_content"
                                android:layout_weight="1" />

                            <ImageView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:paddingBottom="30px"
                                android:paddingLeft="60px"
                                android:paddingRight="40px"
                                android:src="@mipmap/share_white" />

                        </LinearLayout>


                    </FrameLayout>

                    <android.support.v7.widget.CardView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_marginLeft="40px"
                        android:layout_marginRight="40px"
                        android:layout_marginTop="-40px"
                        android:padding="30px"
                        app:cardCornerRadius="20px"
                        app:cardPreventCornerOverlap="false"
                        app:cardUseCompatPadding="true">

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

                            <TextView
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:drawableLeft="@mipmap/release_topic_left"
                                android:drawablePadding="20px"
                                android:maxLines="2"
                                android:ellipsize="end"
                                android:textColor="@color/heise"
                                android:textSize="16sp" />

                            <TextView
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:layout_marginBottom="30px"
                                android:layout_marginTop="30px"
                                android:maxLines="3"
                                android:textColor="@color/heise"
                                android:textSize="13sp" />

                            <TextView
                                android:layout_width="match_parent"
                                android:layout_height="1px"
                                android:background="@color/fenge" />

                            <TextView
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:layout_marginTop="20px"
                                android:maxLines="3"
                                android:textColor="@color/huise"
                                android:textSize="12sp" />

                        </LinearLayout>


                    </android.support.v7.widget.CardView>
                </LinearLayout>
            </android.support.design.widget.CollapsingToolbarLayout>


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

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:paddingTop="50px"
                    android:orientation="horizontal"
                    android:visibility="visible">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingTop="30px"
                        android:paddingBottom="30px"
                        android:visibility="gone"
                        android:paddingLeft="30px"
                        android:paddingRight="60px"
                        android:src="@mipmap/h5_back1" />
                    <android.support.design.widget.TabLayout
                        android:layout_width="0px"
                        android:layout_weight="1"
                        android:layout_height="wrap_content"
                        android:textAlignment="center"
                        app:layout_scrollFlags="scroll"
                        app:tabGravity="center"
                        app:tabIndicatorColor="@color/heise"
                        app:tabIndicatorHeight="5px"
                        app:tabMode="fixed"
                        app:tabSelectedTextColor="@color/heise"
                        app:tabTextAppearance="@style/TabLayoutStyle"
                        app:tabTextColor="@color/huise">

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


                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingTop="30px"
                        android:visibility="gone"
                        android:paddingBottom="30px"
                        android:paddingLeft="60px"
                        android:paddingRight="30px"
                        android:src="@mipmap/h5_share1" />

                </LinearLayout>



                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="15px"/>
            </LinearLayout>
        </android.support.design.widget.AppBarLayout>


        <!-- 第三部分:Your Scroll View-->
        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:overScrollMode="always"
            android:fillViewport="true"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <android.support.v4.view.ViewPager
                android:layout_width="match_parent"
                android:layout_height="match_parent">

            </android.support.v4.view.ViewPager>
        </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>



</LinearLayout >

监听置顶事件代码: 

AppBarLayout appBarLayout = findViewById(R.id.appBarLayout);
appBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
    @Override
    public void onStateChanged(AppBarLayout appBarLayout, State state) {

        if (state == State.EXPANDED) { //做你想做的,比如显示新的标题布局及样式
            //展开状态 
        } else if (state == State.COLLAPSED) {
            //折叠状态
        } else {
            //中间状态
        }
    }
});

最后,有什么深海没有讲清楚的,或者大家想问的,欢迎到评论区留言哦!