Если вы планируете отображать длинный контент в своем приложении, например, запись в блоге, то вам необходимо продумать и спланировать, как этот контент будет отображаться. Несмотря на то, что можно использовать текстовый вид, вам будет трудно настроить его для учета таких особенностей, как ссылки, цвета, заголовки и т.д. TextView — не самый лучший путь. Таким образом, у нас остается два варианта: webview или markdown.

В этом посте мы рассмотрим markdown. Обратите внимание, что большинство библиотек Markdown на самом деле созданы на основе WebView.

(a). tiagohm/MarkdownView

Android-библиотека для отображения текста в формате markdown.

Эта библиотека использует Flexmark и некоторые его расширения.

Библиотека может:

  • отображать уцененный текст из строки.
  • отображать уцененный текст из assets.
  • рендерить уценку из URL.

В случае URL она использует AsyncTask для загрузки уценки, чтобы ваше приложение не зависло. Во всех этих случаях все, что вам нужно, это передать соответствующую строку, будь то URL, текст уценки или путь к файлу.

Шаг 1: Установите его

Приложение размещено в jitpack, поэтому вам нужно добавить jitpack в качестве maven url в разделе allProjects в корневом файле build.gradle:

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

Затем добавьте зависимость в файл build.gradle на уровне приложения:

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

Затем синхронизируйте свой проект.

Шаг 2: Добавьте 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());

или загрузить внешний CSS, расположенный в assets:

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

Затем загрузите строку разметки:

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

Или загрузить уценку из assets:

mMarkdownView.loadMarkdownFromAsset("markdown1.md");

Или загрузите markdown как объект файла. Этот файл, например, может быть загружен из файловой системы:

mMarkdownView.loadMarkdownFromFile(new File());

Или вы можете загрузить уценку из сети:

mMarkdownView.loadMarkdownFromUrl("url");

Вот и все.

Шаг 3: Дополнительные возможности

Вы можете использовать пользовательский css. Либо создайте CSS программно с помощью Java/Kotlin:

//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] Курсив *Текст* или _Текст_
  • [x] Зачеркивание `Text»
  • [x] Горизонтальные правила ---
  • [x] Заголовки #
  • [x] Ссылки [alt](url)
  • [x] Изображения ![alt](url)
  • [x] Код
  • [x] Блок-цитата
  • [x] Вложенная цитата
  • [x] Списки
  • [x] Таблицы
  • [x] TaskList
  • [x] Автоссылка
  • [x] Аббревиатура
  • [x] Знак ==Текст==
  • [x] Подстрочный индекс H~2~O
  • [x] Надстрочный знак 10^-10^
  • [x] Клавиша @ctrl+alt+del@
  • [x] MathJax Inline $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
  • [x] MathJax $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
  • [x] Сноски
  • [x] Изменение размера изображения ![alt](url@100px|auto)
  • [x] Подсветка синтаксиса (с помощью Highlight.js)
  • [x] Emoji (EmojiOne v2) :smile:)
  • [x] Пользовательский CSS
  • [x] Youtube @[youtube](fM-J08X6l_Q)
  • [x] Twitter
  • [x] JavaScripts
  • [x] Label --DEFAULT-- ---SUCCESS--- ----WARNING---- -----DANGER-----
  • [x] Bean `{{fieldName}}»
  • [x] Пользовательские атрибуты `{ #id .class name=value name=’value’}}
  • [x] Выравнивание текста, размер текста и цвета текста с помощью пользовательских атрибутов

Пример

Вот пример 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;
        }
    }
}

Здесь находится ссылка на исходный код.

Ссылка

Подробнее об этой библиотеке здесь

(b). falnatsheh/MarkdownView

MarkdownView — это веб-вью для Android с возможностью загрузки текста или файла Markdown и отображения его в виде HTML, он использует MarkdownJ и расширяет веб-вью Android.

MarkdownView (Markdown For Android) — это библиотека для Android, которая помогает отображать текст или файлы Markdown (локальные/удаленные) в виде HTML, а также стилизовать вывод с помощью CSS.

Сам MarkdownView расширяет Android Webview и добавляет необходимую логику для разбора Markdown (используя MarkdownJ) и отображения HTML на экране.

Шаг 1: Установка

Установите MarkdownView из jcenter:

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

Шаг 2: Добавить в макет

Добавьте MarkdownView в макет XML:

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

Шаг 3: Напишите код

Если вы используете 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 для локальной загрузки уценки:

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
    }
}

Как загрузить уценку из строки

Если у вас в памяти хранится уценка в виде строки, этот пример показывает, как ее можно загрузить:

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());
    }
}

Как преобразовать Markdowb из онлайн

Если вы храните файл уценки на удаленном хостинге и хотите загрузить и отрендерить его, вот как это сделать:

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");
    }
}

Получить доступ к этим примерам здесь

Демо

Вот демо:

Справочник

Найти полную справку здесь

(c). mukeshsolanki/MarkdownView-Android

MarkdownView — это простая библиотека, которая поможет вам отображать Markdown текст или файлы на Android в виде html страницы, как на Github.

Шаг 1: Установка

Добавьте jitpack в файл build.gradle корневого уровня:

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 из assets:

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

  }
}

Найти исходный код здесь.

Ссылка

Найти полную ссылку здесь.