android沉浸式状态栏,android沉浸式状态栏 图片颜色

如何实现Android沉浸式状态栏

注意引入相关依赖：

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站建设、网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的袁州网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

Java代码

compile 'com.android.support:appcompat-v7:22.2.1'

compile 'com.android.support:support-v4:22.2.1'

compile 'com.android.support:design:22.2.0'

（一）colors.xml 和 styles.xml

首先我们定义几个颜色：

res/values/color.xml

XML/HTML代码

?xml version="1.0" encoding="utf-8"?

resources

color name="primary"#FF03A9F4/color

color name="primary_dark"#FF0288D1/color

color name="status_bar_color"@color/primary_dark/color

/resources

下面定义几个styles.xml

注意文件夹的路径：

values/styles.xml

XML/HTML代码

resources

style name="BaseAppTheme" parent="Theme.AppCompat.Light.NoActionBar"

!-- Customize your theme here. --

item name="colorPrimary"@color/primary/item

item name="colorPrimaryDark"@color/primary_dark/item

item name="colorAccent"#FF4081/item

/style

!-- Base application theme. --

style name="AppTheme" parent="@style/BaseAppTheme"

/style

/resources

values-v19

XML/HTML代码

resources

style name="AppTheme" parent="@style/BaseAppTheme"

item name="android:windowTranslucentStatus"true/item

/style

/resources

ok，这个没撒说的。注意我们的主题是基于NoActionBar的，android:windowTranslucentStatus这个属性是v19开始引入的。

（二）布局文件

activity_main.xml

XML/HTML代码

android.support.v4.widget.DrawerLayout

xmlns:android=""

xmlns:app=""

xmlns:tools=""

android:layout_width="match_parent"

android:layout_height="match_parent"

LinearLayout

android:id="@+id/id_main_content"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android.support.v7.widget.Toolbar

android:id="@+id/id_toolbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="?attr/colorPrimary"

android:fitsSystemWindows="true"

app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/

TextView

android:id="@+id/id_tv_content"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1"

android:gravity="center"

android:text="HelloWorld"

android:textSize="30sp"/

/LinearLayout

android.support.design.widget.NavigationView

android:id="@+id/id_nv_menu"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="start"

android:fitsSystemWindows="true"

app:headerLayout="@layout/header_just_username"

app:menu="@menu/menu_drawer"

/

/android.support.v4.widget.DrawerLayout

DrawerLayout内部一个LinearLayout作为内容区域，一个NavigationView作为菜单。

注意下Toolbar的高度设置为wrap_content。

然后我们的NavigationView中又依赖一个布局文件和一个menu的文件。

header_just_username.xml

XML/HTML代码

?xml version="1.0" encoding="utf-8"?

RelativeLayout xmlns:android=""

android:layout_width="match_parent"

android:layout_height="192dp"

android:background="?attr/colorPrimaryDark"

android:orientation="vertical"

android:padding="16dp"

android:fitsSystemWindows="true"

android:theme="@style/ThemeOverlay.AppCompat.Dark"

TextView

android:id="@+id/id_link"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_marginBottom="16dp"

android:text=""/

TextView

android:id="@+id/id_username"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_above="@id/id_link"

android:text="Zhang Hongyang"/

ImageView

android:layout_width="72dp"

android:layout_height="72dp"

android:layout_above="@id/id_username"

android:layout_marginBottom="16dp"

android:src="@mipmap/ic_launcher"/

/RelativeLayout

menu的文件就不贴了，更加详细的可以去参考Android 自己实现 NavigationView [Design Support Library(1)]。

大体看完布局文件以后，有几个点要特别注意：

• ToolBar高度设置为wrap_content

• ToolBar添加属性android:fitsSystemWindows="true"

• header_just_username.xml的跟布局RelativeLayout，添加属性android:fitsSystemWindows="true"

android:fitsSystemWindows这个属性，主要是通过调整当前设置这个属性的view的padding去为我们的status_bar留下空间。

根据上面的解释，如果你不写，那么状态栏和Toolbar就会有挤一块的感觉了，类似会这样：

安卓里哪些音乐播放器是沉浸式状态栏

注意！两种方法的区别：

第一种：为顶部栏跟随当前activity的布局文件的背景的颜色，使用方便，不过也有点问题就是，如果有底部虚拟导航键的话，导航键的背景跟顶部的颜色一样，比如：

第二种：是通过设置顶部栏的颜色来显示的，可以解决第一种的不足，比如：

第一种使用方法：

第一、首先在values、values-v19、values-v21文件夹下的styles.xml都设置一个 Translucent System Bar 风格的Theme，如下图：

values/style.xml：

style name="TranslucentTheme" parent="AppTheme"

!--在Android 4.4之前的版本上运行，直接跟随系统主题--

/style123

values-v19/style.xml：

style name="TranslucentTheme" parent="Theme.AppCompat.Light.DarkActionBar"

item name="android:windowTranslucentStatus"true/item

item name="android:windowTranslucentNavigation"true/item

/style1234

values-v21/style.xml：

style name="TranslucentTheme" 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

/style123456

第二、在清单文件中配置需要沉浸式状态栏的activity加入theme

activity android:name=".ImageActivity" android:theme="@style/TranslucentTheme" /

activity android:name=".ColorActivity" android:theme="@style/TranslucentTheme" /12

第三、在Activity的布局文件中的跟布局加入逗android:fitsSystemWindows=地true地地，但是，这里需要区分一下，就是背景是图片还是纯色：

1.当背景为图片时，布局可以这么写：

?xml version="1.0" encoding="utf-8"?

RelativeLayout xmlns:android=""

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/imgs_bj"

android:fitsSystemWindows="true"

/RelativeLayout12345678

效果：

2.当背景为纯色，我们需要对布局划分一下，标题布局与内容布局，先把根布局背景设置成标题布局的背景色，然后标题背景色可以不用设置直接使用根布局的背景色，最后内容布局背景色设置为白色

?xml version="1.0" encoding="utf-8"?

LinearLayout xmlns:android=""

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@color/colorPrimary" //根布局背景设置成逗标题布局地想要的颜色

android:fitsSystemWindows="true"

android:orientation="vertical"

!--标题布局--

RelativeLayout

android:layout_width="match_parent"

android:layout_height="55dp"

android:background="@color/color_31c27c"

TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:text="这是标题"

android:textColor="@android:color/white"

android:textSize="20sp" /

/RelativeLayout

!--内容布局--

LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@android:color/white" //内容区域背景设置成白色

android:gravity="center"

android:orientation="vertical"

Button

android:layout_marginTop="120dp"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="8dp"

android:text="显示信息"

android:onClick="showMsg"

/

/LinearLayout

/LinearLayout

如何动态兼容沉浸式状态栏模式

由于各系统版本的限制，沉浸式状态栏对系统有要求（Android4.4及以上、iOS7.0及以上），如果要兼容各系统版本，需要动态判断当前环境是否支持沉浸式状态栏以及系统状态栏的高度：

使用5+API

- 判断当前环境是否支持沉浸式状态栏

plus.navigator.isImmersedStatusbar()

如果当前支持沉浸式状态栏则返回true，否则返回false。

- 获取当前系统状态栏高度

plus.navigator.getStatusbarHeight()

获取系统状态栏高度，Number类型。

其单位是逻辑像素值，即css中可直接使用的像素值，可能存在小数点。

实际用法参考HelloH5应用的“plus/doc.html”：

// 创建加载内容窗口

var topoffset='45px';

if(plus.navigator.isImmersedStatusbar()){// 兼容immersed状态栏模式

// 获取状态栏高度并根据业务需求处理，这里重新计算了子窗口的偏移位置

topoffset=(Math.round(plus.navigator.getStatusbarHeight())+45)+'px';

}

// 使用偏移位置创建子窗口

wc=plus.webview.create(null,'doccontent',{top:topoffset,bottom:'0px',bounce:'vertical',bounceBackground:'#FFFFFF'});

通过userAgent判断

5+API需要在plusready事件后才能调用，通常此事件在DOM加载渲染后才会触发，无法再渲染前根据不同的状态来设置css。

为了解决此问题，在支持5+API运行环境的userAgent中特定字段Html5Plus/1.0后添加Immersed标识，如下：

"Html5Plus/1.0 (Immersed/30)"

其中Immersed/后的30表示状态栏的高度，单位为逻辑像素值。

可以使用正则表达式进行获取：

var immersed = 0;

var ms=(/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userAgent);

if(msms.length=3){ // 当前环境为沉浸式状态栏模式

immersed=parseFloat(ms[2]);// 获取状态栏的高度

}

immersed值如果大于0则表示当前环境支持沉浸式状态栏。

获取状态栏高度后，可以使用js动态修改DOM元素的css属性来设置样式，如设置界面头区域的顶部内边距为状态栏的高度（避免系统状态栏与界面头重叠），示例如下：

var t=document.getElementById('header');

tt.style.paddingTop=immersed+'px';

具体项目中可根据界面设计，灵活使用immersed值来动态适配各种效果。

完整用法可参考HelloH5应用中的“js/immersed.js”

Android QQ沉浸式状态栏效果是怎么实现的

这个特性是andorid4.4支持的，最少要api19才可以使用。下面介绍一下使用的方法，非常得简单： public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceSta

Android 沉浸式/透明式状态栏、导航栏

Android 从4.4开始引进透明状态栏和导航栏的概念，并且在5.0进行了改进，将透明变成了半透明的效果。虽然此特性最早出现在ios，但不否认效果还是很赞的。

至于4.4以下的手机，就不要考虑此特性了，好在4.4以下的手机份额已经非常小了。

我们先来看一下透明状态栏的实现，两种常见效果图如下：

虚拟导航栏并不是所有的手机都有，华为的手机多比较常见，就是上图屏幕底部按钮那块区域。设置导航栏和状态栏类似：

这是官方的解释，大致意思就是我们在布局的最外层设置 android:fitsSystemWindows="true"，会在屏幕最上方预留出状态栏高度的padding。

由于fitsSystemWindows属性本质上是给当前控件设置了一个padding，所以我们设置到根布局的话，会导致状态栏是透明的，并且和窗口背景一样。

但是多数情况，我们并不在根布局设置这个属性，我们想要的无外乎是让内容沉浸在状态栏之中。所以我们经常设置在最上端的图片背景、Banner之类的，如果是Toolbar的，我们可以使用一层LinearLayout包裹，并把这个属性设置给LinearLayout，这样就可以避免Toolbar的内容下沉了。如：

上述方法可以解决普通页面的透明式状态栏需求，如有复杂需求可以参考下面这些：

Android 系统状态栏沉浸式/透明化完整解决方案

Android 沉浸式状态栏的实现

Android沉浸式状态栏(透明状态栏)最佳实现

还有开源库推荐： ImmersionBar

Android 沉浸式状态栏

沉浸式状态栏是一种比较常见的UI风格，接下来就去看看怎么实现它。

在styles.xml里增加TranslucentTheme，我们这里minSdkVersion 是以21为准，低于安卓5.0以下的手机很少了，就不适配了。

对于这种没有标题栏，图片沉浸到状态栏的效果，我们已经实现了。如果是有标题栏呢？比如加个Toolbar会变成下面这样：

对于有标题的页面，我们希望状态栏颜色跟标题栏一样就行了，不希望标题栏上移跟状态栏重叠，我们可以在布局文件根视图设置如下属性，这个相当于设置了个padding让状态栏下移，当然，为了让状态栏颜色跟标题栏一样，你还需要给根视图设置一样的背景色（因为状态栏实际是透明的）。

运行看看,已经实现了我们的要求。