Android顯示富文本+夜間深色模式
前言
在工作中有遇到這樣的需求，需要把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>
演示效果：
總結
到此這篇關於Android顯示富文本+夜間深色模式的文章就介紹到這瞭,更多相關Android富文本內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！