首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

一个Android沉浸式状态栏上的黑科技

Android系统其实给了我们API来控制状态栏图标的颜色,但是只能设置成黑、白这两种颜色,而不可以状态栏图标改成五颜六色的样子。...默认情况下,系统会认为我们拥有的是一个深色状态栏,那么状态栏上面的图标自然就应该白色的,因为只有这样才能看得清上面的图标。...答案是显而易见的,为了能让前景背景的颜色区分更加明显,当然应该是底部是深色背景图的时候显示白色的状态栏图标,底部是浅色背景图的时候显示黑色的状态栏图标。...接下来再调用ColorUtils.calculateLuminance()方法来计算选取的这个颜色值的亮度。...当亮度低于0.5时,我就认为这是一个深色的颜色值,那么此时状态栏设置成深色模式,状态栏图标就会自动变成白色。反之就将状态栏设置成浅色模式,此时状态栏图标就会自动变成黑色。

1.4K10

Android状态栏白底黑字的示例代码

我:Android4.4以上系统版本可以修改状态栏颜色,但是只有小米的MIUI、魅族的Flyme和Android6.0以上系统可以把状态栏文字和图标换成深色,其他的系统状态栏文字都是白色的,换成浅色背景的话就看不到了...MIUI深色状态栏字体模式.png ?...Flyme深色状态栏字体模式.png 官方在Android6.0中提供了亮色状态栏模式,配置只需一行代码: if (Build.VERSION.SDK_INT = Build.VERSION_CODES.M...6.0原生深色状态栏字体模式.png 网上有关状态栏颜色设置的文章很多,下面这段代码是我用的状态栏设置工具类,算是一个总结吧。...2017年7月,小米才终于想起来对状态栏字符颜色的逻辑做了一次调整,改为兼容Android原生的设置方式,但是没给出怎么区分旧系统与新系统的方法==、 关于 MIUI 状态栏字符颜色逻辑调整的说明

61521
您找到你想要的搜索结果了吗?
是的
没有找到

谷歌MD深色主题设计规范详解(附Sketch官方文件下载)

作为一个主流趋势,深色系配色主题必然会逐渐适配到几乎全部的移动端产品上,让用户在低亮度环境下舒适地和移动端界面进行交互。...用法 深色主题将会让 UI 的绝大部分以深色来呈现。它是作为默认主题(浅色主题)的一个补充模式而存在。 深色主题将会降低设备屏幕的显示亮度,同时仍保持最低程度的色彩对比度。...通过表面的白色半透明层,控制透明度来让表面发生亮度变化。 1.元素控件层 2.覆盖叠加层 叠加层的另外一个优势在于,它可以让人更加便捷的分辨不同组件之间的高程,并且可以容易观察到阴影。...错误 应该避免配色中的主色引用到弹出菜单的背景上,这回导致明亮的色彩盖住多半屏幕。...它包含全套深色主题的布局元素,包括状态栏、应用栏目、底部工具栏、卡片、下拉菜单、搜索字段、分隔符、导航、对话框等一系列的组件,非常实用。

9.5K10

详解关于MIUI 9沉浸式状态栏的最新适配

问题: 最近更新了最新的MIUI 9 系统,安装上公司的应用之后,发现之前适配过的沉浸式状态栏忽然没有效果了,感觉很郁闷的我于是去网上搜了一下关于小米手机状态栏适配方面的文章,发现大部分文章都还是之前的适配方案...2、在 Android 6.0 及以上版本,Android 提供了标准的方法实现「状态栏黑色字符」效果,但这个方法和 MIUI 的方法产生了冲突,以致于当开发者使用 Android 标准方法时,没有出现预期的效果...为了解决这个问题,小米觉决定在MIUI 9之后兼容Android 官方的标准方案,舍弃了自己的方案,所以说,对于MIUI9 以上版本的用户,对于手机状态栏深色字体的实现需要重新适配,小米官方也给出了最新的适配方案...在新的 MIUI 版本(即基于 Android 6.0 ,开发版 7.7.13 及以后版本): 状态栏深色字体: Window window = getWindow(); window.addFlags...window.getDecorView().setSystemUiVisibility(flag);​ } } catch (Exception e) { e.printStackTrace(); } } 修改为以上代码之后

1.2K30

android开发修改状态栏背景色和图标颜色的示例

本文介绍了android开发修改状态栏背景色和图标颜色的示例,分享给大家,具体如下: 修改状态栏背景色和图标颜色 默认是黑底白字的,现在要改为白底黑字的 先看下效果图: ?...1、状态栏背景是白色: 在style中设置 <item name="colorPrimaryDark" @color/white</item 2、写修改状态栏图标的颜色(暂时只知道黑色和白色) public...View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN|View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR); result=3; } } return result; } /** * 设置状态栏图标为深色和魅族特定的文字风格...* 可以用来判断是否为Flyme用户 * @param window 需要设置的窗口 * @param dark 是否把状态栏文字及图标颜色设置为深色 * @return boolean 成功执行返回...true; } catch (Exception e) { } } return result; } /** * 需要MIUIV6以上 * @param activity * @param dark 是否把状态栏文字及图标颜色设置为深色

1.7K20

【Web技术】623- 简单好用的前端深色模式主题化开发方案

在这之前,深色模式常见于程序IDE开发界面和视频网站界面。前者通过降低屏幕亮度,使得使用人员长时间盯着屏幕眼睛没有那么疲惫;后者通过深色模式来降噪,从而突出主体内容部分。快速开发一个深色模式难吗?...在使用sass和less的时候可以改变原来的传递色值方式改为传递css自定义属性和默认值。...如果图片来自用户输入,其他地方的截图,这时候需要稍微处理一些降低亮度。图片简化地获取当前的主题状态可以在body上增加一个ui主题是否是深色模式的属性。 深色方案一:图片增加透明度。...这些网站使用深色模式可以通过降低亮度减少对眼睛的刺激,减少长时间浏览的疲惫和晕眩的感觉。...有没有简单的深色模式映射切换?比如使用HSL替代RGB色值。 HSL色值的表达形式是通过色相、饱和度、亮度,既然深色模式是调整亮度和饱和度,那是否可以通过hsl色值来自动计算呢?

2K10

Flutter 强大的MediaQuery控件

color_FFFFFF,t_70] 注意:无特殊说明,Flutter版本及Dart版本如下:Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 MediaQuery 通常情况下,不会直接MediaQuery...platformBrightness 当前设备的亮度模式,比如在Android Pie手机上进入省电模式,所有的App将会使用深色(dark)模式绘制。...padding 被系统遮挡的部分,通常指“刘海屏”或者系统状态栏。...viewPadding 被系统遮挡的部分,通常指“刘海屏”或者系统状态栏,此值独立于padding和viewInsets,它们的值从MediaQuery控件边界的边缘开始测量。...systemGestureInsets 显示屏边缘上系统“消耗”的区域输入事件,并阻止这些事件传递给应用。比如在Android Q手势滑动用于页面导航(ios也一样),比如左滑退出当前页面。

74600

Flutter 强大的MediaQuery控件

color_FFFFFF,t_70] 注意:无特殊说明,Flutter版本及Dart版本如下:Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 MediaQuery 通常情况下,不会直接MediaQuery...platformBrightness 当前设备的亮度模式,比如在Android Pie手机上进入省电模式,所有的App将会使用深色(dark)模式绘制。...padding 被系统遮挡的部分,通常指“刘海屏”或者系统状态栏。...viewPadding 被系统遮挡的部分,通常指“刘海屏”或者系统状态栏,此值独立于padding和viewInsets,它们的值从MediaQuery控件边界的边缘开始测量。...systemGestureInsets 显示屏边缘上系统“消耗”的区域输入事件,并阻止这些事件传递给应用。比如在Android Q手势滑动用于页面导航(ios也一样),比如左滑退出当前页面。

88000

开启页面模糊效果下修改深色模式下页头页脚亮度

开启页面模糊效果下修改深色模式下页头页脚亮度 如果魔改了主页面,开启了模糊效果,那么在修改深色模式下主页封面和页脚就不能只靠修改/themes/sourcs/css/_mode/darkmode.styl...也就是说修改的时候这三者是一起修改的,但是由于魔改模糊效果之后,对于背景的设置(准确来说是页头页脚的设置)会覆盖掉darkmode.styl中的效果,所以在darkmode.styl中修改background的时候,只能影响到深色模式下背景图片的深度...css/custom.css,我们打开这个文件即可 在themes/butterfly/source/css/custom.css中,找到此处(只管未注释的内容,注释是笔者自己家加的) 修改为以下内容...important,也就是纯透明,不暗化; 现在被改成了自定义的;当然也可以用*var(--trans-dark),也就是跟上面一样,用上面预设好的*/ }其中raga中的前三个值是遮罩的颜色,深色模式一般就用黑色...,第四个值代表的是遮罩的深度,取值范围为0~1,值越大深度越大,读者可以自己更改 效果: 修改前: 页头页脚过亮,看不清文字 修改后: 亮度适中

34910

微信黑暗模式终于来啦!UI设计细节完全分析及体验

不过,很多人也许发现不了,因为手机白天还是浅色模式,只有到晚上才会改为黑暗模式。 ? 如何开启微信黑暗模式? 首先,你必须更新到iOS端的微信7.0.12版本。...然后,在白天,只有你手工开启了“设置”>“显示与亮度” 菜单下的深色模式,它才有效果。至于安卓用户,截止3月22日文章发布的时间,官网依然没有更新。安卓的小伙伴就再等等吧。开启后效果如下: ?...一般来说Tint颜色,黑暗模式下亮一点。(左侧色卡为浅色模式,右侧为深色模式,下同) 另外,以上取色均没有考虑透明度,在实际应用中需要考虑透明度的使用。...总体来说,黑暗模式下比亮色模式下的图标颜色“亮”。是不是这里比较拗口?也就是下图中,右侧比左侧的图标,亮度提升啦! ? 支付界面中的图标,处理方式同上边一样,右图比左图的图标亮度要高一些。...所以让你的照片吸引人吧。 ? 聊天页面 聊天页面中相应的Tint色也有变化。另外,请注意,背景色依然不是纯白色和纯黑色。

1.4K20

Edge插件推荐

今天给大家分享几个好用的Edge浏览器插件,掌握它们帮助你提高工作效率。 如何添加Edge插件?...以下是 Grammarly 的一些主要特点和功能: 语法检查: Grammarly 能够检测文本中的语法错误,提供相应的修正建议,帮助用户写出流畅、准确的句子。...以下是 Dark Reader 的一些主要特点和功能: 深色主题: Dark Reader 可以网页的亮色主题转换为深色主题,包括黑色、深灰色等,使页面元素更易于辨认,减少眼睛的疲劳感。...可定制性: 用户可以根据自己的偏好调整深色主题的亮度、对比度和色调,以满足个性化的需求。...亮度调整: 插件还提供亮度调整功能,可以根据用户的环境和喜好调整页面的整体亮度

23710

最新iOS设计规范三|3大界面要素:栏(Bars)

在iPhone上侧边栏又分为半屏和全屏,手机QQ、滴滴打车都从原来都半屏改为了全屏,曹操专车采用的是半屏。 ? 您可以通过使用边栏样式列表并将其放置在拆分视图的主列中来创建边栏。...例如,“邮件”使用简洁的术语(例如“标记”和“草稿”)从每个邮箱的标题中省略了“消息”一词。 不要在侧边栏中显示超过两个层次的层次结构。...状态栏的文本和指示器的视觉样式可以是浅色或深色,可以针对APP进行全局设置,也可以针对不同的屏幕单独设置。 深色状态栏的效果在浅色内容至少效果很好,而浅色状态栏的效果在深色内容上效果很好。...当用户尝试关注媒体时,状态栏可能会分散注意力。暂时隐藏这些元素以提供沉浸的体验。例如,当用户浏览全屏照片时,“照片”应用程序隐藏状态栏和其他界面元素。 ? 避免永久隐藏状态栏。...如果是3个或3个以下的按钮,文本按钮可以清晰。但需要考虑给文本标题的按钮足够的空间。 ? 避免在工具栏中使用分段控件。分段控件允许用户切换上下文,而工具栏只对当前页面提供操作。

9.8K10

学会HSB色彩模式,让配色有理有据!

HSB 模式对应的媒介是人眼,在选择色彩这件事上,HSB 使用了贴近人类感官直觉的方式来描述色彩,它把颜色分为色相、饱和度、明度三个因素(将我们人脑的“深浅”概念扩展为饱和度和明度)。...B—表示明度/亮度:颜色的明暗程度。取值也是在0—100之间。亮度高色彩明亮,亮度低色彩暗淡,亮度最高得到纯白,最低得到纯黑。...联运深色模式中的应用 在双系统的深色模式适配要点中有提到“高饱和的颜色在深色的背景下容易产生视觉抖动,从而导致人眼疲劳”,在深色模式下我们应当选择浅的颜色以达到更好的可读性。...重点分析 Developer 深色适配中的配色示例中,通过 Developer 给出的深色模式适配示例的色值转换为 HSB 之后,发现其 HSB 的数值变化是有一定规律的,规律基本符合: BUT:...在根据 Developer 的深色模式颜色适配的示例总结其规律的过程中,对于数值的变化,产生了一些疑惑: 直到了解到: 「每个颜色都有其专属的“感知明度”,也就是亮度色相环“去色”后,可以明显看出

1.5K30

超实用PPT配色技巧,帮你高效完成配色

有人会说发布会幻灯片背景是黑色或深色,其实黑色或深色也是属于饱和度和亮度非常低的颜色。   ...发布会因特定的场合,背景必须选择黑色或深色,原因就是深色背景可以突出演讲者,如果是白色或亮色背景,会出现背影或反光,导致观众看不清演讲人。   大多数商务职场幻灯片,选择黑色背景还是过于冒险和压抑。...03.png   四、让配色看起来舒服   上面提到了高饱和度,饱和度越高颜色越鲜亮。   ...调低颜色的亮度和饱和度,让配色舒服 04.png   五、配色的灵感来源   前面都是我职场制作幻灯片的经验分享。   那如何才能让配色创意源泉不断输出,很简单只需多看一些优秀的设计作品。   ...最好不要使用刺眼的配色方案,为了让配色看起来舒服,建议使用饱和度亮度比较低的配色值。   幻灯片中颜色不要超过三种,最好只用一种颜色来表示强调对比。

1.9K50

深度译文:UI中设定自适应颜色的原理(Part 02)

这允许我们分别调整强度或色温以获得浅或暗的颜色变化,从而提供更多的创作自由和美学选择。例如,当您减淡蓝色时,您可能希望使蓝色变暖,以便颜色以愉悦的方式展示出来。...这种做法用于用户界面的颜色选择,是设计师能够改变用户体验感知环境的一种方式。...虽然对比度为3:1的颜色在浅色主题中可能看起来很好,但对比度为3:1为且深色背景的相同颜色(灰色),似乎没有足够的对比度。...但是在深色背景下,这个紫色似乎显得饱和度更高一点。 ? 背景不同,相同的颜色也会有不同的“饱和度” 由于这些原因,我们还需要综合考量背景颜色对我们如何生成颜色的影响。...环境改变,配色方案随之改变 在下一篇文章中,我们讨论如何使用Adobe的设计系统实现上文的自适应调色板。

88320

Android实现修改状态栏背景、字体和图标颜色的方法

(type == 3) { window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE); } } /** * 设置状态栏图标为深色和魅族特定的文字风格...* 可以用来判断是否为Flyme用户 * * @param window 需要设置的窗口 * @param dark 是否把状态栏字体及图标颜色设置为深色 * @return boolean 成功执行返回...value); window.setAttributes(lp); result = true; } catch (Exception e) { } } return result; } /** * 设置状态栏字体图标为深色...,需要MIUIV6以上 * * @param window 需要设置的窗口 * @param dark 是否把状态栏字体及图标颜色设置为深色 * @return boolean 成功执行返回true...= null) { statusBarView.setBackgroundDrawable(null);//在设置前背景设置为null; statusBarView.setBackgroundResource

5.8K41

android 设置标题栏背景颜色_状态栏菜单栏都在哪

Activity通过上面的设置,可以实现如下效果: 上面设置状态栏文字颜色和图标为暗色主要采用了以下两个标志: //设置状态栏文字颜色及图标为深色 getWindow().getDecorView()...,状态栏悬浮于视图之上 View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR 是从 API 23开始启用,实现效果: 设置状态栏图标和状态栏文字颜色为深色,为适应状态栏背景为浅色调...bindingView.toolbar.setNavigationIcon(R.drawable.nav_icon_return); state = CollapsingToolbarLayoutState.COLLAPSED;//修改为折叠状态...bindingView.toolbar.getMeasuredHeight(); hasMeasured = true; } return true; } }); } 总结: 根据android提供的widnow的flag,状态栏浅色调和深色调...如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站立刻删除。

2.2K10
领券