Melhores Bibliotecas MarkdownView do Android

Se você está pensando ou exibindo conteúdo longo em seu aplicativo, por exemplo, um post no blog, então você precisa pensar e planejar como esse conteúdo será apresentado. Mesmo que seja possível usar uma visualização de texto, você terá dificuldade para personalizar a conta para recursos como links, cores, cabeçalhos, etc. O TextView não é um bom caminho a seguir. Isso nos deixa com duas opções: webview ou markdown.

Neste post, vamos olhar para o markdown. Note que a maioria das bibliotecas de Markdown são realmente construídas a partir do WebView.

(a). tiagohm/MarkdownView

Biblioteca Android para exibir texto de marcação para baixo.

Esta biblioteca usa Flexmark e algumas de suas extensões.

A biblioteca pode:

renderizar a marcação para baixo a partir de 'string'.
Renderizar markdown a partir de assets.
Renderizar markdown a partir de um URL.

Em casos de URL ela utiliza AsyncTask para baixar a marcação para que seu aplicativo não congele. Em todos esses casos, tudo o que você precisa é passar o "string" apropriado, seja ele um "URL", um texto de remarcação para baixo ou um caminho de arquivo.

Etapa 1: Instale o aplicativo

Ele está hospedado no jitpack, então você precisará adicionar o jitpack como um maven url sob o fechamento de todos os projetos em seu arquivo build.gradle de nível de raiz:

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

Em seguida, adicione a dependência em seu arquivo build.gradle de nível de aplicação:

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

Em seguida, sincronize seu projeto.

Passo 2: Adicionar MarkdownView ao Layout

O próximo passo é ir para o seu layout e adicionar o MarkdownView lá:

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

Etapa 3: Markdown de carga

Se você estiver usando Java, comece referenciando o MarkdownView:

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

Se você estiver usando Kotlin, não há necessidade de fazer isso, uma vez que você pode importar a vista usando Kotlin synthetics ou ainda melhor através de ViewBinding.

Então, em ambos os casos, procedemos. Você pode usar o CSS padrão:

mMarkdownView.addStyleSheet(new Github());

ou carregar um css externo localizado nos assets:

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

Em seguida, carregue a marcação "string" para baixo:

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

Ou carregar a marcação para baixo a partir de assets:

mMarkdownView.loadMarkdownFromAsset("markdown1.md");

Ou carregar o markdown como um objeto de arquivo. Este arquivo, por exemplo, pode ser carregado a partir do sistema de arquivo:

mMarkdownView.loadMarkdownFromFile(new File());

Ou você pode carregar o markdown a partir da Internet:

mMarkdownView.loadMarkdownFromUrl("url");

É isso aí.

Passo 3: Características adicionais

Você pode usar o css personalizado. Ou construir o CSS programmaticamente via 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);

Ou carregar o CSS a partir de um arquivo externo:

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

Você também pode carregar um arquivo Javascript externo:

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

Esta é uma biblioteca rica em recursos. Aqui estão as suas características:

Texto arrojado **** ou __Texto__`.
Itálico *texto* ou _texto_
x] Strikethrough ~~~Text~~~
Regras Horizontais ---
Cabeçalhos #`
Links [alt](url)
Imagens ![alt](url)
Código
x] Blockquote
x] Blockquote aninhado
Listas
Tabelas
Lista de tarefas
AutoLink
Abreviação
Mark ===Text===`
Assinatura H~2~O
Super-escrito 10^-10^
Tecla @ctrl+alt+del@`
MathJax Inline `$x = {-b ^pm ^sqrt{b^2-4ac} \acima de 2a
MathJax $$x = {-b ^pm ^sqrt{b^2-4ac} \acima de 2a$$`
Notas de rodapé
Image Resizing ![alt](url@100px|auto)
Destaque de sintaxe (usando Highlight.js)
Emoji (EmojiOne v2) :smile:
CSS personalizado
Youtube @[youtube](fM-J08X6l_Q)
Twitter
x] JavaScripts
Rótulo --DEFAULT--' ---SUCCESS--' ----WARNING----' -----DANGER-----'.
Bean {{{nome do campo}}`
Atributos personalizados { #id .class name='value name='value'}`
Alinhamento de Texto, Tamanho do Texto e Cores do Texto usando Atributos Personalizados

Exemplo

Aqui está um exemplo de MarkdownView usando esta biblioteca:

**activity_main.xml***

Começamos por criar o layout:

<?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***

Depois escrevemos nosso código, seja em kotlin ou 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;
        }
    }
}

Aqui é a referência do código fonte.

Referência

(b). falnatsheh/MarkdownView

MarkdownView é uma visualização web do Android com a capabilidade de carregar texto ou arquivo Markdown e exibi-lo como HTML, ele usa MarkdownJ e estende a visualização web do Android.

MarkdownView (Markdown Para Android) é uma biblioteca Android que ajuda a exibir o texto ou arquivos Markdown (local/remoto) como HTML formatado, e estilizar a saída usando CSS.

O próprio MarkdownView estende o Webview do Android e adiciona a lógica necessária para analisar Markdown (usando MarkdownJ) e exibir o HTML de saída na visualização.

Passo 1: Instalação

Instalar MarkdownView a partir do jcenter:

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

Passo 2: Adicionar ao Layout

Adicione o MarkdownView ao seu layout XML:

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

Passo 3: Escrever Código

Se você estiver usando Java, consulte o MarkdownView a partir de nosso layout:

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

Você também pode usar o view Binding ou a encadernação de dados, quer você esteja usando java ou kotlin. Se você estiver usando Kotlin você pode usar Kotlin Synthetics.

Você também pode criar MarkdownView programmaticamente:

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

Exemplo

Vejamos agora um exemplo completo de como usar a biblioteca MarkdownView para carregar o markdown localmente:

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

**Como aplicar os temas ao MarkdownView***

Digamos que você tem temas e quer exibir o tema. O usuário escolhe um tema a partir de um "gira-discos" e nós aplicamos esse tema para a visualização de marcação:

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

**Como carregar a Markdown a partir de uma "corda "***

Se você tiver sua marca na memória como um "cordão", este exemplo mostra como você pode carregá-lo:

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

**Como Render Markdowb de online***

Se você tiver o arquivo markdown hospedado remotamente e quiser baixá-lo e renderizá-lo, aqui está como você faz isso:

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

Acesse estes exemplos aqui

Demo

Aqui está uma demonstração:

Referência

Encontrar referência completa aqui

(c). mukeshsolanki/MarkdownView-Android

MarkdownView é uma biblioteca simples que ajuda a exibir textos ou arquivos Markdown no Android como uma página html, assim como o Github.

Passo 1: Instalação

Adicione o jitpack em seu arquivo 'build.gradle' de nível de raiz:

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

Em seguida, instale a biblioteca:

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

Passo 2: Adicionar layout

A seguir você precisa adicionar o MarkdowView ao seu layout:

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

Passo 3: Código

Em seguida, escreva o código java ou kotlin:

Faça referência ao MarkdownView:

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

Eis como você define Markdowb a partir de um "cordão":

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

Veja como você carrega o markdown dos 'assets':

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

E aqui está como você carrega a marcação a partir do sistema ou caminho de arquivo:

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

Exemplo

Aqui está um exemplo completo:

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

  }
}

Encontre o código fonte aqui.

Referência

Encontre referência completa aqui.

Categorized in:

Portuguese Vista do conteúdo

Melhores Bibliotecas MarkdownView do Android – 2021

(a). tiagohm/MarkdownView

Etapa 1: Instale o aplicativo

Passo 2: Adicionar MarkdownView ao Layout

Etapa 3: Markdown de carga

Passo 3: Características adicionais

Exemplo

Referência

(b). falnatsheh/MarkdownView

Passo 1: Instalação

Passo 2: Adicionar ao Layout

Passo 3: Escrever Código

Exemplo

Demo

Referência

(c). mukeshsolanki/MarkdownView-Android

Passo 1: Instalação

Passo 2: Adicionar layout

Passo 3: Código

Exemplo

Referência

Oclemy

Other Stories

Exemplo do Android ContentProvider

Melhores Bibliotecas Android para a Execução Repetitiva de Código

Press ESC to close

Or check our Popular Categories...

(a). tiagohm/MarkdownView

Etapa 1: Instale o aplicativo

Passo 2: Adicionar MarkdownView ao Layout

Etapa 3: Markdown de carga

Passo 3: Características adicionais

Exemplo

Referência

(b). falnatsheh/MarkdownView

Passo 1: Instalação

Passo 2: Adicionar ao Layout

Passo 3: Escrever Código

Exemplo

Demo

Referência

(c). mukeshsolanki/MarkdownView-Android

Passo 1: Instalação

Passo 2: Adicionar layout

Passo 3: Código

Exemplo

Referência

Oclemy

Related Articles

Exemplos de conta Android e gerente de contas

Kotlin Android Nested RecyclerView

Exemplo de Kotlin Android StateFlow

Kotlin Android Text To Speech e Speech To Text Example

Other Stories

Exemplo do Android ContentProvider

Melhores Bibliotecas Android para a Execução Repetitiva de Código