-
2017-07-05 15:04:31
沉浸式状态栏(Immersive Mode)和透明状态栏(Translucent Bar)。
这两个概念很多地方的解释都不是很清晰,所以导致很多人都各有各的认识。所以这里我也有一个自己的认识,笔者认为沉浸式状态栏也可以说是全屏模式,即隐藏状态栏与导航栏。 而透明状态栏是不隐藏状态栏但是它所呈现的是透明的。因为默认情况下状态栏都是黑底白字。而我们现在要实现的就是透明状态栏下的全屏模式。话不多说,看效果:
对比这两张图的状态栏效果可以看出。第一张图效果对界面来说不是很美观,但是第二个效果就非常美观了。下面我们就来实现。
使用cordova实现就需要cordova-plugin-statusbar这个插件,我们需要对此插件进行一些修改即可实现我们想要的效果。
在项目路径->platforms->android->src->org->apache->cordova->statusbar中找到StatusBar.java文件。
然后修改run方法即可:public void run() { // Clear flag FLAG_FORCE_NOT_FULLSCREEN which is set initially // by the Cordova. Window window = cordova.getActivity().getWindow(); //添加内容start window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); window.setStatusBarColor(Color.TRANSPARENT); window.setNavigationBarColor(Color.TRANSPARENT); //添加内容end window.clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN); // Read 'StatusBarBackgroundColor' from config.xml, default is #000000. //注释默认的设置背景色的方法 //setStatusBarBackgroundColor(preferences.getString("StatusBarBackgroundColor", "#000000")); }
更多相关内容 -
Axure设置选中状态按钮选选中状态修改及多个按钮一次只能选中一个的效果
2020-08-08 22:09:19在axure中设置按钮的选中状态,悬停状态以及按钮组设置选中状态,一次只能选中一个。具体实现效果如图 第一种,简单设置按钮的选中,悬停等样式。首先选中按钮,点击新建交互样式-鼠标悬停。然后点击更多样式,即可...在axure中设置按钮的选中状态,悬停状态以及按钮组设置选中状态,一次只能选中一个。具体实现效果如图
第一种,简单设置按钮的选中,悬停等样式。首先选中按钮,点击新建交互样式-鼠标悬停。然后点击更多样式,即可看到在这里可以设置鼠标悬停,鼠标按下,选中,禁用,获取焦点共5种状态下的样式。根据需要进行设置就可以了。
第二种,设置多个按钮组成的按钮组一次只能选中一个,选中样式和上面设置一样。设置完每个按钮的选中样式以后,找到第一个按钮,点击新建交互-单机时-设置选中。然后选择按钮组中的所有按钮,将需要设置选中的按钮的值设为真,其余按钮的值设为false,其他几个按钮也是相同的操作。设置好以后f5预览就可以看到效果啦
-
Android实现沉浸式状态栏效果
2018-06-05 16:36:30关于沉浸式状态栏,给大家推荐一个非常好的博文android标题栏、状态栏图标文字颜色及背景动态变化 另外说明下,沉浸式状态栏的实现仅适用于 android 4.4及以上版本,4.4以下的就不要想了。 1. 实现秀明状态栏...关于沉浸式状态栏,给大家推荐一个非常好的博文android标题栏、状态栏图标文字颜色及背景动态变化
另外说明下,沉浸式状态栏的实现仅适用于 android 4.4及以上版本,4.4以下的就不要想了。
1. 实现秀明状态栏常规方法//是否使用特殊的标题栏背景颜色,android5.0以上可以设置状态栏背景色,如果不使用则使用透明色值 protected boolean useThemestatusBarColor = false; //是否使用状态栏文字和图标为暗色,如果状态栏采用了白色系,则需要使状态栏和图标为暗色,android6.0以上可以设置 protected boolean useStatusBarColor = true; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); setStatusBar(); } protected void setStatusBar() { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {//5.0及以上 View decorView = getWindow().getDecorView(); int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE; decorView.setSystemUiVisibility(option); //根据上面设置是否对状态栏单独设置颜色 if (useThemestatusBarColor) { getWindow().setStatusBarColor(getResources().getColor(R.color.colorTheme));//设置状态栏背景色 } else { getWindow().setStatusBarColor(Color.TRANSPARENT);//透明 } } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {//4.4到5.0 WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes(); localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags); } else { Toast.makeText(this, "低于4.4的android系统版本不存在沉浸式状态栏", Toast.LENGTH_SHORT).show(); } if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && useStatusBarColor) {//android6.0以后可以对状态栏文字颜色和图标进行修改 getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR); } }
在Activity布局的根节点处加上 android:fitsSystemWindows=”true” 属性就可以了,要不布局会跑到状态栏和导航栏下面,与导航栏和状态栏重叠,这当然不是我们希望的。
效果图如下:
此时,
useThemestatusBarColor = false,说明不设置状态栏背景色,为透明
useStatusBarColor = true,使状态栏图标和文字变暗,这个很有必要,不设置为true的话,由于状态栏字体颜色为白色,和状态栏背景色重叠,分不清。上面设置状态栏文字颜色和图标为暗色主要采用了以下两个标志:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && useStatusBarColor) {//android6.0以后可以对状态栏文字颜色和图标进行修改 getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR); }
2. 同一个Activity包含多个Fragment时,如何实现不同fragment的状态栏背景和文字颜色不一样
实现以下效果
(1).当标题栏背景为图片时,此时需要背景图片填充到状态栏的效果,如左图
(2).当标题栏背景不是图片,此时不需要背景图片填充状态栏的效果,如右图
暂时不考虑标题栏中既有背景图,又有背景色的情况,当然也可以实现,将左图中的标题栏的高度设置高一点即可(右图中的状态栏背景既有图片又有背景色仅仅是为了显示区分)。
就是设置了状态栏为暗色后,还得设置回来,这其实主要靠下面两个flag标识,结全上面的两个flag标识就能实现。
//设置状态栏文字颜色及图标为浅色 getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
-
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
前面说过了,是为了让视图能延伸到状态栏区域,使状态栏悬浮在视图布局之上。 -
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
保持整个View稳定, 常和控制System UI悬浮, 隐藏的Flags共用, 使View不会因为System UI的变化而重新layout。
贴出MainActivity中的代码:public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener, ViewPager.OnPageChangeListener { private static final String TAG = "MainActivity"; public static final int PAGE_ONE = 0; public static final int PAGE_TWO = 1; public static final int PAGE_THREE = 2; public static final int PAGE_FOUR = 3; private RadioGroup rgTabBar; private RadioButton rbChannel; private RadioButton rbMessage; private RadioButton rbBetter; private RadioButton rbSetting; private ViewPager viewpager; private MyFragmentPagerAdapter mAdapter; //是否使用特殊的标题栏背景颜色,android5.0以上可以设置状态栏背景色,如果不使用则使用透明色值 protected boolean useThemestatusBarColor = true; //是否使用状态栏文字和图标为暗色,如果状态栏采用了白色系,则需要使状态栏和图标为暗色,android6.0以上可以设置 protected boolean useStatusBarColor = true; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager()); initViews(); } private void initViews() { rgTabBar = findViewById(R.id.rg_tab_bar); rbChannel = findViewById(R.id.rb_channel); rbMessage = findViewById(R.id.rb_message); rbBetter = findViewById(R.id.rb_better); rbSetting = findViewById(R.id.rb_setting); viewpager = findViewById(R.id.viewpager); rgTabBar.setOnCheckedChangeListener(this); viewpager.setAdapter(mAdapter); viewpager.setCurrentItem(0); viewpager.addOnPageChangeListener(this); rbChannel.setChecked(true); } @Override public void onCheckedChanged(RadioGroup group, int checkedId) { switch (checkedId) { case R.id.rb_channel: viewpager.setCurrentItem(PAGE_ONE); setStatusBar(R.color.colorWhite); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {//build.gradle中compileSdkVersion>=23 // 实现状态栏图标和文字颜色为暗色 getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR); } break; case R.id.rb_message: viewpager.setCurrentItem(PAGE_TWO); setStatusBar(R.color.colorRed); getWindow().getDecorView().setSystemUiVisibility( View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE); break; case R.id.rb_better: setStatusBar(R.color.colorGreen); getWindow().getDecorView().setSystemUiVisibility( View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE); break; case R.id.rb_setting: viewpager.setCurrentItem(PAGE_FOUR); setStatusBar(R.color.colorBlue); getWindow().getDecorView().setSystemUiVisibility( View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE); break; } } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { } @Override public void onPageScrollStateChanged(int state) { if (state == ViewPager.SCROLL_STATE_SETTING) { int currentItemPosition = viewpager.getCurrentItem(); Log.w(TAG, "onPageScrollStateChanged: currentItemPosition::" + currentItemPosition); switch (currentItemPosition) { case PAGE_ONE: rbChannel.setChecked(true); break; case PAGE_TWO: rbMessage.setChecked(true); break; case PAGE_THREE: rbBetter.setChecked(true); break; case PAGE_FOUR: rbSetting.setChecked(true); break; } } } //****************************************************************************************** protected void setStatusBar(int colorId) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {//5.0及以上 View decorView = getWindow().getDecorView(); int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE; decorView.setSystemUiVisibility(option); //根据上面设置是否对状态栏单独设置颜色 if (useThemestatusBarColor) { getWindow().setStatusBarColor(getResources().getColor(colorId));//设置状态栏背景色 } else { getWindow().setStatusBarColor(Color.TRANSPARENT);//透明 } } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {//4.4到5.0 WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes(); localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags); } else { Toast.makeText(this, "低于4.4的android系统版本不存在沉浸式状态栏", Toast.LENGTH_SHORT).show(); } if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && useStatusBarColor) {//android6.0以后可以对状态栏文字颜色和图标进行修改 getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR); } } }
另外特别强调下上述代码暂时不适用于底部带有导航栏的手机,如果对上述代码不做处理的话那么,带有底部导航栏手机底部导航按钮会和navigationbar重叠。
如过你的手机底部带有导航栏的话,还是强烈推荐你看那篇非常好的博文android标题栏、状态栏图标文字颜色及背景动态变化
好了,上述内容就是我记录的对于“沉浸式状态栏”的认识,也是为了加深理解和掌握其用法。对于不含底部带有导航栏的手机上述代码足够实现常用的沉浸式效果了。后续待我会继续参照大牛的博客,完善此篇文章。小伙伴如果有疑问的话,请留言,我们共同学习!!!
-
-
Android studio技术之透明状态栏效果的实现
2017-04-17 14:46:46透明状态栏的效果有很多的app都有用到,效果图如下:上图中是qq的消息界面,可以看到顶部的状态栏是透明化的。接下来是实现步骤: 首先在创建一个类,这里命名为ImmersiveStatusbar.java,代码实现如下: package ...透明状态栏的效果有很多的app都有用到,效果图如下:
上图中是qq的消息界面,可以看到顶部的状态栏是透明化的。
接下来是实现步骤:
- 首先在创建一个类,这里命名为ImmersiveStatusbar.java,代码实现如下:
package com.xiaoke.accountsoft.util; import android.app.ActionBar; import android.graphics.Color; import android.os.Build; import android.view.View; import android.view.Window; /** * Created by zouqi on 2017/4/15. */ public class ImmersiveStatusbar { private static ImmersiveStatusbar immersiveStatusbar; // 构造函数私有化 private ImmersiveStatusbar() { } // TODO: 2017/4/17 单例模式 public static ImmersiveStatusbar getInstance() { if (immersiveStatusbar == null) { // 加锁提高使用效率 synchronized (ImmersiveStatusbar.class) { if (immersiveStatusbar == null) { immersiveStatusbar = new ImmersiveStatusbar(); } } } return immersiveStatusbar; } /*** * 状态栏透明化 * @param window Window对象 * @param actionBar ActionBar对象 */ public void Immersive(Window window, ActionBar actionBar) { if (Build.VERSION.SDK_INT >= 21) { View view = window.getDecorView(); // TODO: 2017/4/13 两个FLAG一起使用表示会让应用的主体内容占用系统状态栏的时空间 int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE; view.setSystemUiVisibility(option); // 将状态栏设置成透明色 window.setStatusBarColor(Color.TRANSPARENT); } // 将ActionBar隐藏 actionBar.hide(); } }
上述代码较为简单,均有注释,理解起来不难。
但是需要注意的是我这里先进行了一层if判断,只有系统版本大于或等于5.0的时候才会执行上面的关键代码
另外注意:
调用上图所示标注的方法时需要导入V7包,不然会找不到该方法。
导入很简单,在gradle文件中添加依赖即可,如下图:
- 然后在你的活动类里面执行如下图所示的方法即可:
即活动设置使用的布局文件之后紧接方法:
ImmersiveStatusbar.getInstance().Immersive(getWindow(), getActionBar());
这里要传入两个参数,一个是Window对象和ActionBar对象。
- 最后运行项目效果图如下所示:
透明状态栏效果成功的实现了。
================================================================
每天进步一点点!加油!
-
Android内容覆盖透明状态栏下实现全屏模式下带状态栏的效果
2016-07-26 16:43:28不过最近效果图有一种效果要求 是在状态栏部分也显示内容部分, 像下面这样 下载地址 github传送门 我是用全屏模式实现的 首先activity的setContentView之前设置 状态栏模式为透明if (Build.VERSION.SDK_INT ... -
多个按钮,点击后切换选中状态效果
2018-11-14 09:55:50<ul class="buttonList"> <li class="ative"></li&...active是选中状态的样式。只需给ul下的li切换active样式即可。 给li添加以下点击 -
其他状态(非Buff/Debuff、异常状态的状态)
2020-12-09 20:56:26治愈、免死、减伤盾等有益状态的效果及叠加机制。 -
我的世界状态效果大全及指令使用方法
2021-03-17 11:46:05《我的世界》中状态效果可以从多种途径获得,但常来源于食物、药水、信标和潮涌核心以及被某些生物攻击或是靠近某些生物。如果世界中开启作弊模式,玩家还可以通过effect命令随意将任意效果给予自己或其他玩家与实体... -
用js实现的一个加载中状态的动态效果
2017-08-07 11:36:51用js实现的一个数据加载中状态的动态效果 数据加载中<span class="id_loaddian"></span></p> -
StarUML~状态图效果
2019-06-01 22:26:5101 示例 播放器 02 图书馆 借书状态 -
谈谈301状态码和302状态码的区别
2021-07-09 11:17:53程序方向来讲这两个状态码,实际上没有多大的区别,都是跳转的返回状态,和200,202,307等同的效果。 但从作用上来讲,301为永久重定向,302为临时重定向,故此还是有本质的不同。 一般情况下我们访问一个网页的... -
状态转换图
2021-01-20 21:38:44写在前边的话:你的支持是我写作的动力,有帮助到你的话麻烦点赞加收藏呦。感激不尽!如有错误也请留言指正 打印机例子 状态转换图 状态 事件 活动表 状态转换 打印机例子 复印机的工作过程大致如下∶未... -
Android状态栏微技巧,带你真正理解沉浸式模式
2016-08-23 07:32:55记得之前有朋友在留言里让我写一篇关于沉浸式状态栏的文章,正巧我确实有这个打算,那么本篇就给大家带来一次沉浸式状态栏的微技巧讲解。 其实说到沉浸式状态栏这个名字我也是感到很无奈,真不知道这种叫法是谁先... -
Android 设置状态栏颜色和状态栏文字、图标颜色
2020-07-24 13:59:11Android开发中,经常...所以会导致一个问题,在 4.4 到 6.0 之间的系统,状态栏设置为浅色的话,状态栏上面白色的文字和图标会看不清,像下面这样: 有一些第三方的系统提供了设置状态栏和状态栏文字、图标颜色的方 -
WPF呼吸闪烁效果例子
2015-02-09 09:20:20一个WPF呼吸闪烁效果的例子 更多资源: http://cleopard.download.csdn.net -
Android沉浸式状态栏,看完这篇就够了!
2020-01-13 11:48:04Android关于沉浸式状态栏总结 Android适配—沉浸式状态栏 Android App 沉浸式状态栏解决方案 Android 沉浸式解析和轮子使用 Android沉浸式(透明)状态栏适配 Android状态栏微技巧,带你真正理解沉浸式模式 android... -
CSS常见问题及解决(二)在active状态下屏蔽掉css中的hover效果
2017-07-07 10:01:31描述:ul中的每一个li都有hover效果(css中完成),但是在点击后(即active的class状态下),要屏蔽hover的效果 解决:li在active状态下屏蔽hover效果 在为li设置hover状态时,不要单纯的写li:hover,... -
前端——ztree树在刷新页面之后保持原来的展开状态
2019-03-18 21:08:48一、需要达到的效果 如下图所示,父节点1和父节点3现在的状态是展开的,其它父节点的状态是合并的; 现在的要求是,刷新页面之后,保持这样的状态: 二、解决 step1添加插件 在JSP或者HTML上面添加插件,包括... -
Android 沉浸式状态栏攻略 让你的状态栏变色吧
2015-09-22 09:21:03一、概述近期注意到QQ新版使用了沉浸式状态栏,ok,先声明一下:本篇博客效果下图:关于这个状态栏变色到底叫「Immersive Mode」/「Translucent Bars」有兴趣可以去 为什么在国内会有很多用户把 「透明 -
打印机状态错误怎么办 打印机状态错误解决方法【图文】
2021-07-23 02:28:30随着我们质量的不断的提高,我们在工作和生活方面,对效率的提高也越来越高,打印机,作为一种能够连接电脑,将数据和资料快速打印出来的工具,它解决了以往需要靠抄写才能完成的工作,它不仅节省了时间,还确保了... -
android状态栏(沉浸式状态栏,改变状态栏字体颜色,背景颜色)
2018-12-03 22:12:01在API21(android 5.0)之后,设置状态栏透明效果为半透明,并且为了保证在API19(android 4.4)之前的正常使用,所以需要3份不同的style文件。即values-v19(android 4.4之前使用),values-v21(android 5.0以后... -
状态栏高亮效果(五分钟入手 )
2019-01-18 11:07:28教你如何实现 切换状态栏高亮效果(五分钟入手 ) 开发工具与关键技术:DW、js 作者:邱慧敏 撰写时间:2019.01.18 主要是:先用&lt;div&gt;来设置好html 的布局 1.给状态框一个class和id里面的... -
安卓设置按钮选中状态
2018-10-08 14:23:171.创建正常状态的drawable文件(以删除按钮为例) 创建正常状态的xml文件,起名为delete_btn_normal <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android=&... -
Android如何一步步实现状态栏一体化效果
2016-11-25 14:31:49可以看到,状态栏与App自身的标题栏融合在了一块,相比于原生黑色的状态栏,给用户的整体视觉效果更佳,那么如何实现Android状态栏一体化效果? 实现 在你所要实现沉浸的页面的Activity中添加如下代码: //... -
进程状态(含状态变迁图)
2017-08-20 10:49:31一、三态模型:三态模型:在多道程序系统中,进程在处理器上交替运行,状态也不断地发生变化。进程一般有3种基本状态:运行、就绪和阻塞。(1)就绪:当一个进程获得了除处理机以外的一切所需资源,一旦得到处理机... -
Android5.0全透明状态栏效果
2015-03-19 17:22:38Android 5.0 状态栏全透明效果 -
steam怎么修改在线状态-steam设置离线、想交易、隐身等状态的方法 - 河东软件园
2021-07-31 02:42:11Steam是很多用户在玩游戏的时候都会选择的游戏平台,在这个平台中玩游戏的时候可以认识很多志同道合的好友,大家可以一起玩游戏。...其实它的设置方法和QQ是很相似的,效果也一样,下面我们来看看具体的设置步骤... -
java线程的五大状态,阻塞状态详解
2020-08-17 09:45:54一、状态简介 一个线程的生命周期里有五大状态,分别是: 新生 就绪 运行 死亡 运行后可能遇到的阻塞状态 二、相关方法 2.1 新生状态 Thread t = new Thread(); 正如我们前面所说的,一个线程开始之后有自己的... -
Bootstrap 按钮状态提示
2018-03-14 09:48:02按钮Bootstrap按钮插件需要 bootstrap-button.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-button.js 文件。Bootstrap中,按钮被赋予多种功能,如为工具条之类的组件赋予状态提示功能、状态切换... -
Android如何设置顶部状态栏颜色(主题)
2018-09-03 16:46:05在Android中我们经常需要设置屏幕顶部状态栏的主题和应用页面保持同一风格,本文介绍几种常用的设置方案: 状态栏将显示为纯净的颜色,没有渐变效果 /** * 状态栏相关工具类 * */ public class ...