如何实现android沉浸式状态栏

 我来答
乔奇虎360
2017-02-20 · TA获得超过129个赞
知道小有建树答主
回答量:112
采纳率:0%
帮助的人:21.2万
展开全部

有些手机是强制改变通知栏颜色的,比如魅族,苹果。但是目前主要还是通过代码作出自己想要的效果。

Android 4.4之前,即使我们打开手机app,我们还总是能看到系统顶部那条黑乎乎的通知栏,这样会使得app稍显突兀。于是Android 4.4开始,便引入了Translucent System Bar的新特性,用于弥补系统通知栏突兀之处。

状态栏透明后,你可以选择设置其颜色或者显示背景图片。效果如下

Android4.4和5.0的实现方式不同。这里简单介绍一种

主要的操作都在style.xml 和 AndroidManifest.xml 中,Activity里面没有任何涉及到Translucent System Bar设置的代码,所以可以忽略不看。

要在Activity中使用 Translucent System Bar 特性,首先需要到AndroidManifest中为指定的Activity设置Theme。但我们不能直接在values/style.xml去定义Theme,因为改特性仅兼容 Android 4.4 开始的平台,所以直接在values/style.xml声明引入,工程会报错。有些开发者朋友会在代码中去判断SDK的版本,然后再用代码设置Theme。虽然同样可以实现效果,但个人并不推荐。我采取的方法是建立多个SDK版本的values文件夹,系统会根据SDK的版本选择合适的Theme进行设置。我的工程里面有values、values-v19、values-v21。

1、在values、values-v19、values-v21的style.xml都设置一个 Translucent System Bar 风格的Theme

values/style.xml

<style name="ImageTranslucentTheme" parent="AppTheme">
    <!--在Android 4.4之前的版本上运行,直接跟随系统主题-->
</style>

values-v19/style.xml

<style name="ImageTranslucentTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
</style>

values-v21/style.xml

<style name="ImageTranslucentTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <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进行设置

<activity
    android:name=".ui.ImageTranslucentBarActivity"
    android:label="@string/image_translucent_bar"
    android:theme="@style/ImageTranslucentTheme" />

3、在Activity的布局文件中设置背景图片,同时,需要把android:fitsSystemWindows设置为true

activity_image_translucent_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/env_bg"
    android:fitsSystemWindows="true">
</RelativeLayout>

到此,第一种实现方式完成,系统的整个导航栏都融入了app的界面中,背景图片填满了整个屏幕,看起来舒服很多。设置android:fitsSystemWindows这个属性时需要注意。

通知栏的沉浸式体验,推荐和Material Design配合使用,

md的主题有:

@android:style/Theme.Material (dark version)

@android:style/Theme.Material.Light (light version)

@android:style/Theme.Material.Light.DarkActionBar

与之对应的Compat Theme:

Theme.AppCompat

Theme.AppCompat.Light

Theme.AppCompat.Light.DarkActionBar

(1)个性化 Color Palette

我们可以根据我们的app的风格,去定制Color Palette(调色板),重点有以下几个属性:

<resources>
    <!-- Base application theme. -->
    <style name="AppBaseTheme" parent="Theme.AppCompat">
        <!-- customize the color palette -->
        <item name="colorPrimary">@color/material_blue_500</item>
        <item name="colorPrimaryDark">@color/material_blue_700</item>
        <item name="colorAccent">@color/material_green_A200</item>
    </style>
</resources>

colorPrimary 对应ActionBar的颜色。

colorPrimaryDark对应状态栏的颜色

colorAccent 对应EditText编辑时、RadioButton选中、CheckBox等选中时的颜色。

与之对应的图:

于5.0以下的设备,目前colorPrimaryDark无法去个性化状态栏的颜色;底部的navagationBar可能也不一样。

另外ActionBar,被推荐使用ToolBar来代替。

下面是少部分常用到的MD颜色:

<?xml version="1.0" encoding="utf-8"?><resources>
 <!-- red -->
    <color name="md_red_50_color_code">#fde0dc</color>
    <color name="md_red_100_color_code">#f9bdbb</color>
    <color name="md_red_200_color_code">#f69988</color>
    <color name="md_red_300_color_code">#f36c60</color>
    <color name="md_red_400_color_code">#e84e40</color>
    <color name="md_red_500_color_code">#e51c23</color>
    <color name="md_red_600_color_code">#dd191d</color>
    <color name="md_red_700_color_code">#d01716</color>
    <color name="md_red_800_color_code">#c41411</color>
    <color name="md_red_900_color_code">#b0120a</color>
    <color name="md_red_a100_color_code">#ff7997</color>
    <color name="md_red_a200_color_code">#ff5177</color>
    <color name="md_red_a400_color_code">#ff2d6f</color>
    <color name="md_red_a700_color_code">#e00032</color>

    <!-- pink -->
    <color name="md_pink_50_color_code">#fce4ec</color>
    <color name="md_pink_100_color_code">#f8bbd0</color>
    <color name="md_pink_200_color_code">#f48fb1</color>
    <color name="md_pink_300_color_code">#f06292</color>
    <color name="md_pink_400_color_code">#ec407a</color>
    <color name="md_pink_500_color_code">#e91e63</color>
    <color name="md_pink_600_color_code">#d81b60</color>
    <color name="md_pink_700_color_code">#c2185b</color>
    <color name="md_pink_800_color_code">#ad1457</color>
    <color name="md_pink_900_color_code">#880e4f</color>
    <color name="md_pink_a100_color_code">#ff80ab</color>
    <color name="md_pink_a200_color_code">#ff4081</color>
    <color name="md_pink_a400_color_code">#f50057</color>
    <color name="md_pink_a700_color_code">#c51162</color>

    <!-- deep_purple -->
    <color name="md_deep_purple_50_color_code">#ede7f6</color>
    <color name="md_deep_purple_100_color_code">#d1c4e9</color>
    <color name="md_deep_purple_200_color_code">#b39ddb</color>
    <color name="md_deep_purple_300_color_code">#9575cd</color>
    <color name="md_deep_purple_400_color_code">#7e57c2</color>
    <color name="md_deep_purple_500_color_code">#673ab7</color>
    <color name="md_deep_purple_600_color_code">#5e35b1</color>
    <color name="md_deep_purple_700_color_code">#512da8</color>
    <color name="md_deep_purple_800_color_code">#4527a0</color>
    <color name="md_deep_purple_900_color_code">#311b92</color>
    <color name="md_deep_purple_a100_color_code">#b388ff</color>
    <color name="md_deep_purple_a200_color_code">#7c4dff</color>
    <color name="md_deep_purple_a400_color_code">#651fff</color>
    <color name="md_deep_purple_a700_color_code">#6200ea</color>

    <!-- yellow -->
    <color name="md_yellow_50_color_code">#fffde7</color>
    <color name="md_yellow_100_color_code">#fff9c4</color>
    <color name="md_yellow_200_color_code">#fff59d</color>
    <color name="md_yellow_300_color_code">#fff176</color>
    <color name="md_yellow_400_color_code">#ffee58</color>
    <color name="md_yellow_500_color_code">#ffeb3b</color>
    <color name="md_yellow_600_color_code">#fdd835</color>
    <color name="md_yellow_700_color_code">#fbc02d</color>
    <color name="md_yellow_800_color_code">#f9a825</color>
    <color name="md_yellow_900_color_code">#f57f17</color>
    <color name="md_yellow_a100_color_code">#ffff8d</color>
    <color name="md_yellow_a200_color_code">#ffff00</color>
    <color name="md_yellow_a400_color_code">#ffea00</color>
    <color name="md_yellow_a700_color_code">#ffd600</color>

    <!-- orange -->
    <color name="md_orange_50_color_code">#fff3e0</color>
    <color name="md_orange_100_color_code">#ffe0b2</color>
    <color name="md_orange_200_color_code">#ffcc80</color>
    <color name="md_orange_300_color_code">#ffb74d</color>
    <color name="md_orange_400_color_code">#ffa726</color>
    <color name="md_orange_500_color_code">#ff9800</color>
    <color name="md_orange_600_color_code">#fb8c00</color>
    <color name="md_orange_700_color_code">#f57c00</color>
    <color name="md_orange_800_color_code">#ef6c00</color>
    <color name="md_orange_900_color_code">#e65100</color>
    <color name="md_orange_a100_color_code">#ffd180</color>
    <color name="md_orange_a200_color_code">#ffab40</color>
    <color name="md_orange_a400_color_code">#ff9100</color>
    <color name="md_orange_a700_color_code">#ff6d00</color>

<!-- ............................... -->
    <!-- grey -->
    <color name="md_grey_50_color_code">#fafafa</color>
    <color name="md_grey_100_color_code">#f5f5f5</color>
    <color name="md_grey_200_color_code">#eeeeee</color>
    <color name="md_grey_300_color_code">#e0e0e0</color>
    <color name="md_grey_400_color_code">#bdbdbd</color>
    <color name="md_grey_500_color_code">#9e9e9e</color>
    <color name="md_grey_600_color_code">#757575</color>
    <color name="md_grey_700_color_code">#616161</color>
    <color name="md_grey_800_color_code">#424242</color>
    <color name="md_grey_900_color_code">#212121</color>
    <color name="md_black_color_code">#000000</color>
    <color name="md_white_color_code">#ffffff</color>


    <!-- blue_grey -->
    <color name="md_blue_grey_50_color_code">#eceff1</color>
    <color name="md_blue_grey_100_color_code">#cfd8dc</color>
    <color name="md_blue_grey_200_color_code">#b0bec5</color>
    <color name="md_blue_grey_300_color_code">#90a4ae</color>
    <color name="md_blue_grey_400_color_code">#78909c</color>
    <color name="md_blue_grey_500_color_code">#607d8b</color>
    <color name="md_blue_grey_600_color_code">#546e7a</color>
    <color name="md_blue_grey_700_color_code">#455a64</color>
    <color name="md_blue_grey_800_color_code">#37474f</color>
    <color name="md_blue_grey_900_color_code">#263238</color>
<resources>
Y我是谁23
2017-02-19
知道答主
回答量:11
采纳率:0%
帮助的人:2.7万
展开全部
手机设置里面有
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式