如果你正在考虑或在你的应用程序中显示长的内容,例如一篇博客文章,那么你需要考虑和计划这些内容将如何呈现。即使可以使用文本视图,你也很难进行自定义,以考虑到链接、颜色、标题等功能。TextView并不是一个很好的路线。这给我们留下了两个选择:webview或markdown。

在这篇文章中,我们将看一下markdown。请注意,大多数Markdown库实际上是由WebView构建的。

(a). tiagohm/MarkdownView

Android库来显示markdown文本。

这个库使用Flexmark和它的一些扩展。

该库可以。

  • 从 "string "渲染markdown。
  • assets渲染markdown。
  • 从 "URL "渲染标记。

URL的情况下,它使用AsyncTask来下载markdown,这样你的应用程序就不会冻结。在所有这些情况下,你只需要传递适当的 "字符串",无论是 "URL"、标记文本还是文件路径。

第1步:安装它

它被托管在jitpack中,所以你需要在根级的build.gradle文件中的allProjects闭合项下将jitpack作为maven url添加。

maven { url 'https://jitpack.io' }

然后在你的应用级build.gradle文件中添加依赖关系。

implementation 'com.github.tiagohm.MarkdownView:library:0.19.0'

然后同步你的项目。

第二步:在布局中添加MarkdownView

下一步是到你的布局中去添加MarkdownView

<br.tiagohm.markdownview.MarkdownView
    android:id="@+id/markdown_view"
    app:escapeHtml="false"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

第3步:加载Markdown

如果你使用的是Java,就从引用MarkdownView开始。

mMarkdownView = (MarkdownView)findViewById(R.id.markdown_view);

如果你使用的是Kotlin,则不需要这样做,因为你可以使用Kotlin语法或通过ViewBinding来导入视图,甚至更好。

无论哪种情况,我们都要继续。你可以使用默认的CSS。

mMarkdownView.addStyleSheet(new Github());

或者加载位于 "assets "中的外部css。

mMarkdownView.addStyleSheet(ExternalStyleSheet.fromAsset("my_css.css", null))

然后加载stringmarkdown。

mMarkdownView.loadMarkdown("**MarkdownView**");

或者从assets中加载markdown。

mMarkdownView.loadMarkdownFromAsset("markdown1.md");

或者把markdown作为一个文件对象加载。例如,这个文件可以从文件系统中加载。

mMarkdownView.loadMarkdownFromFile(new File());

或者你可以从在线加载markdown。

mMarkdownView.loadMarkdownFromUrl("url");

这就是了。

第三步:附加功能

你可以使用自定义的css。要么通过Java/Kotlin以编程方式建立CSS。

//InternalStyleSheet css = new InternalStyleSheet();
InternalStyleSheet css = new Github();
css.addFontFace("MyFont", "condensed", "italic", "bold", "url('myfont.ttf')");
css.addMedia("screen and (min-width: 1281px)");
css.addRule("h1", "color: orange");
css.endMedia();
css.addRule("h1", "color: green", "font-family: MyFont");
mMarkdownView.addStyleSheet(css);

或者从一个外部文件加载CSS。

mMarkdownView.addStyleSheet(ExternalStyleSheet.fromAsset("github.css", null);
mMarkdownView.addStyleSheet(ExternalStyleSheet.fromAsset("github2.css", "screen and (min-width: 1281px)");

你也可以加载一个外部的Javascript文件。

JavaScript js = new ExternalJavaScript(url, async, defer);
mMarkdownView.addJavascript(js);

这是一个功能丰富的库。以下是它的特点。

  • [x] 粗体 **文本**__文本__

  • [x] 斜体 *Text*_Text_

  • [x] 删除线 ~~文本~~.

  • [x] 标题 #

  • [x] 链接 `alt‘。

  • [x] 图片 ![alt](url)

  • [x] 代码

  • [x] 方块引号

  • [x] 嵌套式方框引号

  • [x] 列表

  • [x] 表格

  • [x] 任务列表

  • [x] 自动链接

  • [x] 缩略语

  • [x] 标记 `==文本=="。

  • [x] 下标H~2~O

  • [x] 上标10^-10^

  • [x] 按键@ctrl+alt+del@

  • [x] MathJax Inline $x = {-b \pm \sqrt{b^2-4ac} \2a以上}$

  • [x] MathJax $x = {-b pm \sqrt{b^2-4ac} $$ \2a以上}$`$

  • [x] 脚注

  • [x] 图像大小调整 ![alt](url@100px|auto)!

  • [x] 语法高亮(使用Highlight.js)

  • [x] 表情符号(EmojiOne v2) :微笑:

  • [x] 自定义CSS

  • [x] Youtube @[youtube](fM-J08X6l_Q).

  • [x] Twitter

  • [x] JavaScripts

  • [x] 标签 --DEFAULT-- --SUCCESS-- ----WARNING---- —–DANGER—–`。

  • [x] Bean {{fieldName}} {{fieldName}} `{{fieldName}} 。

  • [x] 自定义属性 { #id .class name=value name='value'}

  • [x] 使用自定义属性的文本对齐、文本大小和文本颜色

![](https://raw.githubusercontent.com/tiagohm/MarkdownView/master/1.png)

例子

下面是一个使用这个库的MarkdownView例子。

activity_main.xml

我们从创建布局开始。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="br.tiagohm.markdownview.app.MainActivity">

    <br.tiagohm.markdownview.MarkdownView
        android:id="@+id/mark_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:escapeHtml="false" />
</LinearLayout>

MainActivity.java

然后我们写我们的代码,可以用kotlin或java。

package br.tiagohm.markdownview.app;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;

import br.tiagohm.markdownview.MarkdownView;
import br.tiagohm.markdownview.css.InternalStyleSheet;
import br.tiagohm.markdownview.css.styles.Github;

public class MainActivity extends AppCompatActivity {

    private MarkdownView mMarkdownView;
    private InternalStyleSheet mStyle = new Github();

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.change_theme_action:
                break;
        }

        return true;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Cria o bean.
        MyBean myBean = new MyBean();
        myBean.setHello("Olá");
        myBean.setDiasDaSemana(MyBean.DiasDaSemana.DOMINGO);

        mMarkdownView = findViewById(R.id.mark_view);
        mMarkdownView.addStyleSheet(mStyle);
        //http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile
        mStyle.addMedia("screen and (min-width: 320px)");
        mStyle.addRule("h1", "color: green");
        mStyle.endMedia();
        mStyle.addMedia("screen and (min-width: 481px)");
        mStyle.addRule("h1", "color: red");
        mStyle.endMedia();
        mStyle.addMedia("screen and (min-width: 641px)");
        mStyle.addRule("h1", "color: blue");
        mStyle.endMedia();
        mStyle.addMedia("screen and (min-width: 961px)");
        mStyle.addRule("h1", "color: yellow");
        mStyle.endMedia();
        mStyle.addMedia("screen and (min-width: 1025px)");
        mStyle.addRule("h1", "color: gray");
        mStyle.endMedia();
        mStyle.addMedia("screen and (min-width: 1281px)");
        mStyle.addRule("h1", "color: orange");
        mStyle.endMedia();
        mMarkdownView.setBean(myBean);
        mMarkdownView.loadMarkdownFromAsset("markdown1.md");
    }

    public static class MyBean {

        public enum DiasDaSemana {
            DOMINGO,
            SEGUNDA,
            TERCA,
            QUARTA,
            QUINTA,
            SEXTA,
            SABADO
        }

        private String hello;
        private DiasDaSemana diasDaSemana;

        public String getHello() {
            return hello;
        }

        public void setHello(String hello) {
            this.hello = hello;
        }

        public DiasDaSemana getDiasDaSemana() {
            return diasDaSemana;
        }

        public void setDiasDaSemana(DiasDaSemana diasDaSemana) {
            this.diasDaSemana = diasDaSemana;
        }
    }
}

这里是源代码参考。

参考

阅读更多关于这个库的信息here

(b). falnatsheh/MarkdownView

MarkdownView是一个Android webview,它能够加载Markdown文本或文件并以HTML形式显示,它使用MarkdownJ并扩展了Android webview。

MarkdownView(Markdown For Android)是一个Android库,它可以帮助你将Markdown文本或文件(本地/远程)显示为格式化的HTML,并使用CSS样式输出。

MarkdownView本身扩展了Android Webview,并添加了必要的逻辑来解析Markdown(使用MarkdownJ)并在视图上显示输出的HTML。

第1步:安装

从jcenter安装MarkdownView。

implementation 'us.feras.mdv:markdownview:1.1.0'

第2步:添加到布局中

在你的XML布局中添加MarkdownView。

   <us.feras.mdv.MarkdownView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/markdownView" />

第三步:编写代码

如果你使用的是Java,请引用我们布局中的MarkdownView。

MarkdownView markdownView = (MarkdownView) findViewById(R.id.markdownView);
markdownView.loadMarkdown("## Hello Markdown");

无论你是使用java还是kotlin,你都可以使用视图绑定或数据绑定。如果你使用Kotlin,你可以使用Kotlin Synthetics。

你也可以以编程方式创建MarkdownView。

  MarkdownView markdownView = new MarkdownView(this);
  setContentView(markdownView);
  markdownView.loadMarkdown("## Hello Markdown");

实例

现在让我们来看看一个完整的例子,如何使用MarkdownView库在本地加载markdown。

MainActivity.java

import us.feras.mdv.MarkdownView;
import android.app.Activity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Window;

public class LocalMarkdownActivity extends AppCompatActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        MarkdownView webView = new MarkdownView(this);
        setContentView(webView);
        webView.loadMarkdownFile("file:///android_asset/hello.md");
    }
}

如何将主题应用于MarkdownView

假设你有主题,你想显示主题。用户从 "旋转器 "中选择一个主题,我们将该主题应用到markdownview中。

import us.feras.mdv.MarkdownView;
import android.app.Activity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.Spinner;

public class MarkdownThemesActivity extends AppCompatActivity implements
        OnItemSelectedListener {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.markdown_themes);
        Spinner themesSpinner = (Spinner) findViewById(R.id.themes_spinner);
        ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(
                this, R.array.md_themes, android.R.layout.simple_spinner_item);
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        themesSpinner.setAdapter(adapter);
        themesSpinner.setSelection(0);
        themesSpinner.setOnItemSelectedListener(this);
    }

    @Override
    public void onItemSelected(AdapterView<?> parent, View view, int pos,
            long id) {
        MarkdownView mdv = (MarkdownView) findViewById(R.id.markdownView);
        mdv.loadMarkdownFile("file:///android_asset/hello.md",
                "file:///android_asset/markdown_css_themes/"
                        + parent.getItemAtPosition(pos).toString() + ".css");
    }

    @Override
    public void onNothingSelected(AdapterView<?> parent) {
        // no-op
    }
}

如何从一个 "字符串 "中加载markdown

如果你把你的markdown作为一个 "字符串 "保存在内存中,这个例子显示了你如何加载它。

public class MarkdownDataActivity extends AppCompatActivity {

    private EditText markdownEditText;
    private MarkdownView markdownView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.markdown_view);
        markdownEditText = (EditText) findViewById(R.id.markdownText);
        markdownView = (MarkdownView) findViewById(R.id.markdownView);
        String text = getResources().getString(R.string.md_sample_data);
        markdownEditText.setText(text);
        updateMarkdownView();

        markdownEditText.addTextChangedListener(new TextWatcher() {

            @Override
            public void afterTextChanged(Editable s) {}

            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {}

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                updateMarkdownView();
            }
        });

    }

    private void updateMarkdownView() {
        markdownView.loadMarkdown(markdownEditText.getText().toString());
    }
}

如何从网上渲染标记符

如果你得到了远程托管的markdown文件,并且你想下载并渲染它,这里是你如何做的。

public class RemoteMarkdownActivity extends AppCompatActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        MarkdownView markdownView = new MarkdownView(this);
        setContentView(markdownView);
        markdownView.loadMarkdownFile("https://raw.github.com/falnatsheh/MarkdownView/master/README.md");
    }
}

访问这个例子这里

演示

这里是演示。

参考资料

找到完整的参考资料 here

(c). mukeshsolanki/MarkdownView-Android

MarkdownView是一个简单的库,它可以帮助你在Android上将Markdown文本或文件显示为一个html页面,就像Github一样。

第1步:安装

在你的根层build.gradle文件中添加jitpack。

maven { url "https://jitpack.io" }

然后安装该库。

implementation 'com.github.mukeshsolanki:MarkdownView-Android:1.1.1'

第2步:添加布局

接下来你需要将MarkdowView添加到你的布局中。

<com.mukesh.MarkdownView
    android:id="@+id/markdown_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
/>

第3步:代码

然后编写java或kotlin代码。

引用MarkdownView。

MarkdownView markdownView = (MarkdownView) findViewById(R.id.markdown_view);

下面是你如何从一个`字符串’中设置Markdowb。

markdownView.setMarkDownText("# Hello World\nThis is a simple markdown"); //Displays markdown text
...

这是你如何从 "资产 "中加载markdown。

markdownView.loadMarkdownFromAssets("README.md"); //Loads the markdown file from the assets folder
...

这里是你如何从文件系统或路径加载markdown的方法。

File markdownFile=new File("filePath");
markdownView.loadMarkdownFromFile(markdownFile); //Loads the markdown file.

例子

下面是一个完整的例子。

MainActivity.java

package com.mukesh.markdownview.example;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import com.mukesh.MarkdownView;

public class MainActivity extends AppCompatActivity {

  @Override protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    MarkdownView markdownView = (MarkdownView) findViewById(R.id.markdown_view);
    markdownView.setMarkDownText("# Hello World\nThis is a simple markdown\n"
        + "https://github.com/mukeshsolanki/MarkdownView-Android/");
    //markdownView.loadMarkdownFromAssets("README.md");
    markdownView.setOpenUrlInBrowser(true); // default false

  }
}

查找源代码这里

参考资料

找到完整的参考资料这里