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">
嵌套大致如上。
三:AppBarLayout
- 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如图,可与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建立一个:
在Activity中初始化
toolbar = findViewById(R.id.toolBar);
setSupportActionBar(toolbar);
这一步主要是如果你在activity中为actionbar添加了menu实现。
到这一步,我们稍微看一下界面现在是什么样子的。
看起来是不是没有啥,别急,别忘了我们还有滚动布局没有实现呢。
我们实现一下NestedScrollView(实际上直接嵌套就行了)。
这个是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之间的优先级问题。
看看效果!
这里上滑的时候,childView是先进入的,优先动的是AppBarLayout中的childView。是没有错的。
3.scroll | enterAlways | enterAlwaysCollapsed
enterAlwaysCollapsed 是enterAlways的附加值,如果需要使用的话,必须三者一起使用。
使用说明:
- 当NestedScrollView将要向下滑动的时候, 优先将AppBarLayout的childView滚出屏幕,然后NestedScrollView才开始滚动;
- 与前面两个不同的是,向上滑动的时候,优先将childView动到它的最小高度,完成之后Nestedscrollview才开始自身的滚动,当Nestedscrollview滚动完成时,这个时候childView才会将自己高度完全滚动进入屏幕;
这里涉及到的是childView的最小高度值,需要设置一下Toolbar才能看出效果。
设置完毕如图。
这里设定之后我们看看效果
使用上面三种组合,当NestedScrollView要向下滑动的时候没有任何区别;区别只是在于scrollview要向上滑动的时候
4.scroll | exitUntilCollapsed
使用说明:
- 当NestedScrollview将要向下滑动的时候,优先将AppBarLayout中的childView滚动至最小高度,然后scrollview才开始滚动。
- 当NestedScrollView将要向上滑动的时候,优先滚动的是自己,当自己滚动到顶部头的时候,再开始触发滚动AppBarLayoout中的childView;
这里也涉及到的是最小高度,但与第三个不同的是,这里Toolbar始终是会保持出现的。就是说ChildView不会完全退出屏幕。
5.scroll | snap
snap可以与上面任何一个组合进行使用,使用它可以确保childView不会滑动停止在中间的状态,当我们松开手指的时候,要么完全显示,要么完全隐藏。
snap简单理解,就是Child View滚动比例的一个吸附效果,也就是说,Child View不会存在局部显示。
效果如图
五:CollapsingToolbarLayout
接下来我们需要实现的是自己需要的效果,这里就需要引入CollapsingToolbarLayout了。
CollapsingToolbarLayout是用来对Toolbar进行再次包装的ViewGroup,主要是用于实现折叠(其实就是看起来像伸缩~)的App Bar效果。它需要放在AppBarLayout布局里面,并且作为AppBarLayout的直接子View。CollapsingToolbarLayout主要包括几个功能
查看官网文档:
打开谷歌翻译,然后参考自己意译:
折叠标题(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文件
这里添加CollapsingToolbarLayout在ToolBar布局之上,并且AppBarLayout的flag一定是在子布局中,所以移动到CollapsingToolbarLayout。Toolbar设置app:layout_collapseMode="pin"。将子View位置固定(Pinned position children)
看看效果
既然是CollapsingToolbarLayout是Layout,那就表示可以添加其他控件啦,我们设定一个背景图片,将ToolBar的background去除,然后再layout下添加一个imageview。
这时候效果如图
ok,好像还是不太对劲,这个标题栏,我们应该设置透明对吧?
上一篇文章之中就讲了这个内容,还好,我们复用一下吧。
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之前进行这
行代码,效果如图
这里出现一个问题,就是菜单和状态栏过于贴近,不知道你们发现了没有。
这时候需要介绍一个属性,叫做: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设置。
- 如果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
那么就在布局中加入这个属性
运行,OK,no problem!
当然这里又要说底部的事情了,这个虚拟按键会遮挡我们的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可以直接在app:popupTheme的style里面设置overlapAnchor这个属性.