Android(安卓)Fragment沉浸式轮播图

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

京东首页

Android 从Android4.4开始支持一种半透明的状态栏，提供了一个属性android:windowTranslucentStatus。只要在value/styles.xml里面按照下面配置，就可以实现：

它在让状态栏半透明的同时，也会将布局内容往上拉至状态栏后面。

Activity页面沉浸方案

若是用在Activity页面上有两种方法实现沉浸式轮播图：

准备两个Theme，让需要状态栏沉浸的用上含有android:windowTranslucentStatus属性的theme
在onCreate的setContentView之前动态调用

getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

Fragment页面沉浸方案

将Fragment所在的Activity的theme按照上面的方法配置即可，效果如下：

效果图

主页确实做到了沉浸式轮播图，但是其他的Fragment的内容也被往上拉到了状态栏后面。

对于上面出现的问题有两种解决办法：

在切换fragment的时候重新创建Activity，从而调用不同的Theme在首页达到沉浸轮播图的效果，其他的Fragment调用正常的Theme，但是这样频繁销毁、重建Activity会造成额外的性能损耗，而且页面切换也会比较慢，这种方案并不推荐。
在不需要沉浸状态栏的Fragment页面放一个View，View的高度和状态栏的高度一致，这样被拉到状态栏后面的布局就是我们的放置的View，真正的内容就不会被往上拉了。

我们具体说下方案2，主要是解决不需要沉浸状态栏的Fragment页面内容会往上拉的问题，
不需要沉浸状态栏的Fragment 布局如下：

values/dimens.xml里的状态栏高度：

25dp

看下效果图：

效果图

如果项目最低适配到 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

Activity页面沉浸方案

Fragment页面沉浸方案

更多相关文章

随机推荐