React Native 实现 类似京东 的 沉浸式状态栏和搜索栏 其原理其实就是在要 隐藏 部分的那个View 前面加入 StatusBar 代码! 代码如下: <StatusBar animated={true} //指定状态栏的变化是否应以动画形式呈现.目前支持这几种样式:backgroundColor, barStyle和hidden hidden={false} //是否隐藏状态栏. backgroundColor={'transparent'} //状态栏的背景色 transluce

前言: Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体验.而Android 5.0之后谷歌又提出了 ColorPalette 的概念,让开发者可以自己设定系统区域的颜色,使整个 App 的颜色风格和系统的颜色风格保持统一.今天学习总结一下如何实现Android 4.4以上全屏沉浸式透明状态栏效果.先看下预期效果: 首先现分清楚哪部分是状态栏,哪部分是导

注:公司开发任务适配是在4.4版本之上进行,所以此适配仅在4.4之上进行测试. 1.主要使用了第三方的开源项目SystemBarTint,github:https://github.com/jgilfelt/SystemBarTint 2.根据SystemBarTint自带sample进行研究,主要步骤如下: 在Activity中加入如下代码: public class MainActivity extends BaseActivity { @Override public void setCo

在Android 5.0之后引入了MD风格,从而状态栏沉浸也成为了一种设计习惯.而停留在之Android L之前的Android系统则不能直接实现沉浸式,这里就介绍一下如何实现Android K系列的伪沉浸式. 关于沉浸式效果,这里随便贴几张图吧 Android L效果图  Android 4.2效果图 可以看出在Android K系列中,状态栏是渐变的效果 下面开始讲解如何实现上图的效果,在此就不赘述Android L或以上的沉浸式的效果实现了,在xml上配置几个属性就可以了 题外话:这篇文章

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由brzhang发表于云+社区专栏 做APP开发的过程中,有很多时候,我们需要实现类似于下面这种沉浸式的体验. 沉浸式体验 一开始接触的时候,似乎大家都会觉这种体验实现起来,会比较困难.难点在于: 头部的背景图在推上去的过程中,慢慢的变得不可见了,整个区域的颜色变成的暗黑色,然后标题出现了. StatusBar变的透明,且空间可以被利用起来,看我们的图片就顶到了顶 了. 我们的viewpager推到actionbar的下方的时候,就

提示:讲解的该例实现是 FragmentTabHost + Fragment 实现: 1.示例效果图: 2.场景需求: 如示例图所示,在首页实现轮播图的沉浸,而 “发现” 和“我的”页是标题的沉浸. 3.实现思路: (1) 使Activity状态栏透明,并且让布局进入到状态栏后面(style 要求是NoActionBar,在清单文件中配置即可) (2)对不同样式需求的Fragment,进行不同的操作 样例中只有轮播图和文字标题两种样式: ①轮播图:实现(1),就可以实现效果 ②文字标题:可代码获

1. manifest.json的plus节点里面配置 "plus": { "statusbar": {"immersed": true}, 2.代码里面设置plusReady或者onload方法里面 window.onload=function(){ var immersed = 0; var ms=(/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userA

//隐藏状态栏if (ApiInformation.IsTypePresent(typeof(StatusBar).ToString())) { StatusBar statusBar = StatusBar.GetForCurrentView(); await statusBar.HideAsync(); } using namespace Windows::UI; using namespace Windows::Foundation::Metadata; using namespace W

沉浸式状态栏(Immersive Mode)和透明状态栏(Translucent Bar). 这两个概念很多地方的解释都不是很清晰,所以导致很多人都各有各的认识.所以这里我也有一个自己的认识,笔者认为沉浸式状态栏也可以说是全屏模式,即隐藏状态栏与导航栏. 而透明状态栏是不隐藏状态栏但是它所呈现的是透明的.因为默认情况下状态栏都是黑底白字.而我们现在要实现的就是透明状态栏下的全屏模式.话不多说,看效果:   1.png   2.png 对比这两张图的状态栏效果可以看出.第一张图效果对界面来说不是很

使用StatusBar即可实现沉浸式,但是必须把背景色设置为透明.否则如果有不同页面的头部颜色不一样的话,导航栏的颜色动画会很怪异,不会是跟着页面一起动画. <StatusBar barStyle='light-content' backgroundColor='rgba(0,0,0,0)' translucent={true}></StatusBar>

应用占用全屏区域,而系统状态栏需要预留出系统状态栏高度. HBuilder创建的应用默认不使用沉浸式状态栏样式,需要进行如下配置开启:打开应用的manifest.json文件,切换到代码视图,在plus -> statusbar 下添加immersed节点并设置值为true. "plus": { "statusbar": { "immersed": true } } 保存后提交App云端打包 注意事项: 1.真机运行可能不生效,需提交打包后

1.需要在mainfest.json plus对象里添加 "statusbar": { "immersed": "true", "style":"dark" } 2.新建immersed.js 注意 在里边不适用plus,因为plus.ready之后再js改变样式 必然造成页面闪烁跳动 (function(w){ document.addEventListener('plusready',function(

Flutter中如何实现沉浸式透明Statusbar状态栏效果? 如下图:状态栏是指android手机顶部显示手机状态信息的位置.android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titleBar能够和状态栏融为一体,增加沉浸感. 如上图Flutter状态栏默认为黑色半透明,那么如何去掉这个状态栏的黑色半透明背景色,让其和标题栏颜色一致,通栏沉浸式,实现如下图效果呢?且继续看下文讲述. 在flutter项目目录下找到android主入口页面MainActivity.k

无意间了解到沉浸式状态栏,感觉贼拉的高大上,于是就是试着去了解一下,就有了这篇文章.下面就来了解一下啥叫沉浸式状态栏.传统的手机状态栏是呈现出黑色条状的,有的和手机主界面有很明显的区别.这一样就在一定程度上牺牲了视觉宽度,界面面积变小.Google从android kitkat(Android 4.4)开始,给我们开发者提供了一套能透明的系统ui样式给状态栏和导航栏,这样的话就不用向以前那样每天面对着黑乎乎的上下两条黑栏了,还可以调成跟Activity一样的样式,形成一个完整的主题,和IOS7.

一.ToolBar 1.在build.gradle中添加依赖,例如: compile 'com.android.support:appcompat-v7:23.4.0' 2.去掉应用的ActionBar.可以是修改主题theme为"NoActionBar",例如: <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> 或者不修改主题为"NoAct

转载:http://blog.csdn.net/lmj623565791/article/details/48649563/ 一.概述 近期注意到QQ新版使用了沉浸式状态栏,ok,先声明一下:本篇博客效果下图: 关于这个状态栏变色到底叫「Immersive Mode」/「Translucent Bars」有兴趣可以去 为什么在国内会有很多用户把 ｢透明栏｣(Translucent Bars)称作 ｢沉浸式顶栏｣?上面了解了解,请勿指点我说的博文标题起得不对,thx. 恩,接下来正题. 首先只有大

转载:http://www.jianshu.com/p/34a8b40b9308 前言 网上已经有很多有关于系统状态栏的解决方案,这篇文章也不会有什么新奇的解决方案,都是本人经过自己试验,统计提炼出来的相对靠谱的一套解决方案.如果是android大牛可以忽略本文,怕让您贱笑.只面向小白,帮助小白减少摸索的时间. 关于术语 网上有很多争论: 你这状态栏是变色龙状态栏,不是沉浸式的这应该是沉浸式的状态栏吧,系统栏与actionbar颜色设为一致 我只想说去你妹的,老子只要自己的app的状态栏能和主题

6.3 突破传统,4k大屏的沉浸式体验 前言 能够在 4K 的页面上表演,对设计师和前端开发来说,即是机会也是挑战,我们可以有更大的空间设计宏观的场景,炫酷的转场,让观众感受影院式视觉体验,但是,又必须面对因为画布变大带来的性能问题,以及绞尽脑汁实现很多天马行空的的想法.下面是这次双11媒体大屏开发中我们的一些设计和思路. 1. 3D动感跑道 当逍遥子零点倒数5,4,3,2,1,0!激昂音乐奏起,媒体中心大屏幕跳跃出一个动感十足的页面,黄橙橙的 GMV 数字蹭蹭往上长,跳跃的翻牌器下有个不断向前

今天产品来看进度,说ios状态栏可以改颜色,以前竟然也没注意过,看了美团 ,扣扣的实现, 才注意到.着手开始做.网上借鉴了点 ,各种乱,整理了下  .希望可以帮到大家 . [转载请标明出处] 前提:  效果在4.4及之上版本     5.0据说不一样  待补充 Mi3 4.4版本   完美实现 , 其他版本待测 效果图如下:              

其实设置比较简单,我用了小米和htc的几款机型都可以用. 主要代码就是这个(注意要在Activity的setContentView之前调用才行) /** * 开启沉浸式状态栏 * */ public static void openImmerseStatasBarMode(Activity activity) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { Window window = activity.getWindo