网站和app 等前端产品如何变成灰色
2023-02-18 16:38:46 时间
目前主流产品的前端展示,不外乎h5 pcweb 移动web,Android原生、iOS原生、flutter 等跨平台技术。 上次默哀日的时候我还是一个app开发者,也写过类似文章,就不多赘述。
整体思路
无论是什么前端应用,如果项目有好的层次,组件复用的基础组件是相同的,那么这种一夜变灰是特别简单的。 web 和 Flutter 的设计与生俱来,由于层层结构可以统一更改样式。
iOS 和Android 如果自己定义了基础组件,那么也可以是相同原理。
H5 页面
h5 是最简单的,所有的样式都根html 样式下,所以更改html 样式即可。
css 有一个过滤属性filter
只要要设置下灰色 grayscale(100%)
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
Flutter
Flutter 也是在根Wiget 上包裹 ColorFiltered
组件就可以。
@override
Widget build(BuildContext context) {
return ColorFiltered(
colorFilter: ColorFilter.mode(Colors.grey, BlendMode.color),
child: MaterialApp(
title: 'Flutter 灰色,
theme: ThemeData(
primaryColor: Colors.white,
accentColor: Color(0xFF5DC782),
backgroundColor: Color(0xFFF2F2F2)),
routes: Routes.routes,
initialRoute: Routes.home_page,
debugShowCheckedModeBanner: false,
),
);
}
Android
一般都会有 BaseActivity
,在 onCreate
声明周期里设置一层灰色滤镜。
Paint paint = new Paint();
ColorMatrix cm = new ColorMatrix();
cm.setSaturation(0);//灰度效果
paint.setColorFilter(new ColorMatrixColorFilter(cm));
getWindow().getDecorView().setLayerType(View.LAYER_TYPE_HARDWARE,paint);
iOS
方案一:
作为iOS 开发,我没有找到顶层搞过滤的的根组件,如果一个一个搞,UIImageView , Button , Text 太多颜色需要变化。
只能通过runtime 方法替换进行更改,这个就不多介绍了。
大体思路:
- 挂几个钩子,在设置背景色,设置字体颜色等需要替换颜色的地方
- 如果是图片需要改一下 imageWithRenderingMode
方案二:
方案二适用于所有的,一位前同事交流获取。
思路:
- 加蒙层
- 蒙层事件屏蔽掉
蒙层创建:
利用hittest 屏蔽事件:
总结反思
一个良好的工程结构能为你以后迭代的需求省下不少的时间
相关文章
- 不想加班开发管理后台了,试试这个 Java 开源项目吧!
- 用 Java 训练出一只“不死鸟”
- 用 Java 训练深度学习模型,原来可以这么简单!
- [Java 开源项目]一款无需写任何代码,即可一键生成前后端代码的工具
- 用 Java 做个“你画手机猜”的小游戏
- DJL 之 Java 玩转多维数组,就像 NumPy 一样
- 用 Java 拿下 HTML 分分钟写个小爬虫
- 完全基于 Java 的开源深度学习平台,亚马逊的大佬带你上手
- 带你上手阿里开源的 Java 诊断利器:Arthas
- Java的深拷贝和浅拷贝的区别
- Java中Elasticsearch 实现分页方式(三种方式)
- Java二分法
- Java求值策略
- Java锁
- Ansible PlayBook语法
- Ansible 通过Playbook部署LAMP
- InnoDB的锁(Locking)
- Ansible 通过PlayBook部署Zabbix
- 一次死锁(Dead Lock)分析
- 【matplotlib】3-绘制统计图形