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富文本内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Android RichText 让Textview轻松的支持富文本（图像ImageSpan、点击效果等等类似QQ微信聊天）
AndroidRichText帮助实现像QQ,微信一样的,一个TextView里既有文字又有表情又有图片的效果,采用插件化的框架,代码简单,可拓展性强. 基础框架包只有四个java文件, RichTextWrapper :TextView的包裹类,实现支持富文本,通过new RichTextWrapper(TextView v)来构造. RTMovementMethod: 继承自Android原生的LinkMovementMethod,重写onTouchEvent方法,优化了ClickSpan(
-
Android实现EditText的富文本编辑
前言 本文是我之前写的这篇文章<Android图文混排-实现EditText图文混合插入上传>的升级版,除了在EditText实现了图片上传之外,还包含了视频上传.云盘文件上传.录音上传以及显示上传进度.目前应用于蜜蜂-集结号-任务模块. 首先介绍一下该功能的实现效果: 实现思路 实现思路与之前介绍的稍有不同,但是依然是使用SpannableString实现的.由于这里不仅仅支持图片上传,还支持音频.视频.文件上传,为了以后方便扩展更多类型,这里不再使用标签实现,而是直接以JSON实现.以前的
-
Android显示富文本+夜间深色模式
目录 前言 方案一: 存在问题: 方法二: 富文本内容: 演示效果: 总结 前言 在工作中有遇到这样的需求,需要把hmtl的富文本内容,进行深色模式适配.原先的富文本内容是在直接在webview上进行展示. 解决思路:替换html中的内容色值. 方案一: 直接使用replace进行字符串替换,当时是去判断.标签,例如下代码 newText.replace("<p>", "<p><span style=\"color: rgb(51, 5
-
iOS利用NSMutableAttributedString实现富文本的方法小结
前言 在iOS开发过程中,经常会用到给字体加下划线,显示不同颜色和大小的字体等需求,经常遇到这种需求都是直接到百度或者谷歌直接把代码粘过来,并没有做系统的整理,今天刚好有时间,把这部分的内容整理一下,便于后续的开发,闲话不说,接下来就跟着我一起来了解一下NSMutableAttributedString吧. NSAttributedString NSAttributedString对象管理适用于字符串中单个字符或字符范围的字符串和关联的属性集(例如字体和字距).NSAttributedStrin
-
Flutter适配深色模式的方法（DarkMode）
1.瞎叨叨 也不知道写点什么,本来想写写Flutter的集成测试.因为前一阵子给flutter_deer写了一套,不过感觉也没啥内容,写不了几句话就放弃了.(其实本篇内容也不多...) 那就写写最近在做的事情.没错,就是文章标题提到的适配深色模式(DarkMode),也可以说是实现夜间模式的功能.相信许多iOS的同学最近都比较关注,毕竟iOS 13上个月推送更新了. 说适配的原因是因为在iOS 13 和 Android 10系统上它都属于新特性.适配的目的是为了达到应用的主题随着系统主题模式的切
-
Flutter深色模式适配的实现
一.简介 Flutter的深色模式以及跟随系统设置比较简单,我感觉需要注意的是开发过程中尽量使用Theme中的颜色与样式,开发过程中遇到的比较大的坑就是provider的一些问题,可能是因为我用的版本新一些,网上找了很多文章,总会遇到一些问题.本文的深色模式适配是通过修改themeMode来实现的,供诸位有缘人参考. 二.环境介绍 1. Flutter: 2.0.3 2. Dart: 2.12.0 3. provider: 5.0.0 状态管理,用于运行时切换主题 4. shared_prefe
-
Flutter实现编写富文本Text的示例代码
目录 SuperText富文本设计方案 RichText原理 方案设计 解析 代码设计 节点定义 Span构造器定义 SuperText定义 可以修改TextStyle的Span构造器 效果展示 结语 SuperText富文本设计方案 Flutter中要实现富文本,需要使用RichText或者Text.rich方法,通过拆分成List<InlineSpan>来实现,第一感觉上好像还行,但实际使用了才知道,有一个很大的问题就是对于复杂的富文本效果,无法准确拆分出具有实际效果的spans.因此想设
-
ASP.NET网站使用Kindeditor富文本编辑器配置步骤
1. 下载编辑器 下载 KindEditor 最新版本,下载页面: http://www.kindsoft.net/down.php 2. 部署编辑器 解压 kindeditor-x.x.x.zip 文件,将editor文件夹复制到web目录下 3.在网页中加入(ValidateRequest="false") 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" Validat
-
Django内容增加富文本功能的实例
缺少富文本,形式过于单一,不便于浏览与阅读. 一种可行的方法记录如下: 1-下载第三方富文本KindEditor,连接http://kindeditor.net/down.php或者baidu. 2-解压到Django项目下的static/js下,如图所示: 默认没有config.js,需要自行建立config.js,其中内容可参照KindEditor官网或以下代码: KindEditor.ready(function(K) { K.create('textarea',{ width:700,
-
Android开发之文本内容自动朗读功能实现方法
本文实例讲述了Android开发之文本内容自动朗读功能实现方法.分享给大家供大家参考,具体如下: Android提供了自动朗读支持.自动朗读支持可以对指定文本内容进行朗读,从而发生声音:不仅如此,Android的自动朗读支持还允许把文本对应的音频录制成音频文件,方便以后播放.这种自动朗读支持的英文名称为TextToSpeech,简称TTS. 借助于TTS的支持,可以在应用程序中动态地增加音频输出,从而改善用户体验. Android的自动朗读支持主要通过TextTospeech来完成,该累提供了如
-
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
ThinkPHP的conf文件中的Convention.php有一个配置选项 'DEFAULT_FILTER' => 'htmlspecialchars', // 默认参数过滤方法 用于I函数... 默认这个方法是开启的.也就是说,我们往数据库里面存储的数据中都会经过htmlspecialchars这个函数的转义处理. 我在我的项目中使用了Kindeditor富文本编辑器(或许你使用的是Ueditor\ckeditor),通过富文本编辑器编辑文章的内容然后存储到数据库中,再从数据