Android沉浸式状态栏(透明状态栏)最佳实现

Android沉浸式状态栏(透明状态栏)最佳实现

2023年7月15日发(作者:)

Android沉浸式状态栏(透明状态栏)最佳实现Android沉浸式状态栏(透明状态栏)最佳实现

在Android4.4之前,我们的应⽤没法改变⼿机的状态栏颜⾊,当我们打开应⽤时,会出现上图中左侧的画⾯,在屏幕的顶部有⼀条⿊⾊的状态栏,和应⽤的风格⾮常不协调;为了提供更好的界⾯交互,google在Android4.4以后提供了设置沉浸式状态栏的⽅法,对于沉浸式状态栏这个名字存在争议,我们不做讨论,实际的效果其实就是透明的状态栏,然后在状态栏的位置显⽰我们⾃定义的颜⾊,通常为应⽤的actionbar的颜⾊,或者是将应⽤的整体的⼀张图⽚也占据到状态栏中,如下图所⽰:

由于这种透明的状态栏是在Android4.4以后才出现的,所以我们需要为4.4以上的版本做适配,⽅法有两种,⼀种是在资源⽂件(style)中设置,⼀个是在代码中设置。在资源⽂件中设置透明状态栏⾸先,我们先在values下的style中加⼊如下代码: 然后运⾏程序,效果如图所⽰:

图⽚中我们发现,虽然我们实现了透明的状态栏,但是上边的⽂字和状态栏的信息重叠了。为了修复这个问题,我们应该在布局⽂件的根布局中加⼊android:fitsSystemWindows=”true” 就可以了,加⼊后效果如下:

应⽤的⽂字和系统显⽰的⽂字错开了,这也是我们最终的显⽰效果需要注意的⼏点:1. 为Android4.4+适配的同时,不要忘了在values的中加⼊同名的⾃定义style,不然4.4以下会报错2. 不要忘记在布局⽂件中加⼊ android:fitsSystemWindows=”true”,不然布局内容会和状态栏内容重叠3. 在Android5.0中,透明标题的效果和4.4中有所不同,但是实现⽅法相同,我们可以不必为5.0+单独适配,同时5.0+的版本提供了新的API android:statusBarColor,可以⽤来单独设置状态栏的颜⾊,但是这种⽅法不适⽤于我们例⼦中的图⽚占据状态栏,它适⽤于纯⾊的状态栏,并且它应该放到value-v21⽂件夹中上边的例⼦中,我们只设置了⼀个图⽚,使其占据了状态栏。但是我们平常见到更多的可能不是这种,⽽且带actionbar的情况,如下所⽰:

在上图中,存在⼀个actionbar,然后状态栏的颜⾊与其相同,接下来我们来实现这种效果。style⽂件不⽤改变,我们需要在布局⽂件中加⼊⼀个toolbar,代码如下: 然后在activity中 Toolbar toolbar = (Toolbar) findViewById(r); setSupportActionBar(toolbar);在⼀个LinearLayout中包含了⼀个toolbar,和第⼀个例⼦相⽐,我们把android:fitsSystemWindows=”true”加在了Toolbar上边,⽽不是LinearLayout中,如果把android:fitsSystemWindows=”true”放到LinearLayout中,会出现下边的效果:

虽然状态栏透明了,但是颜⾊却和根布局的颜⾊相同⽽不是toolbar,这样显然不⾏,如果我们把android:fitsSystemWindows=”true”放到toolbar中就可以实现我们的效果,如下图所⽰: 在这⾥,我们还需要特别注意⼀个地⽅,那就是在设置toolbar⾼度的时候,应该设置成wrap_content,不然也没法实现我们的效果,⽐如我把⾼度固定为50dp,效果如下:

虽然占据了状态栏,但是toolbar的⾼度明显不够了,效果很不好。在Android5.0以后,增加了新的API android:statusBarColor ⽤于设置状态栏的颜⾊,同时以前的windowTranslucentStatus也是对它有效的,所以如果想通过新的API设置状态栏颜⾊的话,⾸先应该将windowTranslucentStatus设置为false,不然是没有效果的。以上就是通过资源⽂件设置透明状态栏的⽅法。代码中设置透明状态栏在代码中设置透明状态栏的⽅法也很简单,思路就是⾸先通过 _TRANSLUCENT_STATUS设置当前window为透明状态栏,这样标题栏就可以占据状态栏了,但是会出现布局中的内容和状态栏的内容重叠的问题,为了解决这个问题,我们应该获得状态栏的⾼度,然后设置标题栏的paddingTop为状态栏的⾼度,这样就可以实现透明效果的标题栏的,代码如下: protected void setImmerseLayout(View view) {// view为标题栏 if (_INT >= N_) { Window window = getWindow(); gs(_TRANSLUCENT_STATUS); int statusBarHeight = getStatusBarHeight(eContext()); ding(0, statusBarHeight, 0, 0); } } public int getStatusBarHeight(Context context) { int result = 0; int resourceId = ources().getIdentifier("status_bar_height", "dimen", "android"); if (resourceId > 0) { result = ources().getDimensionPixelSize(resourceId); } return result; }fitSystemWindows属性:

官⽅描述:

Boolean internal attribute to adjust view layout based on system windows such as the status bar. If true, adjusts the paddingof this view to leave space for the system windows. Will only take effect if this view is in a non-embedded activity.补充:

当为纯⾊actionbar的情况下,我们将toolbar的⾼度设为wrap_content,并且将fitsSystemWindows=“true”参数设置到了toolbar上,这样虽然实现了4.4版本的沉浸效果,但是却不能有效的适配5.0及以上的版本,所以做出以上修改。

在4.4版本上:

1. 我们将根布局的背景颜⾊设置成和toolbar⼀样的,并且设fitsSystemWindows为true。

2. toolbar的fitsSystemWindows属性去掉,并且⾼度设置为?attr/actionBarSize

3. 在toolbar下增加⼀个⼦布局,颜⾊设置为white,这样就可以在4.4及5.0以上实现带actionbar的沉浸式布局2017.12.14更新:

使⽤纯⾊actionbar的时候,可以使⽤容器包裹toolbar,只设置容器 fitsSystemWindows为true。由于fitsSystemWindows属性本质上是给当前控件设置了⼀个padding,所以我们设置到根布局的话,会导致状态栏是透明的,并且和窗⼝背景⼀样,和toolbar背景不同。如果我们设置给toolbar,则会由于padding的存在,导致toolbar的内容下移。所以我们选择使⽤LinearLayout包裹toolbar,并将toolbar的背景等属性设置在appbarlayout上就可以完美实现效果,代码:

发布者:admin,转转请注明出处:http://www.yc00.com/xiaochengxu/1689427663a246471.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信