最近项目中用到透明的状态栏和自定义的透明的ActionBar,类似的效果如下:
从效果图上可以看出要满足一下几点要求:
1、背景是一张图片;
2、背景图顶到了状态栏的下面;
3、状态栏的背景要变成透明的,底部的背景图才能显示出来;
4、ActionBar的背景也要变成透明的,底部的背景图才能显示出来;
基于以上几点,我一阵百度,总结和学习别人的经验来满足自己的需求。这里需要说明一下,我是在高版本(Android 8.1)上验证的,因为没有低版本的手机,另外模拟器与各商家的低版本手机在视效上是存在差异的,因此本方式仅提供在高版本的参考,不全之处,敬请见谅。
言归正传,下面逐一介绍上面的实现方式:
1、背景是一张图就不用说了(说了估计会早吐槽,哈哈)。
2、要想让背景图顶到状态栏的位置,我们只需设置全屏模式即可,参考方式如下:
int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
View decorView = getWindow().getDecorView();
decorView.setSystemUiVisibility(option);
3、 接下来就该设置状态栏透明的背景了,参考方式如下:
getWindow().setStatusBarColor(Color.TRANSPARENT);
此时,状态栏的背景就变成透明的了,底部的图片就显示出来了。从上图的视效中可以看出,状态栏默认的字体和图标都是白色的,我们可以改变为系统支持的其他的颜色,只需简单修改一下第二步即可,参考方式如下:
int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR;
View decorView = getWindow().getDecorView();
decorView.setSystemUiVisibility(option);
从View.java中查看到,似乎目前也只能改为View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR了。当然,不同手机厂商可能还有其他的适配方式,这里不再深究。
4、为满足项目需求,我的Activity继承的是AppCompatActivity,大多时候,系统的ActionBar并不能满足项目的需求,因此,我也自定义了ActionBar,名称定义为custom_action_bar.xml,为了把背景变为透明的,需在该.xml文件的根布局中设置android:background="@android:color/transparent"。自定义了ActionBar在代码中的参考适配方式如下:
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
actionBar.setCustomView(R.layout.custom_action_bar);
到此并没有结束,可能还存在两个问题:
1、布局向上偏移,并没有在ActionBar的下面;
2、ActionBar设置的透明背景可能无效(不同项目,由于配置不同,此问题的表现可能不同):
针对第一个问题,布局文件中需要用到android:fitsSystemWindows属性,当它的值为true时,表示布局的内容下沉某个高度(AppCompatActivity下沉的是状态栏高度+ActionBar高度,而Activity下沉仅下沉一个状态栏的高度)。大多时候,只需在.xml的根布局位置增加android:fitsSystemWindows="true"即可,但也有时候需要设置在子布局中,因此不要一味的记住是根布局,这与我们要下沉的布局有关。
针对第二个问题,可能是因为我们设置了默认的主题色,例如,AS默认可能设置了这几个颜色值:
<color name="colorPrimary">#008577</color>
<color name="colorPrimaryDark">#00574B</color>
<color name="colorAccent">#D81B60</color>
同时,我们的App默认设置了主题,android:theme="@style/AppTheme",该主题的配置如下:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
我们图中看到的ActionBar的颜色就是<item name="colorPrimary">@color/colorPrimary</item>配置的,因此我们只需把colorPrimary的值也改为透明的即可:
<color name="colorPrimary">@android:color/transparent</color>
到此,我们的需求要点基本都满足了。ActionBar