Android显示富文本+夜间深色模式
作者:让开,我要吃人了 时间:2023-11-11 12:33:59
前言
在工作中有遇到这样的需求,需要把hmtl的富文本内容,进行深色模式适配。原先的富文本内容是在直接在webview上进行展示。
解决思路:替换html中的内容色值。
方案一:
直接使用replace进行字符串替换,当时是去判断、标签,例如下代码
newText.replace("<p>", "<p><span style=\"color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);\">")
存在问题:
替换字符串存在很大的问题,如果原本标签就是已有色值那就会出现问题。所以我这边还是寻找到另外一种方案。
方法二:
在assets中写一个空白页的html文件,html中实现createTable函数,用于接收富文本内容,加载到table标签中,然后在createTable中执行标签识别,添加色值或者替换色值的操作。是否是深色主题的标签可以在Url上拼接获取。
经过测试该方面完美解决问题,后续需求变得也方便添加和修改。下面贴上代码:
<script type="text/javascript">
var type = getQueryString('type');
//获取<body>标签,跟换背景
if (type == 1) {
document.body.style.backgroundColor = "#1F1832";
} else {
document.body.style.backgroundColor = "#F7F8F9";
}
function createTable(text) {
var table = document.getElementById("table");
//获取<body>标签,跟换背景
table.innerHTML = text
//获取p标签,插入添加内容
var list = document.getElementsByTagName("P");
for (var i = 0; i < list.length; i++) {
var spans = list[i].getElementsByTagName("span");
var aTag = list[i].getElementsByTagName("a");
if (aTag.length > 0) {
for (var j = 0; j < aTag.length; j++) {
if (aTag[j].style.backgroundColor == "rgb(255, 255, 255)") {
if (type == 1) {
aTag[j].style.backgroundColor = "rgb(31, 24, 50)";
} else {
aTag[j].style.backgroundColor = "rgb(247, 248, 249)";
}
}
if (aTag[j].style.color == "rgb(51, 51, 51)") {
if (type == 1) {
aTag[j].style.color = "rgb(251, 250, 255)";
}
}
}
}
if (spans.length > 0) {
for (var j = 0; j < spans.length; j++) {
if (spans[j].style.backgroundColor == "rgb(255, 255, 255)") {
if (type == 1) {
spans[j].style.backgroundColor = "rgb(31, 24, 50)";
} else {
spans[j].style.backgroundColor = "rgb(247, 248, 249)";
}
}
if (spans[j].style.color == "rgb(51, 51, 51)") {
if (type == 1) {
spans[j].style.color = "rgb(251, 250, 255)";
}
}
}
} else {
if (type == 1) {
list[i].innerHTML = '<span style="color: rgb(251, 250, 255);">' + list[i].innerHTML;
} else {
list[i].innerHTML = '<span style="color: rgb(31, 24, 50);">' + list[i].innerHTML;
}
}
}
//获取视频标签,添加poster属性
var videos = document.getElementsByTagName("video")
for (var i = 0; i < videos.length; i++) {
videos[i].setAttribute("poster", videos[i].src + '?x-oss-process=video/snapshot,t_1000,f_jpg')
}
}
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return 0;
}
</script>
可以在这里写好富文本 kindeditor.net/demo.php
富文本内容:
<p style="text-align:center;">
这
</p>
<p style="text-align:center;">
里
</p>
<p style="text-align:center;">
是
</p>
<p style="text-align:center;">
什
</p>
<p style="text-align:center;">
么
</p>
<p style="text-align:center;">
颜
</p>
<p style="text-align:center;">
色
</p>
<p style="text-align:center;">
!!!
</p>
演示效果:
来源:https://blog.csdn.net/weixin_55362248/article/details/122434315
标签:Android,富文本,深色模式
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Android SDK命令行工具Monkey参数及使用解析
2023-07-13 17:00:33
C#路径,文件,目录及IO常见操作汇总
2022-05-03 21:21:13
C++强制类型转换的四种方式
2023-03-29 04:00:49
Java中的OkHttp使用教程
2023-08-10 19:30:59
详解Maven安装教程及是否安装成功
2021-07-14 00:00:21
![](https://img.aspxhome.com/file/2023/3/61673_0s.png)
通过Mybatis实现单表内一对多的数据展示示例代码
2021-12-20 12:34:31
![](https://img.aspxhome.com/file/2023/1/64011_0s.png)
java如何让带T的时间格式化
2022-12-22 10:44:28
![](https://img.aspxhome.com/file/2023/8/125238_0s.png)
深入探究Java线程的创建与构造方法
2023-05-29 22:02:45
![](https://img.aspxhome.com/file/2023/5/72315_0s.png)
Java实现的日期处理类完整实例
2023-12-08 00:16:10
Java Idea高效率配置技巧实例解析
2023-06-05 13:24:42
![](https://img.aspxhome.com/file/2023/7/61407_0s.jpg)
IP查询系统的异步回调案例
2023-11-10 18:22:24
Java中流的有关知识点详解
2022-07-21 15:38:21
Spring boot配置绑定和配置属性校验的方式详解
2022-04-21 03:06:06
![](https://img.aspxhome.com/file/2023/4/64884_0s.png)
Android Fragment源码分析Add方法
2023-02-12 19:13:58
Java中scheduleAtFixedRate的用法
2022-10-10 11:07:37
Android开发之模仿微信打开网页的进度条效果(高仿)
2021-09-02 10:17:04
![](https://img.aspxhome.com/file/2023/4/138534_0s.jpg)
微信开发准备第二步 springmvc mybatis项目结构搭建
2021-07-16 22:18:37
![](https://img.aspxhome.com/file/2023/1/68551_0s.jpg)
Springboot 扫描mapper接口的2种操作
2022-08-04 03:28:54
![](https://img.aspxhome.com/file/2023/6/73106_0s.jpg)
老生常谈C++ explicit关键字
2022-09-06 03:48:22
比Math类库abs()方法性能更高的取绝对值方法介绍
2023-10-14 07:51:36