Android显⽰富⽂本+夜间深⾊模式
⽬录
前⾔
⽅案⼀：
存在问题：
⽅法⼆：
富⽂本内容：
演⽰效果：
总结
前⾔
在⼯作中有遇到这样的需求，需要把hmtl的富⽂本内容，进⾏深⾊模式适配。原先的富⽂本内容是在直接在webview上进⾏展⽰。
解决思路：替换html中的内容⾊值。
⽅案⼀：
直接使⽤replace进⾏字符串替换，当时是去判断、标签，例如下代码
存在问题：
替换字符串存在很⼤的问题，如果原本标签就是已有⾊值那就会出现问题。所以我这边还是寻到另外⼀种⽅案。
⽅法⼆：
在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 = ElementById("table");
//获取<body>标签，跟换背景
table.innerHTML = text
//获取p标签，插⼊添加内容
var list = ElementsByTagName("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].lor == "rgb(51, 51, 51)") {
if (type == 1) {
aTag[j].lor = "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].lor == "rgb(51, 51, 51)") {
if (type == 1) {
spans[j].lor = "rgb(251, 250, 255)";
}
}
}
} else {
if (type == 1) {
list[i].innerHTML = '<span >' + list[i].innerHTML;
} else {
list[i].innerHTML = '<span >' + list[i].innerHTML;
}
}
}
//获取视频标签，添加poster属性
var videos = ElementsByTagName("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>
可以在这⾥写好富⽂本
富⽂本内容：
<p >
这
</p>
<p >
⾥
</p>
<p >
是
</p>
<p >
什
</p>
<p >
么
</p>
<p >
颜
</p>
<p >
⾊
</p>
<p >            </p>
演⽰效果：
总结
到此这篇关于Android显⽰富⽂本+夜间深⾊模式的⽂章就介绍到这了，更多相关Android富⽂本内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！