布局滑到顶部悬停效果

2020-05-15

简单三部曲：

1、首先使用 CoordinatorLayout协调员布局。

2、悬停及上面的布局用AppBarLayout布局包起来；

在悬停上面的布局使用这个属性设置滑动的逻辑，这个属性的布局会被滑出屏去，如果多次设置，后设置的无效

  app:layout_scrollFlags="scroll|enterAlways" //enterAlways，在向下滚动时该布局优先滚动

3、悬停下面的面布局用下面这个属性，就能将布局放到AppBarLayout布局的下面并且关联滑动了，该控件一定要是滑动或是包含滑动的，否则就无效了

注：ScrollView无效，要使用新的 NestedScrollView

app:layout_behavior="@string/appbar_scrolling_view_behavior"

布局代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <!--   <androidx.appcompat.widget.Toolbar
               android:id="@+id/toolbar"
               android:layout_width="match_parent"
               android:layout_height="?attr/actionBarSize"
               android:background="?attr/colorPrimary"
               app:elevation="8dp"
               app:popupTheme="@style/AppTheme.PopupOverlay"
               app:navigationIcon="@mipmap/ic_launcher_round"
               app:titleTextColor="#000"

               app:layout_scrollFlags="scroll|enterAlways">

               <TextView
                   android:layout_width="match_parent"
                   android:layout_height="match_parent"
                   android:layout_marginRight="16dp"
                   android:gravity="center"
                   android:text="标题" />

           </androidx.appcompat.widget.Toolbar>-->

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="在悬停上面的布局"

            app:layout_scrollFlags="scroll"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="悬停布局" />

    </com.google.android.material.appbar.AppBarLayout>

       <androidx.core.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">
               <TextView
                   android:layout_width="match_parent"
                   android:textSize="300dp"
                   android:text="你好不好嘛"
                   android:layout_height="match_parent" />
           </LinearLayout>
       </androidx.core.widget.NestedScrollView>

  <!--改变FloatingActionButton的背景颜色：
    1、页面所使用的主题里面用的colorAccent颜色值
    2、android:backgroundTint(会有colorAccent颜色值的边) 
         或 app:backgroundTint。同时使用时前者有效-->
   <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="right|bottom|end"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

.
.

在AppBarLayout里面使用CollapsingToolbarLayout+Toolbar可以让Toolbar也停在顶部

这里标题栏要停在顶部的话，要用Toobar，不然会被滑出屏去； Toolbar把这个属性值如果是用 parallax（视差），Toolbar的子布局也会被滑出屏去

        app:layout_collapseMode="pin"

布局代码：

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">
     

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:src="@drawable/ic_launcher_round" />


            <!--这里标题栏要停在顶部的话，要用Toobar，不然会被滑出屏去；
             这个属性值如果是用 parallax（视差），Toolbar的子布局也会被滑出屏去
            app:layout_collapseMode="pin"
            -->
            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                app:layout_collapseMode="pin"
                app:title="默认标题"
                app:navigationIcon="@mipmap/ic_launcher_round"
                app:titleTextColor="@color/colorPrimaryDark">

                <!--<TextView
               android:layout_width="wrap_content"
               android:layout_height="?actionBarSize"
               android:gravity="center"
               android:text="标题"/>-->
            </androidx.appcompat.widget.Toolbar>
        </com.google.android.material.appbar.CollapsingToolbarLayout>


        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="悬停布局" />

    </com.google.android.material.appbar.AppBarLayout>