Android沉浸式之一步到位(fragment 的坑之解法)

来源:互联网 发布:蓝牙单片机 编辑:程序博客网 时间:2024/06/05 01:02

前言:Android沉浸式已经出来了很长时间了,之前呢公司没有该方面的需要,所以除了自己的看各种文章进行了了解就也没有在项目中使用,但是前段时间产品有了沉浸式的效果的需要,我就在巨大的坑里煎熬了好几天才爬了出来,所以趁着有时间赶紧整理一下,给路过的人瞧一瞧 ,看一看,见坑还是绕过走最舒服。

友情提示:该文章是按照我的项目的沉浸式的做法写出来的,只考虑5.0以上的版本,4.x的版本没有使用。已经写过沉浸式的大神可以绕路了,没做过沉浸式的猿人们可以上车了。。


先来点题外话:我对沉浸式效果的理解

      隐藏status bar(状态栏)使屏幕全屏,让Activity接收所有的(整个屏幕的)触摸事件。

      透明化系统状态栏,使得布局侵入系统栏的后面。

      效果一句话说就是app全屏化,同时状态栏也需要显示出来。


好了,废话不多说了,下面开始看看我的沉浸式的实现过程吧,抓紧时间上车了


1.状态栏颜色的设置,一般的项目需求是状态栏的颜色显示成自己想要的,比如和标题栏的颜色保持一致


用application的theme主题来设置整个app的状态栏的颜色

请游客注意:主题设置是基于没有系统的actionbar


在values文件夹下

<!-- Base application theme. --><style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">    <!-- Customize your theme here. --></style><style name="AppTheme.NoActionBar" parent="AppTheme">    <item name="windowActionBar">false</item>    <item name="windowNoTitle">true</item>    <item name="android:windowIsTranslucent">true</item></style>
<!-- Customize your theme here. -->
<style name="ZhikeAppTheme" parent="AppTheme.NoActionBar"> <item name="android:windowBackground">#FFFFFF</item></style>

在values-v21文件夹下

<!-- Base application theme. --><style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">    <!-- Customize your theme here. --></style><style name="AppTheme.NoActionBar" parent="AppTheme">    <item name="windowActionBar">false</item>    <item name="windowNoTitle">true</item>    <item name="android:windowIsTranslucent">true</item></style>
<!-- Customize your theme here. -->
<style name="ZhikeAppTheme" parent="AppTheme.NoActionBar"> <!--各种背景颜色 --> <item name="colorPrimary">@color/color_primary</item> <item name="colorPrimaryDark">@color/color_primary</item> <item name="colorAccent">@color/color_primary</item> <!--页面背景--> <item name="android:windowBackground">@color/color_f7f8fa</item></style>


大家想必也看懂了,就是通过设置5.0以上的和一下的不同的主题,来设置状态栏的颜色,从而实现整个项目的状态栏的颜色的设置。


针对里面的设置的附加提示:

<item name="android:windowIsTranslucent">true</item>

此属性是为了解决app启动的时间过长的白屏或者黑屏页面等待的问题,让app的页面处于透明

<item name="colorPrimaryDark">@color/color_primary</item>
此属性正是设置状态栏的颜色的属性


其余属性请看下面图片的清晰表示:



代码为虚,效果为实,下面给大家贴上我的项目的颜色设置的效果图:




2.图片沉浸式效果的实现(这是这篇博客的重点 重点 重点


在项目中,有些页面背景或者顶部有一张图片是背景,产品会需要将图片延伸到状态栏的下面给显示,也就是有点全屏的效果,只不过状态栏也是可以看到的

这时就是需要在该页面activity里面配置代码设置了,请看下面代码

(关于沉浸式到底部虚拟导航栏的代码给注释了,我们的项目不需要沉浸式到虚拟导航栏,如果需要可以查看别的文章)

    public static void setImgTransparent(Activity activity){        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {            Window window = activity.getWindow();            window.clearFlags(                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS                    | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);            window.getDecorView().setSystemUiVisibility(                    View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN//                    | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION  //不隐藏和透明虚拟导航栏  因为会遮盖底部的布局                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE//保持布局状态            );            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);            window.setStatusBarColor(Color.TRANSPARENT);//            window.setNavigationBarColor(Color.TRANSPARENT);//不隐藏和透明虚拟导航栏  因为会遮盖底部的布局        }    }


在需要图片沉浸式的activity里面加了这个设置,图片沉浸的效果就可以有了:

友情提示:该设置代码无需在setContentView() 之前执行,任何地方都是可以的,对滴,任何地方都是可以的!!




现在可以看到了,上面这个效果头像就是在状态栏里面了,但是标题栏却可以根据要求一直在状态栏下面,不被遮盖,是为什么呢,请看下面的设置

如果需要顶部的布局不被状态栏遮盖,方法有很多,我这给出我的做法


先上代码:下面属性是给顶部的标题栏或者其他需要的布局设置的

android:layout_height="@dimen/title_height"android:paddingTop="@dimen/status_bar_height"

dimens  

<dimen name="title_height">44dp</dimen>
<dimen name="status_bar_height">0dp</dimen>

v21/dimens 

<dimen name="title_height">60dp</dimen>
<dimen name="status_bar_height">16dp</dimen>

大家想必瞬间就明白了,是通过不同版本的布局的高度和距顶的高度的改变从而使得在沉浸式效果的时候给状态栏预留了高度,

    就是这么简单,so easy


  沉浸式就这么的一步到位了,哪里需要就配置哪里!!


但是,但是,但是,游客们注意了,注意了,我的苦逼的心酸就是下面的这个大坑给造成的

下面就是我要介绍的一个让我苦逼了好几天的大坑了,心酸的经历不堪回首。。。


有些页面activity里面需要嵌套切换不同的fragment,然后这些fragment需要有各自不同的沉浸式效果,

比如有些是图片需要沉浸到状态栏,有些是显示和标题栏一样的颜色 等等


这时候千万不要再fragment里面用这个设置

android:fitsSystemWindows="true"


在图片沉浸式效果里,有些人解决顶部布局被状态栏遮盖问题会用这个属性来解决,

该属性在单独的页面是没有问题的,完全可以使顶部布局不被遮盖

但是在有fragment的activity里面不要在fragment跟布局配置这个属性,因为在输入键盘的弹出,底部虚拟导航的显示和隐藏等一些情况都会引起界面的绘制,

这时该属性会使得页面的沉浸式失效(因为该属性的效果使得系统自动预留了状态栏的高度,如果需要请自行查看相关文档)

所以最好的解决方法是每个fragment都对顶部的布局做高度和距顶的动态设定


同时给出使用fitsSystemWindows属性的一些弊端:

例如我们想设置状态栏为蓝色,只能通过设置最外层布局的背景为蓝色来实现,然而一旦设置后,整个布局就都变成了蓝色,只能在下方的布局内容里另外再设置白色背景,而这样就存在过度绘制了。
而且设置了 fitsSystemWindows=true 属性的页面,在点击 EditText 调出 软键盘时,整个视图都会被顶上去

到此为止,按照这个流程做了的你,就会发现沉浸式就是这么简单,这么容易实现,

沉浸式篇到此结束,see  you