自定义MarkDownView处理JSON数据

时间:2022-02-03 12:51:45

前阵子在处理json数据,突然发现或得到的json数据是MarkDown类型的数据,想在app上直接做一个MarkDownView来处理MarkDown类型的json数据。后来,在伟大的github上发现了一个MarkDownView,就决定改改做成自己需要的MarkDownView,所以便有了这个MarkDownView。


原MarkDownView——github:21 Star 548 Fork 102 falnatsheh/MarkdownView


MarkDownView


idea:

将获取到的MarkDown类型的json数据转换成Html,然后通过用WebView来呈现出来。

步骤:

1.导入依赖项

MarkDownView需要导入我们需要的一个依赖项。


在Android Studio中的buil.gradle中添加:

dependencies {
compile 'org.markdownj:markdownj-core:0.4'
}

或者:github-MarkdownJ http://markdownj.org直接下载

2.代码

MarkDownView由于是将json数据转化为Html,所以MarkDownView继承于WebView。


各位看官就将就看下代码,代码就几十行,大家看看就行…-.-

import android.content.Context;
import android.util.AttributeSet;
import android.webkit.WebView;
import org.markdownj.MarkdownProcessor;

/**
* 2016年8月3日 09:35:43
* MarkdownView是继承于WebView的,使用WebView能够浏览HTML的内容的功能,
* 将用compile 'org.markdownj:markdownj-core:0.4'的支持库将我们从
* 数据库获取的JSON数据中的Content内容(MarkDown格式)转换成我们能够查看
* 的网页.
*
* 缺点:这里尚未实现图片点击响应放大缩小的功能
* */

public class MarkdownView extends WebView {

public MarkdownView(Context context) {
super(context);
}

public MarkdownView(Context context, AttributeSet attrs) {
super(context, attrs);
}

/**
* 读取MarkDown字符串并转换成一个Html.
*
* @param json MarkDown字符串
*/

public void loadMarkdown(String json) {
// 第二个参数是样式
loadMarkdownToView(json, "file:///android_asset/paperwhite.css");
}

public void loadMarkdown(String json,String cssFileUrl) {
// 第二个参数是样式
loadMarkdownToView(json, cssFileUrl);
}

private void loadMarkdownToView(String json, String cssFileUrl) {
MarkdownProcessor m = new MarkdownProcessor();
String html = m.markdown(json);
if (cssFileUrl != null) {
html = "<link rel='stylesheet' type='text/css' href='"+ cssFileUrl +"' />" + html;
}
loadDataWithBaseURL("fake://", html, "text/html", "UTF-8", null);
}
}

3.小小的解释

这里就简单的解释下其中主要的函数:


private void loadMarkdownToView(String json, String cssFileUrl) {
MarkdownProcessor m = new MarkdownProcessor();
String html = m.markdown(json);
if (cssFileUrl != null) {
html = "<link rel='stylesheet' type='text/css' href='"+ cssFileUrl +"' />" + html;
}
loadDataWithBaseURL("fake://", html, "text/html", "UTF-8", null);
}

在这个函数中:这玩意MarkdownProcessor 就是将MarkDown文本转换成Html的主要功臣了,这个MarkdownProcessor东西的主要作用就是解析这个。-.-,这个类就是就这个作用。好吧,没了!

MarkDown样式

顺便给各位看官们几个MarkDownView的CSS样式:


美化Markdown输出的HTML文档