适配安卓app适配的沉浸式app

android 沉浸式状态栏(像ios那样的状态栏与应用统一颜色样式)
这个特性是andorid4.4支持的,最少要api19才可以使用。下面介绍一下使用的方法,非常得简单:
public class MainActivity extends Activity {
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);
//透明状态栏
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
//透明导航栏
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
只要加入这两行代码,就可以实现沉浸式通知栏了。效果如图:
给大家看看这个界面的布局:
是一个垂直的流布局,但这样,其实还是有问题的,我在textView里面加一些文字,就是绿色的那一块,大家看一下效果:
大家看到了吧,文字和状态栏重叠在一起了,这肯定是不行的,此时需要添加下面的代码:
android:fitsSystemWindows=true
android:clipToPadding=true
大家看红色的那部分,加入那两行以后,界面仍然会是沉浸式的,但状态栏那部分,就不会再重叠了,像加了padding一样,如下图:
大家看图,绿色的textView和红色的一个button都被下移了,状态栏是白色的,是背景linearLayout的颜色。很明显,这也不是我们想要的,我们希望状态栏和我们放在顶部的控件是同一个颜色,同时,控件内容也不和状态栏重复,其实,只要把那两行代码放到我们顶部的控件就可以了。代码如下:
就是那两行红色的代码,放在绿色的textView上,这样,就会是下面的效果:
这就是我们想要的了。沉浸式状态栏确切的说应该叫做透明状态栏。一般情况下,状态栏的底色都为黑色,而沉浸式状态栏则是把状态栏设置为透明或者半透明。
为什么要使用沉浸式状态栏
沉浸式状态栏是从android Kitkat(Android 4.4)开始出现的,它可以被设置成与APP顶部相同的颜色,这就使得切换APP时,整个界面就好似切换到了与APP相同的风格样式一样。在内容展示上会显得更加美观。
需要注意的是,因为沉浸式状态栏是在Android4.4的时候出现的,所以只有4.4及以后的版本才能使用。实现沉浸式状态栏的方式有几种,最简单的方式就是使用系统提供的方式进行实现。
系统提供的方法
在需要实现沉浸式状态栏的Activity的布局中添加以下参数
android:fitsSystemWindows=&true&
android:clipToPadding=&true&
代码中对当前系统进行判断,符合要求(即系统是4.4或以上的版本)则设置成透明状态栏
private void initState() {
if (Build.VERSION.SDK_INT &= Build.VERSION_CODES.KITKAT) {
//透明状态栏
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
//透明导航栏
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
在Activity的setContentView()方法后面调用第二步骤的方法即可。
我在使用小米手机测试这个方法的时候出现了两种情况
当我没有在布局中设置clipToPadding为true的时候,会对应用的顶部Toolbar进行拉伸;
当我在布局中两个参数都进行设置后,顶部状态栏变成了白色。
因此,我使用了第二种方法:添加隐藏布局,动态调整布局高度适应状态栏
动态适应状态栏高度设置布局
因为第一部会出现的拉伸问题,所以我在Toolbar上方添加了一个隐藏LinearLayout,动态设置与状态栏等高,抵消Toolbar拉伸。
在xml布局的顶部添加一个隐藏布局
&LinearLayout
android:id=&@+id/ll&
android:layout_width=&fill_parent&
android:layout_height=&1dp&
android:orientation=&vertical&
android:background=&#e7abff&&!--颜色被我设置成了与Toolbar一样--&
android:visibility=&gone&&
&/LinearLayout&
代码中判断系统版本,并通过反射设置隐藏布局高度
* 动态的设置状态栏
实现沉浸式状态栏
private void initState() {
if (Build.VERSION.SDK_INT &= Build.VERSION_CODES.KITKAT) {
//透明状态栏
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
//透明导航栏
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
LinearLayout linear_bar = (LinearLayout) findViewById(R.id.ll_bar);
linear_bar.setVisibility(View.VISIBLE);
//获取到状态栏的高度
int statusHeight = getStatusBarHeight();
//动态的设置隐藏布局的高度
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) linear_bar.getLayoutParams();
params.height = statusH
linear_bar.setLayoutParams(params);
* 通过反射的方式获取状态栏高度
private int getStatusBarHeight() {
Class&?& c = Class.forName(&com.android.internal.R$dimen&);
Object obj = c.newInstance();
Field field = c.getField(&status_bar_height&);
int x = Integer.parseInt(field.get(obj).toString());
return getResources().getDimensionPixelSize(x);
} catch (Exception e) {
e.printStackTrace();
上述步骤完成后同样也是在Activity中的setContentView()后进行调用即可。
使用第三方库进行实现
在github上也有开源的库提供使用,如:
不得不说开源的力量是如此的强大。使用方法在连接里有介绍,这里就不复述了。
更多文章也可关注我的静态博客,更新相对会优先些
阅读(...) 评论()输入关键字或相关内容进行搜索
系列文章导航:
Android平台设置沉浸式状态栏显示效果
正文:应用可视区域到系统状态栏下透明显示效果,如下图所示:
此模式下应用占用全屏区域,而系统状态栏会拦截用户操作事件,此时需要预留出系统状态栏高度。
获取系统状态栏高度及沉浸式状态判断参考:。HBuilder创建的应用默认不使用沉浸式状态栏样式,需要进行如下配置开启:
打开应用的manifest.json文件,切换到代码视图,在plus -& statusbar 下添加immersed节点并设置值为true。&plus&: {
&statusbar&: {
&immersed&: true
\n如下图所示:
保存后提交App云端打包注意:
1. 真机运行不生效,需提交App云端打包后才生效;
2. 此功能仅在Android4.4及以上系统有效。
安卓手机不行啊,虽然通顶了,但是状态栏还是有渐变色或者直接就是原来的状态栏。
你的问题解决了吗,怎么弄的能告诉下吗
楼上的问题解决了吗
如何设置全透明的状态栏呢?现在离线打包的是有一点半透明的灰色
如何隐藏状态栏呢?
安卓平台原生打包请参考文档[Android平台5+SDK原生环境配置方法](http://ask./article/216)
@DCloud_SDK_骁骑
经过我实际测试,在线打包的确可以实现沉浸式,不过离线打包却无法实现。是不是该完善离线打包教程,应该有步骤没有做的。
这个沉浸式状态栏是直接改变手机状态栏的颜色还是将整个页面占到整个屏幕!
那他返回false到底是个什么意思呢?什么叫不支持?是根据什么判断的啊。我系统是5.0的
判断当前环境是否支持沉浸式状态栏
plus.navigator.isImmersedStatusbar()
如果当前支持沉浸式状态栏则返回true,否则返回false。可以使用js动态修改DOM元素的css属性来设置样式
不能像iOS一样通过更改通知栏的前景、背景色来实现吗?这样以来是不是意味着APP在Android系统中要预留通知栏高度的空白...
要回复文章请先或&nbsp&#8250&nbsp&nbsp&#8250&nbsp
Android App 沉浸式状态栏解决方案
原文出处:&伴随着 Android 5.0 发布的 Material Design,让 Android 应用告别了以前的工程师审美,迎来了全新的界面,灵动的交互,也让越来越多的 App 开始遵从 material design 设计原则,不再是以前拿着iOS设计稿,做着Android开发。本文就其中的沉浸式状态栏这一特性,描述其兼容到4.4的实现,以及一些使用中的小细节。** 建议直接看最新的解决方案&** ### 前言 在4.4之前状态栏一直是黑色的,在4.4中带来了windowTranslucentStatus&这一特性,因此可以实现给状态栏设置颜色,如下图所示,状态栏颜色不再是黑色,而是可以定制的颜色。国内将状态栏变色叫做沉浸式状态栏,时间久了,叫的人多了,大家就不再深究,默认了这种叫法。可以在知乎上看到关于这个问题的讨论:需要解决的问题4.4及其以上都是可以实现沉浸式状态栏效果的,5.0及其以上可以直接在主题中设置颜色,或者调用&Window&类中的&setStatusBarColor(int color)&来实现,这两种方式在5.0上都比较简单,但是如何兼容到4.4呢?图片背景的页面,怎样让状态栏透明或者半透明(效果如下)?使用 DrawerLayout 时,主界面实现沉浸状态栏同时,怎样保证抽屉视图也能延伸到状态栏(如下图所示),且兼容到4.4?以上就是本文要解决的问题,下面给出解决方案。解决方案1. 给状态栏设置颜色思路是:先设置状态栏透明属性;给根布局加上一个和状态栏一样大小的矩形View(色块),添加到顶上;然后设置根布局的&FitsSystemWindows&属性为&true,此时根布局会延伸到状态栏,处在状态栏位置的就是之前添加的色块,这样就给状态栏设置上颜色了。代码如下:&&&&/**
&&&&&*&设置状态栏颜色
&&&&&*&@param&activity&需要设置的activity
&&&&&*&@param&color&&&&状态栏颜色值
&&&&public&static&void&setColor(Activity&activity,&int&color)&{
&&&&&&&&if&(Build.VERSION.SDK_INT&&=&Build.VERSION_CODES.KITKAT)&{
&&&&&&&&&&&&//&设置状态栏透明
&&&&&&&&&&&&activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
&&&&&&&&&&&&//&生成一个状态栏大小的矩形
&&&&&&&&&&&&View&statusView&=&createStatusView(activity,&color);
&&&&&&&&&&&&//&添加&statusView&到布局中
&&&&&&&&&&&&ViewGroup&decorView&=&(ViewGroup)&activity.getWindow().getDecorView();
&&&&&&&&&&&&decorView.addView(statusView);
&&&&&&&&&&&&//&设置根布局的参数
&&&&&&&&&&&&ViewGroup&rootView&=&(ViewGroup)&((ViewGroup)&activity.findViewById(android.R.id.content)).getChildAt(0);
&&&&&&&&&&&&rootView.setFitsSystemWindows(true);
&&&&&&&&&&&&rootView.setClipToPadding(true);
&&&&}其中生成状态栏一样大小的矩形色块的代码如下:&&&&/**
&&&&&*&生成一个和状态栏大小相同的矩形条
&&&&&*&@param&activity&需要设置的activity
&&&&&*&@param&color&&&&状态栏颜色值
&&&&&*&@return&状态栏矩形条
&&&&private&static&View&createStatusView(Activity&activity,&int&color)&{
&&&&&&&&//&获得状态栏高度
&&&&&&&&int&resourceId&=&activity.getResources().getIdentifier(&status_bar_height&,&&dimen&,&&android&);
&&&&&&&&int&statusBarHeight&=&activity.getResources().getDimensionPixelSize(resourceId);
&&&&&&&&//&绘制一个和状态栏一样高的矩形
&&&&&&&&View&statusView&=&new&View(activity);
&&&&&&&&LinearLayout.LayoutParams&params&=&new&LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
&&&&&&&&&&&&&&&&statusBarHeight);
&&&&&&&&statusView.setLayoutParams(params);
&&&&&&&&statusView.setBackgroundColor(color);
&&&&&&&&return&statusV
&&&&}在&setContentView()&之后调用&setColor(Activity activity, int color)&方法即可。2. 图片作背景时,状态栏透明这个实现比较简单,根布局背景设置为图片,然后添加状态栏透明 Flag, 然后设置根布局的&FitsSystemWindows&属性为&true&即可。代码如下:&&&&/**
&&&&&*&使状态栏透明
&&&&&*&&p&
&&&&&*&适用于图片作为背景的界面,此时需要图片填充到状态栏
&&&&&*&@param&activity&需要设置的activity
&&&&public&static&void&setTranslucent(Activity&activity)&{
&&&&&&&&if&(Build.VERSION.SDK_INT&&=&Build.VERSION_CODES.KITKAT)&{
&&&&&&&&&&&&//&设置状态栏透明
&&&&&&&&&&&&activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
&&&&&&&&&&&&//&设置根布局的参数
&&&&&&&&&&&&ViewGroup&rootView&=&(ViewGroup)&((ViewGroup)&activity.findViewById(android.R.id.content)).getChildAt(0);
&&&&&&&&&&&&rootView.setFitsSystemWindows(true);
&&&&&&&&&&&&rootView.setClipToPadding(true);
&&&&}同样的,在&setContentView()&之后调用&setTranslucent(Activity activity)&方法即可。3. 使用 DrawerLayout 时的特殊处理注意点:使用 DrawerLayout 时,此时不能再对根布局,即 DrawerLayout 进行设置,而要针对 DrawerLayout 的内容布局进行设置,即抽屉之外的另一个布局。如下是一个典型的 DrawerLayout 的布局,其内容布局即&FrameLayout,我们需要对&FrameLayout&进行仿状态栏色块的添加、FitsSystemWindows&属性的设置。&&&?xml&version=&1.0&&encoding=&utf-8&?&&android.support.v4.widget.DrawerLayout
&&&&android:id=&@+id/drawer_layout&
&&&&xmlns:android=&/apk/res/android&
&&&&xmlns:app=&/apk/res-auto&
&&&&android:layout_width=&match_parent&
&&&&android:layout_height=&match_parent&&
&&&&&FrameLayout
&&&&&&&&android:layout_width=&match_parent&
&&&&&&&&android:layout_height=&match_parent&&
&&&&&&&&&LinearLayout
&&&&&&&&&&&&android:id=&@+id/main&
&&&&&&&&&&&&android:layout_width=&match_parent&
&&&&&&&&&&&&android:layout_height=&match_parent&
&&&&&&&&&&&&android:orientation=&vertical&&
&&&&&&&&&&&&&android.support.v7.widget.Toolbar
&&&&&&&&&&&&&&&&android:id=&@+id/toolbar&
&&&&&&&&&&&&&&&&android:layout_width=&match_parent&
&&&&&&&&&&&&&&&&android:layout_height=&?attr/actionBarSize&
&&&&&&&&&&&&&&&&android:background=&@color/colorPrimary&
&&&&&&&&&&&&&&&&app:popupTheme=&@style/ThemeOverlay.AppCompat.Light&
&&&&&&&&&&&&&&&&app:theme=&@style/ThemeOverlay.AppCompat.Dark.ActionBar&/&
&&&&&&&&&/LinearLayout&
&&&&&/FrameLayout&
&&&&&android.support.design.widget.NavigationView
&&&&&&&&android:id=&@+id/navigation&
&&&&&&&&android:layout_width=&wrap_content&
&&&&&&&&android:layout_height=&match_parent&
&&&&&&&&android:layout_gravity=&start&
&&&&&&&&app:headerLayout=&@layout/nav_header&
&&&&&&&&app:menu=&@menu/activity_main_drawer&/&&/android.support.v4.widget.DrawerLayout&还有一个需要注意的设置抽屉布局(Drawer)的&FitsSystemWindows&属性为&false,即上面布局中的&NavigationView。解决方案DrawerLayout 状态栏变色代码如下:&&&&/**
&&&&&*&为DrawerLayout&布局设置状态栏变色
&&&&&*&@param&activity&&&&&需要设置的activity
&&&&&*&@param&drawerLayout&DrawerLayout
&&&&&*&@param&color&&&&&&&&状态栏颜色值
&&&&public&static&void&setColorForDrawerLayout(Activity&activity,&DrawerLayout&drawerLayout,&int&color)&{
&&&&&&&&if&(Build.VERSION.SDK_INT&&=&Build.VERSION_CODES.KITKAT)&{
&&&&&&&&&&&&activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
&&&&&&&&&&&&//&生成一个状态栏大小的矩形
&&&&&&&&&&&&View&statusBarView&=&createStatusBarView(activity,&color);
&&&&&&&&&&&&//&添加&statusBarView&到布局中
&&&&&&&&&&&&ViewGroup&contentLayout&=&(ViewGroup)&drawerLayout.getChildAt(0);
&&&&&&&&&&&&contentLayout.addView(statusBarView,&0);
&&&&&&&&&&&&//&内容布局不是&LinearLayout&时,设置padding&top
&&&&&&&&&&&&if&(!(contentLayout&instanceof&LinearLayout)&&&&contentLayout.getChildAt(1)&!=&null)&{
&&&&&&&&&&&&&&&&contentLayout.getChildAt(1).setPadding(0,&getStatusBarHeight(activity),&0,&0);
&&&&&&&&&&&&}
&&&&&&&&&&&&//&设置属性
&&&&&&&&&&&&ViewGroup&drawer&=&(ViewGroup)&drawerLayout.getChildAt(1);
&&&&&&&&&&&&drawerLayout.setFitsSystemWindows(false);
&&&&&&&&&&&&contentLayout.setFitsSystemWindows(false);
&&&&&&&&&&&&contentLayout.setClipToPadding(true);
&&&&&&&&&&&&drawer.setFitsSystemWindows(false);
&&&&}需要注意的是,DrawerLayout&的布局只能包含两个直接子布局,一个是内容布局,一个是抽屉布局,结构如前面的示例布局所示,如果内容布局的根布局如果不是LinearLayout&需要对其子布局设置padding top值,否则仿状态栏色块会被遮挡在最下面,布局内容延伸到状态栏,如下图所示:(ps:就上图中的问题,目前的解决方案感觉并不是很好,如果你有更好的解决方案,请告诉我~)DrawerLayout 状态栏透明&&&&/**
&&&&&*&为&DrawerLayout&布局设置状态栏透明
&&&&&*&@param&activity&&&&&需要设置的activity
&&&&&*&@param&drawerLayout&DrawerLayout
&&&&public&static&void&setTranslucentForDrawerLayout(Activity&activity,&DrawerLayout&drawerLayout)&{
&&&&&&&&if&(Build.VERSION.SDK_INT&&=&Build.VERSION_CODES.KITKAT)&{
&&&&&&&&&&&&//&设置状态栏透明
&&&&&&&&&&&&activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
&&&&&&&&&&&&//&设置内容布局属性
&&&&&&&&&&&&ViewGroup&contentLayout&=&(ViewGroup)&drawerLayout.getChildAt(0);
&&&&&&&&&&&&contentLayout.setFitsSystemWindows(true);
&&&&&&&&&&&&contentLayout.setClipToPadding(true);
&&&&&&&&&&&&//&设置抽屉布局属性
&&&&&&&&&&&&ViewGroup&vg&=&(ViewGroup)&drawerLayout.getChildAt(1);
&&&&&&&&&&&&vg.setFitsSystemWindows(false);
&&&&&&&&&&&&//&设置&DrawerLayout&属性
&&&&&&&&&&&&drawerLayout.setFitsSystemWindows(false);
&&&&}同样的,在&setContentView()&之后调用上述解决方案中的方法即可。在项目中使用以上代码我整理成了一个工具类,放在 github 上:在项目中推荐这样使用,在&BaseActivity&中重写&setContentView(int layoutResID)&方法,新建一个&setStatusBar()方法,全局设置状态栏颜色,因为一般 App 大部分界面状态栏都是主题色。public&class&BaseActivity&extends&AppCompatActivity&{
&&&&@Override
&&&&public&void&setContentView(int&layoutResID)&{
&&&&&&&&super.setContentView(layoutResID);
&&&&&&&&setStatusBar();
&&&&protected&void&setStatusBar()&{
&&&&&&&&StatusBarUtils.setColor(this,&getResources().getColor(R.color.colorPrimary));
&&&&}}当子类 Activity 的状态栏需要特殊处理时,比如设置不同的颜色,或者设置图片为背景时,重写父类的&setStatusBar()&方法即可,例如:public&class&ImageStatusBarActivity&extends&BaseActivity&{
&&&&@Override
&&&&protected&void&onCreate(Bundle&savedInstanceState)&{
&&&&&&&&super.onCreate(savedInstanceState);
&&&&&&&&setContentView(R.layout.activity_image_status_bar);
&&&&@Override
&&&&protected&void&setStatusBar()&{
&&&&&&&&StatusBarUtils.setTranslucent(this);
&&&&}对 DrawerLayout 布局使用时,需要注意一点,因为方法是在&setContentView()&之后立即调用的,所以传进来的&DrawerLayout&要通过&findViewById()&传进来。如果传入在&setContentView()&之后通过&findViewById()&得到的&DrawerLayout, 则会造成空指针异常。&StatusBarUtils.setColorForDrawerLayout(this,&(DrawerLayout)&findViewById(R.id.drawer_layout),&getResources()
&&&&&&&&&&&&&&&&.getColor(R.color.colorPrimary));源码和Demo下载效果在前文中都有截图,就不多放了。如文章中有疏漏的地方,请联系我或在评论里告知。
上一篇: 今天主要介绍下项目中运用到的UI框架,废话不多说,直接讲主要源码。 首先,将每个页面都看成是ListView的实现,每个Item是可以自定义布局View,自定义Model,这样才能呈现出不同
下一篇: 1.View的绘制流程分几步,从哪开始?哪个过程结束以后能看到view? 答:从ViewRoot的performTraversals开始,经过measure,layout,draw 三个流程。draw流程结束以后就可以在屏幕上看到view了。 2.view的测量宽高和实际宽高有区别吗? 答:基本上百分之99的情经验1476 米
在线时间3 小时
版本6.12.15
积分 1370, 距离下一级还需 630 积分
积分 1370, 距离下一级还需 630 积分
机型小米手机3/4 WCDMA版
签到次数156
MIUI版本6.12.15
目前只支持小米自带的系统应用吧,希望能支持下常用的安卓APP,比如QQ,微信之类的~
可以做到么?
分享到微信朋友圈
打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。
已关联6个BUG提交人处理状态
经验195 米
在线时间44 小时
积分 250, 距离下一级还需 250 积分
积分 250, 距离下一级还需 250 积分
机型小米手机3/4 WCDMA版
签到次数24
MIUI版本6.7.7
通过手机发布
不能,只支持官方应用,建议用变色龙通知栏软件自己设置沉浸式通知栏
经验9161 米
在线时间97 小时
版本7.5.10
机型红米Note3 全网通
签到次数65
MIUI版本7.5.10
通过手机发布
听说可以支持QQ(不过实测,不行)
MIUI三周年
MIUI三周年纪念勋章
Copyright (C) 2017 MIUI
京ICP备号 | 京公网安备34号 | 京ICP证110507号

我要回帖

更多关于 安卓7.0沉浸式状态栏 的文章

 

随机推荐