Android中 4.4-5.0 系统状态栏颜色的修改。实现Translucent System Bar

原创 2016年06月01日 16:48:31

在Android 4.4之前,打开app的时候我们能看到系统顶部那条黑乎乎的通系统状态栏。但是Android 4.4开始,引入了Translucent System Bar的系特性,弥补系统通知栏突兀之处。当我们使用这个特性的前后对比我们来看一下。




在这里我们使用一种简单的方法,之前在网上也看过类似的实现方法,一种是直接在代码里面去设置,还有一种直接修改主题的样式,个人感觉后面一种比较方便,也容易理解,在这里就介绍一下第二种方法。


首先要到AndroidManifest中为指定的Activity去设置Theme,不过我们不能在values/style.xml中直接去定义Translucet System Bar的Theme,因为对应的版本不一样,该特性只兼容Android 4.4开始的版本。可以建几个不同版本的values,比如values、values-v19、values-v21。


利用主题样式去设置的话。

1.我们先把values创建完成,里面有三个版本的styles。



values/styles.xml

	<style name="TranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
   	  <!--Android 4.4之前的版本上运行,直接跟随系统主题-->
	  </style>

values-v19/styles.xml

<style name="TranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
</style>
设置了属性 windowTranslucentStatus 和windowTranslucentNavigation 为true,我们必须设置这两个属性的值为true才行,以便使我们定义的layout侵入系统栏的领域。


values-v21/style.xml

<style name="TranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowTranslucentStatus">false</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <!--Android 5.x开始需要把颜色设置透明,否则导航栏会呈现系统默认的浅灰色-->
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>



无论你在哪个SDK版本的values目录下,设置了主题,都应该在最基本的values下设置一个同名的主题。这样才能确保你的app能够正常运行在 Android 4.4 以下的设备。否则,肯定会报找不到Theme的错误。


2.在AndroidManifest.xml中对指定Activity的theme进行设置

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:supportsRtl="true"
    android:theme="@style/TranslucentTheme">
    <activity android:name=".MainActivity">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

3.在Activity的布局文件中把android:fitsSystemWindows设置为true

虽然不加android:fitsSystemWindows属性也会改变状态栏的背景,但是出现的结果是不同的。

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical"
    tools:context="wxt.example.com.as20.MainActivity"
    android:background="#FF4081">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
    <Button
        android:onClick="open"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="打开"/>

</LinearLayout>

这个是个LinearLayout布局,我们把android:fitsSystemWindows属性在里面设置。如果background是一种颜色的话,他会在整个屏幕上都是这种颜色。 那么我们把android:fitsSystemWindows属性去掉之后呢,两者有什么差别呢?

加了android:fitsSystemWindows属性的界面(左) 不加android:fitsSystemWindows属性的界面(右)




在这里我们先来介绍一下fitsSystemWindows,

fitsSystemWindows 是在 android 4.4 中引入的。 System windows 顾名思义就是系统窗口,系统在这里显示系统一些属性和操作区域,比如 最上方的状态栏,以及没有实体按键的最下方的虚拟导航栏。

大部分的时候,你的应用都不会在状态栏和导航栏下面显示内容,如果你需要在他们下面显示内容,则需要确保你应用的可交互控件(比如按钮)不要显示在系统窗口下面了。 android:fitsSystemWindows=“true” 默认行为就是通过在 View 上设置和系统窗口一样高度的边框(padding )来确保你的内容不会出现到系统窗口下面。



android:fitsSystemWindows属性,我们可以根据自己的需要去设置,并不一样要设置在第一个跟布局的属性里,我们来看一下另外一种

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/about_bg_darker"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/security_setting_title_bg"
        android:fitsSystemWindows="true"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <ImageButton
            android:id="@+id/common_title_back_btn"
            android:layout_width="?attr/actionBarSize"
            android:layout_height="?attr/actionBarSize"
            android:background="@drawable/actionbar_indicator_bg2"
            android:contentDescription="@null"
            android:src="@drawable/actionbar_back" />

        <TextView
            android:id="@+id/common_title_main_text"
            style="@style/common_title_main_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/title_feedback_setting" />

        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <ImageButton
            android:id="@+id/common_title_main_extra_btn"
            android:layout_width="?attr/actionBarSize"
            android:layout_height="?attr/actionBarSize"
            android:background="@drawable/actionbar_indicator_bg2"
            android:contentDescription="@null"
            android:src="@drawable/submit_setting_feedback" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/setting_menu"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:background="@drawable/bg_card3"
        android:gravity="center_vertical"
        >
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="7"
            android:gravity="center_vertical">
            <TextView
                android:id="@+id/setting_feedback_menu_select"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="12dp"
                android:textColor="#5d9cec"
                android:textSize="14dp"
                android:text="@string/activity_setting_feedback_common"/>
        </RelativeLayout>
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="3"
            android:gravity="center_vertical|right">
            <ImageView
                android:id="@+id/menu_imageview"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:layout_marginRight="12dp"
                android:src="@drawable/arrow_07"/>
        </RelativeLayout>
    </LinearLayout>

    <EditText
        android:id="@+id/container_setting_feedback"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_below="@id/setting_feedback_menu"
        android:layout_marginTop="10dp"
        android:background="#FFFFFF"
        android:fontFamily="@string/font_families_roboto"
        android:gravity="top"
        android:hint="@string/container_hint_setting_feedback"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:paddingTop="15dp"
        android:textColor="#787878"
        android:textColorHint="#B5B5B5"
        android:textSize="16dp" />


    <TextView
        android:id="@+id/notice_setting_feedback"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/container_setting_feedback"
        android:fontFamily="@string/font_families_roboto"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:paddingTop="10dp"
        android:text="@string/notice_setting_feedback"
        android:textSize="12dp" />


</LinearLayout>


在这里我们把android:fitsSystemWindows属性设置到第二个LinearLayout中了,第二个LinearLayout是类似于actionbar的布局。我们来看一下效果图:



版权声明:本文为博主原创文章,未经博主允许不得转载。

Android开发技巧——设置系统状态栏颜色

开门见山,先来三张效果图: 然后我们再来讲如何实现以及如何快速地实现。如何实现实现设置系统状态栏颜色需要至少在Android 4.4.2(API 19)以上。这是因为,在这个版本以下,没有任...
  • maosidiaoxian
  • maosidiaoxian
  • 2016年06月22日 15:55
  • 38909

如何设置android 5.0主题,状态栏,toolbar颜色设定

转载请注明: http://blog.csdn.net/u012184853/article/details/50372069在android 5.0之后,增加了很多自定义的元素,其中对于状态栏,t...
  • u012184853
  • u012184853
  • 2015年12月21日 14:56
  • 6039

Android5.0沉浸式状态栏,以及动态改变状态栏颜色

设置状态栏完全不可见 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInsta...
  • night_dragon
  • night_dragon
  • 2017年04月25日 15:09
  • 1812

Android4.4、Android5.0+状态栏颜色、透明等设置

Android 4.4 Manifest文件Activity的Theme设置: true true 代码中设置: ...
  • sjzx3142
  • sjzx3142
  • 2016年08月17日 16:22
  • 4601

Android通知栏颜色改变方法

1、android 沉浸式状态栏 通知栏(notification)背景颜色跟随app导航栏(top title)背景颜色变化而变化。这也叫沉浸式状态栏,这是Google在android 4.4以上...
  • c19344881x
  • c19344881x
  • 2015年08月25日 13:53
  • 5052

android沉浸式状态栏、变色状态栏、透明状态栏、修改状态栏颜色及透明

  • 2016年03月28日 15:56
  • 31.43MB
  • 下载

安卓4.4以上修改状态栏颜色

很多刚开始接触安卓的人,可能都比较喜欢安卓5.0的Material Design,然而七月官方的安卓版本份额显示:5.0以上的市场份额仍小于13%(全球范围内,中国更小),4.4+5.0+5.1的份额...
  • koche
  • koche
  • 2015年07月05日 23:08
  • 7439

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

在我们的日常开发中,会经常遇到应用首页的顶部是个Banner(轮播图),好多Banner还延伸到我们的状态栏里面去了,既显得风格一致又显得简洁美观。第二种是顶部系统状态栏和App的导航栏一体化,不给用...
  • lizhiying61f
  • lizhiying61f
  • 2016年08月15日 18:22
  • 4452

Android中windowTranslucentStatus与windowTranslucentNavigation的一些设置

在iOS中,你可能发现页面会整体拉升到状态栏,整个页面效果就会显得更加的高端大气上档次,在Android4.4以后其实也有这种效果的实现,下面我就说一下在进行这种效果实现时碰到的一些坑,希望对大家有一...
  • zjt593688
  • zjt593688
  • 2016年09月21日 13:45
  • 11031

MFC edit控件实现自动换行

必须设置Vertical Scrollbar = TRUE 必须设置MultiLine = TRUE 必须设置Horizontal Scrollbar = FALSE 必须设置Auto HScr...
  • a200638012
  • a200638012
  • 2016年07月08日 17:22
  • 4781
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android中 4.4-5.0 系统状态栏颜色的修改。实现Translucent System Bar
举报原因:
原因补充:

(最多只允许输入30个字)