Android|Android Fragment沉浸式轮播图

所谓的沉浸式轮播图,指的是轮播图位于状态栏后面,这是最近比较流行的一种设计方式,在电商客户端上面用的比较多。比如下面的京东Android客户端首页:

Android|Android Fragment沉浸式轮播图
文章图片
京东首页 Android 从Android4.4开始支持一种半透明的状态栏,提供了一个属性android:windowTranslucentStatus。只要在value/styles.xml里面按照下面配置,就可以实现:

true

【Android|Android Fragment沉浸式轮播图】它在让状态栏半透明的同时,也会将布局内容往上拉至状态栏后面。
Activity页面沉浸方案 若是用在Activity页面上有两种方法实现沉浸式轮播图:
  1. 准备两个Theme,让需要状态栏沉浸的用上含有android:windowTranslucentStatus属性的theme
  2. 在onCreate的setContentView之前动态调用
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

Fragment页面沉浸方案 将Fragment所在的Activity的theme按照上面的方法配置即可,效果如下:

Android|Android Fragment沉浸式轮播图
文章图片
效果图
主页确实做到了沉浸式轮播图,但是其他的Fragment的内容也被往上拉到了状态栏后面。
对于上面出现的问题有两种解决办法:
  1. 在切换fragment的时候重新创建Activity,从而调用不同的Theme在首页达到沉浸轮播图的效果,其他的Fragment调用正常的Theme,但是这样频繁销毁、重建Activity会造成额外的性能损耗,而且页面切换也会比较慢,这种方案并不推荐。
  2. 在不需要沉浸状态栏的Fragment页面放一个View,View的高度和状态栏的高度一致,这样被拉到状态栏后面的布局就是我们的放置的View,真正的内容就不会被往上拉了。
我们具体说下方案2,主要是解决不需要沉浸状态栏的Fragment页面内容会往上拉的问题,
不需要沉浸状态栏的Fragment 布局如下:

values/dimens.xml里的状态栏高度:
25dp

看下效果图:

Android|Android Fragment沉浸式轮播图
文章图片
效果图 如果项目最低适配到 android 4.4那么到这里已经结束了。
但是如果要适配到Android 4.4以下,会因为系统不支持android:windowTranslucentStatus属性,导致整体布局是不会往上拉,这时候我们设置的View,就会把真正的内容挤下去,这样也是不符合要求的,解决办法就是再创建一个文件夹values-v19,
values-v19/dimens.xml里的内容如下:
25dp

原来的values/dimens.xml里的内容改为:
0dp

根据资源文件加载规则,在Android 4.4以下的手机上,会加载values/dimens.xml文件下的尺寸,这时候高度为0,就不会把真正的内容挤下去,在Android 4.4及更高版本的手机上会加载values-v19/dimens.xml文件下的尺寸,这样,真正的内容就不会被往上拉,问题完美解决。
参考:
  • StatusBarUtil

    推荐阅读