系统栏系列之背景图片侵入系统栏

实现效果

1. 只有4.4系统及之后才具有应用内容背景侵入状态栏效果；

2. 没有ActionBar/Toolbar;

3. 4.4系统手机上，不能实现全透明效果，状态栏带有渐变的灰色半透明色。

4. 5.0系统以上手机，可实现状态栏全透明效果。

Android 4.4 的新特性之半透明系统栏

我们可以利用4.4系统提供的windowTranslucentNavigation和windowTranslucentStatus 两个属性，在自定义的主题中设置为true，实现系统栏的一个半透明的过渡保护色（防止是白色背景侵入到系统栏，使得系统栏显示信息看不清）的显示效果，此时应用的内容布局填冲状态栏和系统栏背后的部分，但是系统栏后面的内容布局是不能响应事件的，比如点击顶部的状态栏时，状态栏后面的控件是不会响应时间，点击底部导航栏相应的是导航栏响应事件。

因此这可以作为一种全屏化背景显示的效果（没有Actionbar/Toolbar）。

实现代码

在res/values-v19/styles.xml加入这两个渐变属性，如果系统最小支持版本小于4.4则需要建立values-v19文件夹做适配，不然会提出出错。在对应的Activity中引入此主题即可。这样就会在4.4以上系统出现此效果。图片是设置在activity的根布局中做背景的。

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
      <item name="android:windowTranslucentStatus">true</item>
      <item name="android:windowTranslucentNavigation">true</item>
    </style>
</resources>

将此主题在清单文件中设置到对应的activity中，4.4系统手机上实现效果如下：

那么在4.4以上的系统，即5.0及之后的系统中是什么效果呢？

可以看到是淡灰色透明的保护色，亲测5.1/6.0系统手机均如此。

不过最好是不要对底部的导航栏做操作，有些手机没有下面一排实体按键，而且会影响与导航栏后面的View与用户的交互。因此我们删除

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

Android5.0 的Material Design中实现5.0及以上的全透明状态栏效果

Android 5.0的Material Design提供了statusBarColor来动态设置状态栏的颜色，因此是否可以在5.0及以上系统手机上实现彻底的透明的状态栏效果呢？我们先在res文件夹下创建用于5.0及以上系统用的values-v21文件夹，并在此目录下新建文件styles.xml，以下操作都在此文件中修改。

1. 第一次尝试：windowTranslucentStatus+statusBarColor

通过statusBarColor设置为透明，强制将状态栏的半透明淡灰保护色给去掉。

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">true</item>
       <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

显示效果如下：

结果然并卵了，没有效果。

2.第二次尝试：只用statusBarColor属性，删除windowTranslucentStatus属性，怎么样？

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
       <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

状态栏一片空白。Pass

3.第三尝试：

终于在简书的D_clock爱吃葱花的《Android开发：Translucent System Bar 的最佳实践》中找到一个实现方案。

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:windowTranslucentNavigation">true</item>
       <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

效果如下：

很被动的就达到了全透明的效果。

4.当然还是不能忍的，直接AndoriDev找android:statusBarColor介绍

在Material Design中我找到了Window.setStatusBarColor() 的介绍：

setStatusBarColor

Added in API level 21

Sets the color of the status bar to color. For this to take effect, the window must be drawing the system bar backgrounds with FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS and FLAG_TRANSLUCENT_STATUS must not be set.

If color is not opaque, consider setting SYSTEM_UI_FLAG_LAYOUT_STABLE and

SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN.

简单解说下，这个方法是用于为状态栏设置颜色的，为了让设置的颜色起作用，它必须和FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS连用，并且不能设置FLAG_TRANSLUCENT_STATUS；如果是透明色，则需要与SYSTEM_UI_FLAG_LAYOUT_STABLE和SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN连用。

看到没赤裸裸的打脸，4.4的FLAG_TRANSLUCENT_STATUS和5.0的android:statusBarColor是不能连用的，从二者作用上理解，前者是实现透明状态栏，并使得应用内容侵入到状态栏之后，而后者这要作用是用于设置颜色，是相冲突的。因此4.4是FLAG_TRANSLUCENT_STATUS是一个复合作用标签，但是它不完美，它还提供了系统栏的保护色。

那么，我们需要使用后两个标签，但是在AppTheme中是找不到这两个属性进行设置的。

它们是在Android 4.1之后加入的用于将应用内容显示在系统栏之后的标记，此标记只用于View的setSystemUiVisibility()方法中：SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN用于将应用内容显示在状态栏之后，对应的也就有SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION标签，作用于导航栏之后。而SYSTEM_UI_FLAG_LAYOUT_STABLE这个标志来帮助应用维持一个稳定的布局。他们的出现是与4.1的隐藏系统栏一同出现的，用于稳定布局，使得在系统栏隐藏和出现的过程中内容布局不会发生大小的改变时的突兀感。

从此可知在5.0及之后的系统中，通过5.0的设置状态栏颜色标签和4.1具有侵入状态栏的布局标签，结合使用获得所需要的效果，而且没有保护色的副作用。

public class UniformBackgroundActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_uniform_background);
        getWindow().getDecorView().setSystemUiVisibility(
                View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
                View.SYSTEM_UI_FLAG_LAYOUT_STABLE );
    }
}

代码总结：

1、创建res/values-v19/styles.xml文件,加入如下代码:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <item name="android:windowTranslucentStatus">true</item>
      <!-- 如果需要导航栏也透明加下面这行代码 -->
      <item name="android:windowTranslucentNavigation">true</item>
    </style>
</resources>

2、创建res/values-v21/styles.xml文件,加入如下代码

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:statusBarColor">@android:color/transparent</item>
        <!-- 如果需要导航栏也透明加下面这行代码 -->
        <item name="android:navigationBarColor">@android:color/transparent</item>
    </style>
</resources>

3.在Activity的onCreate方法中加入如下代码：

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
           //如果需要透明导航栏，请加入标记
           //View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
            getWindow().getDecorView().setSystemUiVisibility(
                    View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
                            View.SYSTEM_UI_FLAG_LAYOUT_STABLE );
        }

4.清单文件中为此activity添加Theme属性

<activity android:name=".xxxActivity"
            android:theme="@style/AppTheme"
            ></activity>
时间： 2024-10-22 14:08:43

系统栏系列之背景图片侵入系统栏的相关文章

导航栏设置了背景图片后恢复默认

// 背景图恢复默认 [self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault]; // 底部线恢复默认 self.navigationController.navigationBar.shadowImage = nil; // 样式恢复默认 self.navigationController.navigationBar.barStyle = UIBarSty

Android图片系列（1）-------调用系统相册与相机获取图片

Android开发过程中,我们经常需要获取图片,你可以通过获取手机相册的图片,也可以调用相机拍照获取图片.这里主要讲这两个获取图片的方式,并记录其中遇到的小问题. 调用相册获取图片 这个功能非常简单,这里不多说了,这里贴出关键代码 Intent openAlbumIntent = new Intent(Intent.ACTION_GET_CONTENT); openAlbumIntent.setType("image/*"); startActivityForResult(openAl

系统登陆界面开发及实现之（二）添加界面背景图片

开发步骤: 将背景图片复制到res文件夹下drawable中 打开res下layout下activity_login.xml 在顶级布局标签中添加属性进行窗体背景设置 android:background属性 作用:设置组件背景 常量参数:@drawable/bg 代码: android:background="@drawable/bg" 运行: 小结:@代表资源引用,drawable/代表应用的是项目中的图片资源,bg代表引用的是哪个图片,注意没有后缀名! ?

ios 导航栏（自己定义和使用系统方式）

系统方式: //1.设置导航栏背景图片 [self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage = [[UIImage alloc]init]; [[self navigationController] setNa

【基于WPF+OneNote+Oracle的中文图片识别系统阶段总结】之篇四：关于OneNote入库处理以及审核

篇一:WPF常用知识以及本项目设计总结:http://www.cnblogs.com/baiboy/p/wpf.html 篇二:基于OneNote难点突破和批量识别:http://www.cnblogs.com/baiboy/p/wpf1.html 篇三:批量处理后的txt文件入库处理:http://www.cnblogs.com/baiboy/p/wpf2.html 篇四:关于OneNote入库处理以及审核:http://www.cnblogs.com/baiboy/p/wpf3.html [

RDIFramework.NET — 基于.NET的快速信息化系统开发框架 — 系列目录

RDIFramework.NET - 基于.NET的快速信息化系统开发框架 - 系列目录 RDIFramework.NET,基于.NET的快速信息化系统开发.整合框架,给用户和开发者最佳的.Net框架部署方案.  框架简单介绍 RDIFramework.NET,基于.NET的快速信息化系统开发.整合框架,为企业或个人在.NET环境下快速开发系统提供了强大的支持,开发人员不需要开发系统的基础功能和公共模块,框架自身提供了强大的函数库和开发包,开发人员只须集中精力专注于业务部分的开发,因此大大提高开

微信小程序购物商城系统开发系列-目录结构

上一篇我们简单介绍了一下微信小程序的IDE(微信小程序购物商城系统开发系列-工具篇),相信大家都已经蠢蠢欲试建立一个自己的小程序,去完成一个独立的商城网站. 先别着急我们一步步来,先尝试下写一个自己的小demo. 这一篇文章我们主要的是介绍一下小程序的一些目录结构,以及一些语法,为我们后面的微信小程序商城系统做铺垫. 首先我们来了解下小程序的目录结构 Pages 我们新建的一些页面将保存在这个文件夹下面,每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js.index.

iOS开发中的错误整理，启动图片设置了没有效果;单独创建xib需要注意的事项;图片取消系统渲染的快捷方式

一.启动图片设置了没有效果 解决方案:缓存啊!卸了程序重新安装吧!!!!! 二.单独创建xib需要注意的事项 三.图片取消系统渲染的快捷方式

Android调用相册拍照控件实现系统控件缩放切割图片

android 下如果做处理图片的软件 可以调用系统的控件 实现缩放切割图片 非常好的效果 今天写了一个demo分享给大家 package cn.m15.test; import java.io.ByteArrayOutputStream;import java.io.File;import android.app.Activity;import android.content.Intent;import android.graphics.Bitmap;import android.net.Ur