两种常见的沉浸式状态栏(透明系统状态栏)全解析

在我们的日常开发中,会经常遇到应用首页的顶部是个Banner(轮播图),好多Banner还延伸到我们的状态栏里面去了,既显得风格一致又显得简洁美观。第二种是顶部系统状态栏和App的导航栏一体化,不给用户突兀的感觉,使用户把更多的视角留在我们的App上。两种风格如下:

两种常见的沉浸式状态栏(透明系统状态栏)全解析_第1张图片两种常见的沉浸式状态栏(透明系统状态栏)全解析_第2张图片

上面两张图分别对应上文中提到的两种情况,第一个是简书,第二个是美团。因为我手头的安卓测试机里应用比较少,所以直接拿水果手机截图了,界面实际上是差不多的,各位道友见谅见谅。


对于这两种情况,仅适用于我们的手机版本>=4.4,而我所提供的做法,也木有做向下兼容。下面我们分别实现这两种情况。

第一种:类似简书实现顶部布局延伸至系统状态栏

方法一:通过styles设置

1.我们的做法是通过在values/styles中设置我们需要的theme,并在我们的Activity中添加这种theme,但是由于这种特性仅支持4.4以上版本,所以我们不能在values中直接设置,还需要在我们的res目录下添加values-v19和values-v21,为什么要加values-v21呢,因为在5.x开始,需要把statusbar的颜色设置为透明,否则会默认出现半透明的浅灰色。

2.在values,values-v19,values-v21的styles中都设置一个透明的theme

values/styles(无论我们在哪个SDK版本下设置了主题,都要在最基本的values中设置相同名称的主题,即使我们什么都不做,这样才能保证App能正常运行在各种版本的设备中不报错)

注意:

true
true
分别指明statusbar和naviagtionbar是否需要透明

values-v19/styles


    
values-v21/styles


3.在AndroidManifest.xml中对指定的Activity设置相应的theme
 


4.这时候我们运行下我们的App,会发现顶部有个突兀的ActionBar盖在我们的图片上面,下面我们把这个ActionBar去掉,去掉的方式有两种:

(1)、在我们的设置theme的时候选择NoActionBar选项。

(2)、通过代码设置无ActionBar。我贴上这种方式的代码。

	super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);//继承AppCompatActivity使用
//        requestWindowFeature(Window.FEATURE_NO_TITLE);//继承Activity使用
        setContentView(R.layout.activity_image);
如果发现没有效果,仔细检查是不是写在setContentView之后了,要写在setContentView之前!要写在setContentView之前!要写在setContentView之前!

这样就达到我们的最终效果了。
两种常见的沉浸式状态栏(透明系统状态栏)全解析_第3张图片

其实我们也可以在代码中处理:4.4以上5.0以下版本

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                Window window = getWindow();
                window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
                        WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
5.0以上版本状态栏会有透明的灰色,处理方式:

if(VERSION.SDK_INT >= VERSION_CODES.LOLLIPOP) {  
            Window window = 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  //该参数指布局能延伸到navigationbar,我们场景中不应加这个参数
                            | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);  
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);  
            window.setStatusBarColor(Color.TRANSPARENT);  
            window.setNavigationBarColor(Color.TRANSPARENT); //设置navigationbar颜色为透明 
}  
这样就好了, 如果发现没有效果,仔细检查是不是写在setContentView之后了,要写在 setContentView之前!要写在setContentView之前!要写在setContentView之前!

有人说需要在跟布局加上fitsSystemWindows=“true”,但是,加上后,就是这种效果了。

两种常见的沉浸式状态栏(透明系统状态栏)全解析_第4张图片
所以还是不加了,fitsSystemWindows的作用,下面会说。

那么第一种应用场景我就介绍完了,下面说一说第二种场景。

第二种场景就简单很多了,只是把状态栏颜色和App的导航栏颜色一样就好了。
1.在values,values-v19,values-v21的styles中都设置一个与App顶部导航栏颜色相同的theme

values/styles

values-v19/styles


    

values-v21/styles

2.在AndroidManifest.xml中设置相应Activity的theme。

3.和上面一样去掉ActionBar。(NoTitleBar)

然后得到效果

两种常见的沉浸式状态栏(透明系统状态栏)全解析_第5张图片

4.卧槽,怎么跑上面去了,好丑!在跟布局设置android:fitsSystemWindows=“true”,就可以了;

两种常见的沉浸式状态栏(透明系统状态栏)全解析_第6张图片

行啦,现在就大功告成了。最后,我们再说一说fitSystemWindows的应用。

所谓System windows指的就是屏幕上status bar 、 navigation bar等系统控件所占据的部分。而android:fitsSystemWindows="true"就是通过设置View的padding,使得应用的content部分(Activity中setContentView()中传入的content)不会与system window重叠。

所以说,我们的第一种场景,需要content 和 status bar重叠,自然就不能传入true。而第二种场景,需要content与status bar不重叠,也就需要设置fitSystemwindows为true。

 


如果有疏忽的地方,希望大家指正。

你可能感兴趣的:(Android点点滴滴)