安卓沉浸式式效果研究（二）：可折叠式标题栏和虚拟按键

Material Design有个效果是可折叠式的标题栏，效果是查看内容下滑时标题栏折叠起来。
刚好项目中有这么一个需求，查一下资料看一下文档，这个效果是怎么实现的吧。

一：思路

使用的是CoordinatorLayout和AppbarLayout两者结合，然后下面实现滚动布局(RecyclerView, NestedScrollView等)
结合起来可以实现折叠式标题栏的沉浸效果。

二：CoordinatorLayout

CoordinatorLayout遵循Material 风格，包含在 support Library中：

  • 作为最上层的View
  • 作为一个 容器与一个或者多个子View进行交互
  • CoordinatorLayout继承自viewgroup,但是使用类似于framLayout,有层次结构,后面的布局会覆盖在前面的布局之上,但跟app:layout_behavior属性也有很大关系,只有CoordinatorLayout的直接子布局才能响应。
  • CoordinatorLayout和AppbarLayout结合才能产生这样的效果，如果AppbarLayout不在CoordinatorLayout之中，AppbarLayout的滑动flag是不生效的。
  • app:layout_behavior = "@string/appbar_scrolling_view_behavior"滚动布局一定需要这一行代码。
android.support.design.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">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/AppTheme"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll"
            app:title="Title">

        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

嵌套大致如上。

三：AppBarLayout

AppBarLayout.PNG
  • AppBarLayout:继承自LineLayout,使用时其他属性随LineLayou,已经响应了CoordinatorLayout的layout_behavior属性。
  • AppBarLayout的直接子控件可以设置的属性:layout_scrollFlags

  • This view depends heavily on being used as a direct child within a CoordinatorLayout. If you use AppBarLayout within a different ViewGroup, most of it's functionality will not work.（表面AppBarLayout要和CoordinatorLayout结合）


    Flag.PNG

文档给出的flag如图，可与CoordinatorLayout结合使用。
SCROLL_FLAG_ENTER_ALWAYS：
W((entering) / (scrolling on screen))下拉的时候，这个View也会跟着滑出。

SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED：
另一种enterAlways，但是只显示折叠后的高度。

SCROLL_FLAG_EXIT_UNTIL_COLLAPSED：
((exiting) / (scrolling off screen))上拉的时候，这个View会跟着滑动直到折叠。

SCROLL_FLAG_SCROLL ：
当前View将会响应Scroll事件

SCROLL_FLAG_SNAP ：
在Scroll滑动事件结束以前 ，如果这个View部分可见，那么这个View会停在最接近当前View的位置

我们可以通过setScrollFlags(int)方法或者直接设定app:layout_scrollFlags=""来设定flag。

四：实现

首先我们取消掉系统自带的ActionBar：

android:theme="@style/Theme.AppCompat.Light.NoActionBar"

然后自己使用Toolbar建立一个：

<android.support.v7.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/AppTheme"
            android:background="?attr/colorPrimary"
            app:title="Title">

在Activity中初始化

toolbar = findViewById(R.id.toolBar);
setSupportActionBar(toolbar);

这一步主要是如果你在activity中为actionbar添加了menu实现。
到这一步，我们稍微看一下界面现在是什么样子的。


first

看起来是不是没有啥，别急，别忘了我们还有滚动布局没有实现呢。
我们实现一下NestedScrollView（实际上直接嵌套就行了）。


1.gif

这个是scroll的flag的效果，我们每个flag都实现一下试试。

1.scroll

ChildView 伴随着View的滚动事件而滚出或滚进屏幕:
使用这个要注意两点：

  • 如果使用了其他值，必定要使用这个值才能起作用；
  • 如果在这个childView前面的任何其他ChildView没有设置这个值， 那么这个ChildView的设置将失去作用。

使用说明：
-当NestedScrollView将要向下滑动的时候， 优先将AppBarLayout的childView滚出屏幕，然后ScrollView才开始滑动；

  • 当NestedScrollView将要向上滑动的时候，优先动的是自己，当自己动到顶部头的时候，再开始触发AppBarLayoout中的childView滑动出来；

2.scroll | enterAlways

使用enterAlways，必须要带上scroll,其他亦然。
使用说明：

  • 当NestedScrollView将要向下滑动的时候， 优先将AppBarLayout的childView滑动出屏幕，然后NestedScrollView才开始滑动；

  • 当NestedScrollView将要向上滑动的时候，与单纯的scroll不同，这里先动的是AppBarLayout中的childView，当childView完全进入屏幕的时候，才开始滑动 ScrollView；
    enterAlways决定的是向下滚动时Scrolling View和ChildView之间的优先级问题。
    看看效果!


    2.gif

这里上滑的时候，childView是先进入的，优先动的是AppBarLayout中的childView。是没有错的。

3.scroll | enterAlways | enterAlwaysCollapsed

enterAlwaysCollapsed 是enterAlways的附加值，如果需要使用的话，必须三者一起使用。
使用说明：

  • 当NestedScrollView将要向下滑动的时候， 优先将AppBarLayout的childView滚出屏幕，然后NestedScrollView才开始滚动；
  • 与前面两个不同的是，向上滑动的时候，优先将childView动到它的最小高度，完成之后Nestedscrollview才开始自身的滚动，当Nestedscrollview滚动完成时，这个时候childView才会将自己高度完全滚动进入屏幕；

这里涉及到的是childView的最小高度值，需要设置一下Toolbar才能看出效果。
设置完毕如图。


4.PNG

这里设定之后我们看看效果


3.gif

使用上面三种组合，当NestedScrollView要向下滑动的时候没有任何区别；区别只是在于scrollview要向上滑动的时候

4.scroll | exitUntilCollapsed

使用说明：

  • 当NestedScrollview将要向下滑动的时候，优先将AppBarLayout中的childView滚动至最小高度，然后scrollview才开始滚动。
  • 当NestedScrollView将要向上滑动的时候，优先滚动的是自己，当自己滚动到顶部头的时候，再开始触发滚动AppBarLayoout中的childView；

这里也涉及到的是最小高度，但与第三个不同的是，这里Toolbar始终是会保持出现的。就是说ChildView不会完全退出屏幕。

4.gif

5.scroll | snap

snap可以与上面任何一个组合进行使用，使用它可以确保childView不会滑动停止在中间的状态，当我们松开手指的时候，要么完全显示，要么完全隐藏。
snap简单理解，就是Child View滚动比例的一个吸附效果，也就是说，Child View不会存在局部显示。
效果如图


5.gif

五：CollapsingToolbarLayout

接下来我们需要实现的是自己需要的效果，这里就需要引入CollapsingToolbarLayout了。

CollapsingToolbarLayout是用来对Toolbar进行再次包装的ViewGroup，主要是用于实现折叠（其实就是看起来像伸缩~）的App Bar效果。它需要放在AppBarLayout布局里面，并且作为AppBarLayout的直接子View。CollapsingToolbarLayout主要包括几个功能
查看官网文档：


5.PNG

打开谷歌翻译，然后参考自己意译：

折叠标题(Collapsing title):
当布局完全可见时标题更大但是随着布局在屏幕上滚动而折叠并变小。 您可以通过setTitle（CharSequence）设置要显示的标题。 标题外观可以通过collapsedTextAppearance和expandedTextAppearance属性进行调整。

内容纱布（Content scrim）：
当滚动位置达到某个阈值时，来对View“盖上纱布”。可以通过setContentScrim(Drawable)来设置纱布的图片. 默认colorPrimary是contentScrim的色值

状态栏纱布（Status bar scrim)：
当滚动位置达到某个阈值时，在状态栏后面显示或隐藏布。 您可以通过setStatusBarScrim（Drawable）更改图片。 这仅适用于LOLLIPOP设备。默认colorPrimaryDark是statusBarScrim的色值.

视差滚动子View(Parallax scrolling children):
子视图可以选择在该布局中以视差方式滚动。 请参阅COLLAPSE_MODE_PARALLAX和setParallaxMultiplier（float）。(让这个View的滚动的速度比其他正常滚动的View速度稍微慢一点)

将子View位置固定(Pinned position children)：子View可以选择是否在全局空间上固定位置，这对于Toolbar来说非常有用，因为当布局在移动时，可以将Toolbar固定位置而不受移动的影响。 将app:layout_collapseMode设为pin。

修改xml文件

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp">
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/AppTheme"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolBar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_collapseMode="pin"
                app:title="Title">
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

这里添加CollapsingToolbarLayout在ToolBar布局之上，并且AppBarLayout的flag一定是在子布局中，所以移动到CollapsingToolbarLayout。Toolbar设置app:layout_collapseMode="pin"。将子View位置固定(Pinned position children)

看看效果


6.gif

既然是CollapsingToolbarLayout是Layout，那就表示可以添加其他控件啦，我们设定一个背景图片，将ToolBar的background去除，然后再layout下添加一个imageview。
这时候效果如图



ok，好像还是不太对劲，这个标题栏，我们应该设置透明对吧？
上一篇文章之中就讲了这个内容，还好，我们复用一下吧。
7.PNG

get!但是下面这个导航栏也是有点碍眼，能不能也设置掉呢。这个啊，no problem！
我们透明化它！

View decorView = activity.getWindow().getDecorView();
        int option = View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
decorView.setSystemUiVisibility(option);
getWindow().setNavigationBarColor(Color.TRANSPARENT);

这里设置之后是有一个问题的，如果你使用亮色主题，那么虚拟按键还是透明颜色的，就会导致看不清。如果你背景深色的，那就当我没有说吧。
这里我选取了一个折中的解决办法，将虚拟按键半透明化，这个就需要在

getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        setContentView(R.layout.activity_main);

需要在setContentView之前进行这
行代码，效果如图


7.gif

这里出现一个问题，就是菜单和状态栏过于贴近，不知道你们发现了没有。
这时候需要介绍一个属性，叫做：fitsSystemWindows

六：fitsSystemWindows

根据官方文档，如果某个View 的fitsSystemWindows 设为true，那么该View的padding属性将由系统设置，用户在布局文件中设置的 padding会被忽略。系统会为该View设置一个paddingTop，值为statusbar的高度。fitsSystemWindows默认为false。
使用说明：

  • 一般情况下，一个布局多个view设置多个fitsSystemWindow只有第一个会发生效果

  • 只有在标题栏透明化或界面为全屏显示（View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN)时，此属性才会起作用，不然会由ContentView的父控件处理

第一次接触fitsSystemWindows是在CoordinatorLayout控件。发现有很多诡异的地方。
fitsSystemWindows的表现和官方文档描述的不一样。
有时CoordinatorLayout的子控件也会设置fitsSystemWindows属性，而且子控件的fitsSystemWindows也会有作用。
这些令我很困惑，查了些资料之后找到了原因：设置paddingTop只是fitsSystemWindows属性的默认行为，View可以对fitsSystemWindows进行个性化

总结：CoordinatorLayout对fitsSystemWindows主要做了以下处理。
1.自己绘制statusbar背景。setStatusBarBackground函数可以设置statusbar背景。或者 在布局文件中通过app:statusBarBackground设置。

  1. 如果CoordinatorLayout的子View没有设置fitsSystemWindows，在layout时将子Viwe向下偏移statusbar的高度，用来显示CoordinatorLayout绘制的statusbar。如果子view设置了fitsSystemWindows，子View会覆盖CoordinatorLayout的statusbar。setStatusBarBackground设置的状态栏将被覆盖，不再起作用。具体逻辑可参考CoordinatorLayout的layoutChild 函数。

3.调用dispatchApplyWindowInsets，让子view的behavior或子view接着处理fitsSystemWindows属性。CoordinatorLayout的很多常用的子view如AppBarLayout也对fitsSystemWindows进行了个性化处理。

设置了android:fitsSystemWindows=”true”属性后针对透明的状态栏会自动添加一个值等于状态栏高度的paddingTop；针对透明的系统导航栏会自动添加一个值等于导航栏高度的paddingBottom

那么就在布局中加入这个属性

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <android.support.design.widget.AppBarLayout
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="200dp">
        <android.support.design.widget.CollapsingToolbarLayout
            app:statusBarScrim="@android:color/transparent"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/AppTheme"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:fitsSystemWindows="true"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/draw_bg"
                app:layout_collapseMode="parallax" />
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolBar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:title="Data Analytics">
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>


    <android.support.v4.widget.NestedScrollView
        android:layout_weight="1"
        android:id="@+id/scrollView"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior = "@string/appbar_scrolling_view_behavior">
            <TextView
                android:textSize="20sp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/test_string"/>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

运行，OK，no problem！
8.gif

当然这里又要说底部的事情了，这个虚拟按键会遮挡我们的view，这个有办法吗？并没有...（当然可能是我太菜）
当你设定虚拟按键为透明或者半透明之时，他就会算进所有的屏幕之中，就是说。如果你不将其改变，它就不算在整个屏幕中，如果你改变了他，就会开始计算。除非你固定NestedScrollView的高度，不然不论你使用match_parent或者wrap_content，都会使其占据剩余的屏幕。
再讲讲Toolbar这个。

七.Toolbar

Toolbar的结构:
1.NavigationIcon
2.Logo
3.Title
4.subTitle
5.menu.
这个不说，想简单提一下的是Toolbar的主题显示。
1.app:theme是toolbar的主题
2.app:popupTheme是弹出的menu的主题.
并且这两个的颜色与主题有关：
如果使用的是Dark系列的主题,那么字体就是白色的.menu菜单背景是黑色
如果使用的是Light系列的主题,那么字体和图标就是黑色的.menu菜单背景是白色

<!-- ToolBar样式 .-->
   <style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Light">
        <!--修改toolbar的Title颜色.正确-->
       <item name="android:textColorPrimary">@android:color/holo_red_dark</item>
       <!--错误,网上有些资料是这样的,然而这样写编译都会报错-->
       <item name="textColorPrimary">@android:color/holo_red_dark</item>
       <!--修改toolbar的subtitle(小标题)颜色.正确-->
       <item name="subtitleTextColor">@android:color/holo_red_dark</item>
        <!-修改Toolbar的menu折叠图标和NavigationIcon的颜色1-->
        <!-正确,这个要求Api大于21-->
        <item name="android:colorControlNormal">@android:color/holo_red_dark</item>
        <!--这个也正确,用这个吧-->
        <item name="colorControlNormal">@android:color/holo_red_dark</item>

   </style>

<!-- ToolBar菜单样式.-->
    <style name="popup_theme" parent="@style/ThemeOverlay.AppCompat.Light">
      <!--设置背景-->
       <item name="android:background">@android:color/white</item>
       <!--设置字体颜色-->
      <item name="android:textColor">@android:color/holo_red_dark</item>
    </style>

如果这个下拉框遮盖Toolbar可以直接在app:popupTheme的style里面设置overlapAnchor这个属性.

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,530评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 86,403评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,120评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,770评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,758评论 5赞 367
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,649评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,021评论 3赞 398
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,675评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,931评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,410评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,004评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2赞 343

推荐阅读更多精彩内容