Android状态栏一体化（改变状态栏的背景颜色）

来源：互联网发布：字符能遍历吗python 编辑：程序博客网时间：2024/06/09 19:55

1、前言

在android kitkat 有一个新的特性可以设置手机状态栏的背景，让手机整个界面的风格保持一致，看起来非常清爽，在今年的google i/o上的android l默认就是这种风格。来现在看我们怎么加上这个酷黑狂拽掉渣天的功能怎么给我们的程序加上。来先看一下demo效果图。

2、关与kitkat

android 4.4 提供了一套能透明的系统ui样式给状态栏和导航栏，这样的话就不用向以前那样每天面对着黑乎乎的上下两条黑栏了，还可以调成跟activity 一样的样式，形成一个完整的主题。

3、设置方法

首先要打开activity的透明主题功能，可以把activity的主题设置继承*.TranslucentDecor 主题，然后设置android:windowTranslucentNavigation 或者android:windowTranslucentStatus的主题属性为true，又或者在activity的代码里面开启FLAG_TRANSLUCENT_NAVIGATION 或是 FLAG_TRANSLUCENT_STATUS的window窗口标识。由于透明主题不能在4.4以前的版本里面使用，所以系统样式跟以前没有区别，也就是看不到任何变化，这是一个兼容模式，这个模式可以兼容到api 10.

激活主题

[java] view plaincopy
@Override  
protected void onCreate(Bundle savedInstanceState) {  
    super.onCreate(savedInstanceState);  
    setContentView(R.layout.activity_main);  
    // 创建状态栏的管理实例  
    SystemBarTintManager tintManager = new SystemBarTintManager(this);  
    // 激活状态栏设置  
    tintManager.setStatusBarTintEnabled(true);  
    // 激活导航栏设置  
    tintManager.setNavigationBarTintEnabled(true);  
}  

设置状态栏颜色和图片

[java] view plaincopy
// 设置一个颜色给系统栏  
tintManager.setTintColor(Color.parseColor("#99000FF"));  
// 设置一个样式背景给导航栏  
tintManager.setNavigationBarTintResource(R.drawable.my_tint);  
// 设置一个状态栏资源  
tintManager.setStatusBarTintDrawable(MyDrawable);  

4、开源下载地址

https://github.com/hexiaochun/SystemBarTint

状态栏的字体颜色位白色，如果状态栏背景为白色，这个怎么解决呢？下面这个博客解决了这个问题。

http://blog.csdn.net/jdsjlzx/article/details/50437779

===================

这个特性是andorid4.4支持的，最少要api19才可以使用。

开启FLAG_TRANSLUCENT_NAVIGATION 或是 FLAG_TRANSLUCENT_STATUS

int API_LEVEL =  android.os.Build.VERSION.SDK_INT;if (API_LEVEL >= 19){    getWindow().addFlags( WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION );     }

//透明状态栏
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
//透明导航栏
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

状态栏设置透明后会与下方的view错位~ 就是让下方VIew全屏覆盖状态栏，解决方法

首先要在布局文件中加入下面两个属性：
android:clipToPadding="true"
android:fitsSystemWindows="true"

解释一下上面两个布局属性的意思：
android:clipToPadding 定义布局间是否有间距
android:fitsSystemWindows="true" 意思就是设置应用布局时是否考虑系统窗口布局；如果为true，将调整系统窗口布局以适应你自定义的布局。比如系统有状态栏，应用也有状态栏时。看你这个布局代码，恰恰是在定义标题栏样式，所以用到这行代码了。

===================以上是运用第三方包，可以有更多的灵活性之类的==========================

=====================以下是一种非常快捷~的方法~=======================================

代码中设置：

//透明状态栏
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
//透明导航栏
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

可以使用别的办法，主题阿之类的~ 没百度，这样状态栏就会沉浸（和下方View叠加）

布局中添加：

android:fitsSystemWindows="true"
android:clipToPadding="true"

将此代码加入到~ 你想状态栏改变颜色相对应的View上，比如VIew1背景色是红色，加入以后状态栏就是红色的~

布局中设置透明状态栏的方法：

引用主题
android:theme="@android:style/Theme.DeviceDefault.Light.NoActionBar.TranslucentDecor"
android:theme="@android:style/Theme.Holo.Light.NoActionBar.TranslucentDecor"
android:theme="@android:style/Theme.Holo.NoActionBar.TranslucentDecor"

如果使用自定主题，只需在在values-v19 文件夹下添加以下属性
<style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar" >

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

<span style="font-family: 'Comic Sans MS';"><span style="white-space:pre"></span>values-v19代表在API 19+的设备上，用该目录下的styles.xml代替res/values/styles.xml</span>

以下是原帖内容：

这个特性是andorid4.4支持的，最少要api19才可以使用。下面介绍一下使用的方法，非常得简单：

[java] view plain copy
public class MainActivity extends Activity {  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
  
        //透明状态栏  
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);  
        //透明导航栏  
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);  
  
    }  
  
  
}  

[java] view plain copy
//透明状态栏  
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);  
//透明导航栏  
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);  

只要加入这两行代码，就可以实现沉浸式通知栏了。效果如图：

给大家看看这个界面的布局：

[html] view plain copy
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:background="#ffffff"  
    android:orientation="vertical"  
    tools:context=".MainActivity">  
  
  
    <TextView  
  
        android:layout_width="match_parent"  
        android:layout_height="100dp"  
        android:background="#009959" />  
  
  
    <Button  
        android:layout_width="100dp"  
        android:layout_height="50dp"  
        android:background="#ff669d"/>  
  
</LinearLayout>  

是一个垂直的流布局，但这样，其实还是有问题的，我在textView里面加一些文字，就是绿色的那一块，大家看一下效果：

大家看到了吧，文字和状态栏重叠在一起了，这肯定是不行的，此时需要添加下面的代码：

[html] view plain copy
android:fitsSystemWindows="true"  
android:clipToPadding="true"  

[html] view plain copy
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
      
    android:fitsSystemWindows="true"  
    android:clipToPadding="true"  
  
    android:background="#ffffff"  
    android:orientation="vertical"  
    tools:context=".MainActivity">  
  
  
  
    <TextView  
        android:layout_width="match_parent"  
        android:layout_height="100dp"  
        android:background="#009959" />  
  
  
    <Button  
        android:layout_width="100dp"  
        android:layout_height="50dp"  
        android:background="#ff669d"/>  
  
</LinearLayout>  

大家看红色的那部分，加入那两行以后，界面仍然会是沉浸式的，但状态栏那部分，就不会再重叠了，像加了padding一样，如下图：

大家看图，绿色的textView和红色的一个button都被下移了，状态栏是白色的，是背景linearLayout的颜色。很明显，这也不是我们想要的，我们希望状态栏和我们放在顶部的控件是同一个颜色，同时，控件内容也不和状态栏重复，其实，只要把那两行代码放到我们顶部的控件就可以了。代码如下：

[html] view plain copy
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:background="#ffffff"  
    android:orientation="vertical"  
    tools:context=".MainActivity">  
  
  
  
    <TextView  
        android:fitsSystemWindows="true"  
        android:clipToPadding="true"  
  
        android:layout_width="match_parent"  
        android:layout_height="100dp"  
        android:background="#009959"  
        android:text="你好，请问你有男朋友吗"/>  
  
  
    <Button  
        android:layout_width="100dp"  
        android:layout_height="50dp"  
        android:background="#ff669d"/>  
  
</LinearLayout>  

就是那两行红色的代码，放在绿色的textView上，这样，就会是下面的效果：

这就是我们想要的了。

这个方法只有在andorid4.4中才能够使用，以下的不能使用，兼容性问题解决方案（自己还没查看~）~~~

犹豫这个特性是andorid4.4支持的，最少要api19才可以使用，那么低于4.4的怎么办呢？这里我们还是通过自定义标题栏的方式解决。

首先我们来看怎么实现文章开头特产惠界面的效果。

本应用是FragmentAcitity+Framgment实现，故主界面是四个fragment组成。

MainUIAcitivy中onCreate方法：

[java] view plain copy
@Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
  
        //透明状态栏  
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {  
            Window window = getWindow();  
            // Translucent status bar  
            window.setFlags(  
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,  
                    WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);  
        }  
  
        // 强制更新  
        UmengUpdateAgent.setDialogListener(new UmengDialogButtonListener() {  
  
            @Override  
            public void onClick(int status) {  
                switch (status) {  
                    case UpdateStatus.Update:  
                        break;  
                    default:  
                        // close the app  
                        AppToast.showShortText(MainUIActivity.this,  
                                "非常抱歉，您需要更新应用才能继续使用");  
                        MainUIActivity.this.finish();  
                }  
            }  
        });  
    }  

首页（特产惠）布局的加载如下代码，大家可以看到根据当前api是否大于4.4，加载不同的布局，归根到底就是标题栏的不同。

[java] view plain copy
@Override  
   public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {  
       View view = inflater.inflate(R.layout.fragment_home, container, false);  
       if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {  
           view = inflater.inflate(R.layout.fragment_home_v19, container, false);  
       }  
       return view;  
   }  

fragment_home.xml

[html] view plain copy
<?xml version="1.0" encoding="utf-8"?>  
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:background="@color/app_bg"  
    android:orientation="vertical"  
    >  
  
        <!--其他布局-->  
  
    <RelativeLayout  
        android:id="@+id/index_title_bar"  
        android:layout_alignParentTop="true"  
        style="@style/title_bar_style_home"  
        android:fitsSystemWindows="true"  
        android:gravity="center"  
        >  
  
        <TextView  
            android:id="@+id/current_city_text"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_alignParentLeft="true"  
            android:layout_centerVertical="true"  
            android:layout_marginLeft="10dp"  
            android:drawableTop="@drawable/ic_location"  
            android:drawablePadding="2dp"  
            android:text="北京"  
            android:textColor="#fff"  
            android:textSize="10sp" />  
  
        <TextView  
            android:id="@+id/tv_title"  
            android:layout_centerVertical="true"  
            android:layout_width="match_parent"  
            android:layout_height="33dp"  
            android:gravity="center_vertical"  
            android:layout_weight="10"  
            android:background="@drawable/shape_edit_corners_bg"  
            android:hint="请输入商品名称"  
            android:imeOptions="actionSearch"  
            android:singleLine="true"  
            android:textColor="@color/black_text"  
            android:textColorHint="#ffb6b6b6"  
            android:textSize="14sp"  
            android:maxLength="10"  
            android:paddingLeft="5dp"  
            android:paddingRight="3dp"  
            android:drawableLeft="@drawable/ic_search"  
            android:drawableRight="@drawable/bg_btn_voice"  
            android:layout_toLeftOf="@+id/image_right"  
            android:layout_toRightOf="@+id/current_city_text"  
            android:layout_marginLeft="10dp"  
            android:layout_marginRight="10dp"/>  
  
        <TextView  
            android:id="@+id/image_right"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_alignParentRight="true"  
            android:layout_centerVertical="true"  
            android:layout_marginRight="10dp"  
            android:drawableTop="@drawable/ic_category"  
            android:drawablePadding="2dp"  
            android:text="分类"  
            android:textColor="#fff"  
            android:textSize="10sp" />  
  
    </RelativeLayout>  
</RelativeLayout>  

fragment_home_v19.xml

[html] view plain copy
<?xml version="1.0" encoding="utf-8"?>  
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:background="@color/app_bg"  
    android:orientation="vertical"  
    >  
  
        <!-- 其他布局 -->  
  
    <RelativeLayout  
        android:id="@+id/index_title_bar"  
        android:layout_alignParentTop="true"  
        style="@style/title_bar_style_home_v19"  
        android:fitsSystemWindows="true"  
        android:gravity="center"  
        android:paddingTop="@dimen/title_bar_padding_top"  
        >  
  
        <TextView  
            android:id="@+id/current_city_text"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_alignParentLeft="true"  
            android:layout_centerVertical="true"  
            android:layout_marginLeft="10dp"  
            android:drawableTop="@drawable/ic_location"  
            android:drawablePadding="2dp"  
            android:text="北京"  
            android:textColor="#fff"  
            android:textSize="10sp" />  
  
        <TextView  
            android:id="@+id/tv_title"  
            android:layout_centerVertical="true"  
            android:layout_width="match_parent"  
            android:layout_height="33dp"  
            android:gravity="center_vertical"  
            android:layout_weight="10"  
            android:background="@drawable/shape_edit_corners_bg"  
            android:hint="请输入商品名称"  
            android:imeOptions="actionSearch"  
            android:singleLine="true"  
            android:textColor="@color/black_text"  
            android:textColorHint="#ffb6b6b6"  
            android:textSize="14sp"  
            android:maxLength="10"  
            android:paddingLeft="5dp"  
            android:paddingRight="3dp"  
            android:drawableLeft="@drawable/ic_search"  
            android:drawableRight="@drawable/bg_btn_voice"  
            android:layout_toLeftOf="@+id/image_right"  
            android:layout_toRightOf="@+id/current_city_text"  
            android:layout_marginLeft="10dp"  
            android:layout_marginRight="10dp"/>  
  
        <TextView  
            android:id="@+id/image_right"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_alignParentRight="true"  
            android:layout_centerVertical="true"  
            android:layout_marginRight="10dp"  
            android:drawableTop="@drawable/ic_category"  
            android:drawablePadding="2dp"  
            android:text="分类"  
            android:textColor="#fff"  
            android:textSize="10sp" />  
  
    </RelativeLayout>  
</RelativeLayout>  

style.xml

[html] view plain copy
<style name="title_bar_style_home"><!-- 首页用 -->  
        <item name="android:background">#ffc6003b</item>  
        <item name="android:paddingLeft">0.0dip</item>  
        <item name="android:paddingRight">0.0dip</item>  
        <item name="android:layout_width">fill_parent</item>  
        <item name="android:layout_height">48dp</item>  
    </style>  
    <style name="title_bar_style_home_v19"><!-- 首页用v19 -->  
        <item name="android:background">#ffc6003b</item>  
        <item name="android:paddingLeft">0.0dip</item>  
        <item name="android:paddingRight">0.0dip</item>  
        <item name="android:layout_width">fill_parent</item>  
        <item name="android:layout_height">65dp</item>  
    </style>  

values/dimens.xml

<dimen name="title_bar_padding_top">0dp</dimen>

values-v19/dimens.xml

<dimen name="title_bar_padding_top">20dp</dimen>

首页（特产惠）的关键代码就这么多，下面我们来重点看第二个fragment（生活+）。

跟首页不同的是，生活+界面的标题栏是白色的,如果实现侵色，状态栏也是白色的，这样状态栏的白色字就看不见了，下面给出解决方法。

解决的办法还是自定义标题栏。

原理：自定义标题栏（包含状态栏），背景为黑色，也就是状态栏的颜色。高度为68dp，然后设置paddingTop=20dp，这个20dp就是状态栏的高度。剩下的48dp就是我们真正的标题栏。

首先还是根据当前api是否大于4.4，加载不同的布局，归根到底就是状态栏的不同。

[java] view plain copy
@Override  
    public View onCreateView(LayoutInflater inflater, ViewGroup container,  
            Bundle savedInstanceState) {  
        View view = inflater.inflate(R.layout.fragment_life, container, false);  
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {  
            view = inflater.inflate(R.layout.fragment_life_v19, container, false);  
        }  
          
        return view;  
    }  

fragment_life.xml

[html] view plain copy
<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@+id/root_layout"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="vertical">  
  
    <include layout="@layout/title_bar_main" />  
  
    <!-- 其他布局 -->  
</LinearLayout>  

title_bar_main.xml

[html] view plain copy
<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@+id/main_title_bar"  
    style="@style/title_bar_style_main"  
    android:fitsSystemWindows="true"  
    >  
  
    <RelativeLayout  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:background="#FFFEFEFE">  
  
        <TextView  
            android:id="@+id/title_text"  
            style="@style/title_text_style"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_centerInParent="true"  
            android:ellipsize="end"  
            android:singleLine="true" />  
  
        <ImageView  
            android:id="@+id/right_img"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_alignParentRight="true"  
            android:layout_centerVertical="true"  
            android:contentDescription="@null"  
            android:paddingLeft="15dp"  
            android:paddingRight="15dp"  
            android:src="@drawable/ic_notice"  
            android:visibility="gone"/>  
  
  
    </RelativeLayout>  
</LinearLayout>  

fragment_life_v19.xml

[html] view plain copy
<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@+id/root_layout"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="vertical">  
  
    <include layout="@layout/title_bar_main_v19" />  
  
    <!-- 其他布局 -->  
  
      
  
</LinearLayout>  

title_bar_main_v19.xml

[html] view plain copy
<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@+id/main_title_bar"  
    style="@style/title_bar_style_main_19"  
    android:fitsSystemWindows="true"  
    android:paddingTop="@dimen/title_bar_padding_top">  
  
    <RelativeLayout  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:background="#FFFEFEFE">  
  
        <TextView  
            android:id="@+id/title_text"  
            style="@style/title_text_style"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_centerInParent="true"  
            android:ellipsize="end"  
            android:singleLine="true" />  
  
        <ImageView  
            android:id="@+id/right_img"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_alignParentRight="true"  
            android:layout_centerVertical="true"  
            android:contentDescription="@null"  
            android:paddingLeft="15dp"  
            android:paddingRight="15dp"  
            android:src="@drawable/ic_notice"  
            android:visibility="gone"/>  
  
  
    </RelativeLayout>  
</LinearLayout>  

style.xml

[html] view plain copy
<style name="title_bar_style_main">  
        <item name="android:background">#FFFEFEFE</item>  
        <item name="android:paddingLeft">0.0dip</item>  
        <item name="android:paddingRight">0.0dip</item>  
        <item name="android:layout_width">fill_parent</item>  
        <item name="android:layout_height">48dp</item>  
        <item name="android:gravity">center_vertical</item>  
    </style>  
    <style name="title_bar_style_main_19">  
        <item name="android:background">@android:color/black</item>  
        <item name="android:paddingLeft">0.0dip</item>  
        <item name="android:paddingRight">0.0dip</item>  
        <item name="android:layout_width">fill_parent</item>  
        <item name="android:layout_height">68dp</item>  
        <item name="android:gravity">center_vertical</item>  
    </style>  

0 0

Android状态栏一体化 （改变状态栏的背景颜色）

Android状态栏一体化（改变状态栏的背景颜色）