Toolbar—–实现悬浮栏的效果

本篇文章，接着 Toolbar的详细介绍和自定义Toolbar 文章而写。如果你对 Toolbar 的使用还太了解或只是简单的了解。那么你可以移步这里 Toolbar的详细介绍和自定义Toolbar。

书接上文，我们了解了Toolbar的基本属性和基本使用。以及与AppBarLayout结合的使用，与CollapsingToolbarLayout结合的使用。那么我们引申拓展一下。仿照目前一些主流的app，实现一下悬浮栏的效果!

（1）效果图：
这里写图片描述

xml的布局：

<?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:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="270dp"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="230dp"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll">
            <!--exitUntilCollapsed-->
            <ImageView
                android:id="@+id/image"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/caipin"
                app:layout_collapseMode="pin" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="45dp"
                app:layout_collapseMode="pin"
                app:navigationIcon="@drawable/ic_arrow_back_white_24dp"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                app:title="详情" />

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

        <!--需要悬停的控件-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="#ffffff"
            android:orientation="horizontal">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_weight="1"
                android:text="¥ 99.8"
                android:textColor="#f00" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#eda62c"
                android:text="立即预定"
                android:textColor="#fff" />

        </LinearLayout>


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

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/text_margin"
            android:text="@string/large_text" />

    </android.support.v4.widget.NestedScrollView>


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

    
    
     
     1
     
     2
     
     3
     
     4
     
     5
     
     6
     
     7
     
     8
     
     9
     
     10
     
     11
     
     12
     
     13
     
     14
     
     15
     
     16
     
     17
     
     18
     
     19
     
     20
     
     21
     
     22
     
     23
     
     24
     
     25
     
     26
     
     27
     
     28
     
     29
     
     30
     
     31
     
     32
     
     33
     
     34
     
     35
     
     36
     
     37
     
     38
     
     39
     
     40
     
     41
     
     42
     
     43
     
     44
     
     45
     
     46
     
     47
     
     48
     
     49
     
     50
     
     51
     
     52
     
     53
     
     54
     
     55
     
     56
     
     57
     
     58
     
     59
     
     60
     
     61
     
     62
     
     63
     
     64
     
     65
     
     66
     
     67
     
     68
     
     69
     
     70
     
     71
     
     72
     
     73
     
     74
     
     75
     
     76
     
     77
     
     78
     
     79
     
     80
     
     81
     
     82
     
     83

注意事项：

1：要想实现状态栏的透明效果，处理在对应java代码中添加如下代码外：

//透明状态栏效果
        if (Build.VERSION.SDK_INT >= 21) {
            View decorView = getWindow().getDecorView();
            int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
            decorView.setSystemUiVisibility(option);
            getWindow().setStatusBarColor(Color.TRANSPARENT);

        }
    
    
     
     1
     
     2
     
     3
     
     4
     
     5
     
     6
     
     7
     
     8

还要将 ImageView 控件的 app:layout_collapseMode 的参数设置为 pin 。这个也已经在上篇博客中已经讲过了。

2：如果你还想再最外层嵌套一层，下拉刷新的布局，实现下拉刷新的操作。推荐你使用该库：SmartRefreshLayout 。你可能试了官方提供的 SwipeRefreshLayout ，但是此时你的滑动就会出问题！原因是：SwipeRefreshLayout 不支持和ListView的无缝同步滚动和 CoordinatorLayout 的嵌套滚动。而：SmartRefreshLayout 是支持的。

（2）如果你举一反三的话：还可以实现下面的效果
这里写图片描述

至于是怎么实现的呢？我想聪明的你，肯定能猜的差不多！大概思路时，tablayout+viewPager。android.support.v4.widget.NestedScrollView 嵌套的不再是（1）图中的文本了，而是ViewPager。注意：这里的viewPager不需要做任何的处理。只需要给 NestedScrollView 增加这个属性即可：android:fillViewport=”true” 。viewPager中嵌套的recyclerView就能正常展示了。

震惊！三步实现Android悬浮效果？（比较简单，挺实用）

通过其他方式实现悬浮：

仿美团详情滑动界面，并兼容NestedScroll嵌套（这个修改了 NestedScroll 源码部分，不是很多很推荐这样做。）

android滑动固定顶部栏效果源码（不是很理想，不过也是一种思路，而且其并没有实现展示的效果图的样式）

参考博客：

Android Bottom Sheet详解

        <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/markdown_views-ea0013b516.css">
            </div>