نمایش کد html در صفحات یک برنامه موبایل میتواند بسیار مفید و کاربردی باشد. در این مطلب در مورد چگونگی انجام این کار در اندروید صحبت میکنیم. این مطلب برای کسانی مفید است که با برنامه نویسی اندروید در android studio آشنایی دارند و میخواهند بدانند که چگونه یک کد html را در ویوها نمایش دهند. این کار بسیار ساده است.

نمایش کد HTML در TextView

متد Html.fromHtml(String source) از API level 24 (انروید 7) به بعد منقضی شده است. بنابراین برای این نسخه و بالاتر از قطعه کد زیر استفاده میکنیم:

textView.setText(Html.fromHtml(descriptionUsingTextView, Html.FROM_HTML_MODE_LEGACY));

برای نسخه های پایین تر از API level 24 لازم است تا از کد زیر استفاده شود:

txtTextView.setText(Html.fromHtml(descriptionUsingTextView));

در قطعه کد فوق ما از متد Html.fromHtml(String source, int flags) استفاده کردیم. این روش برای نمایش استایل شده قطعه کد html مفید است. برای مثال:

Html.fromHtml(descriptionUsingTextView, Html.FROM_HTML_MODE_LEGACY)

لیستی از پرچم های متداول در پایین آورده شده است که باید در متد fromHtml استفاده شود:

• FROM_HTML_MODE_COMPACT: این پرچم برای جدا کردن عناصر سطح بلوک با شکست خط استفاده می شود به معنای خط جدید مفرد در بین.

• FROM_HTML_MODE_LEGACY: این پرچم برای جدا کردن عناصر سطح بلوک با خطوط خالی استفاده می شود به معنای دو خط جدید منفرد در بین.

• FROM_HTML_OPTION_USE_CSS_COLORS: از این پرچم استفاده می شود تا نشان دهد که مقادیر رنگی CSS باید به جای مقادیر تعریف شده در Color استفاده شوند.

• FROM_HTML_SEPARATOR_LINE_BREAK_BLOCKQUOTE: از این پرچم استفاده شده است تا نشان دهد متون داخل عناصر <blockquote> به طور پیش فرض از متون دیگر با یک کاراکتر جدید جدا می شوند.

• FROM_HTML_SEPARATOR_LINE_BREAK_DIV: از این پرچم استفاده شده است تا نشان دهد متون داخل عناصر <div> به طور پیش فرض از متون دیگر با یک کاراکتر جدید جدا می شوند.

• FROM_HTML_SEPARATOR_LINE_BREAK_HEADING: از این پرچم استفاده شده است تا نشان دهد متون داخل عناصر <h1> ، <h2> ، <h3> ، <h4> ، <h5> و <h6> به طور پیش فرض از سایر متون با یک کاراکتر جدید جدا می شوند.

• FROM_HTML_SEPARATOR_LINE_BREAK_LIST: از این پرچم استفاده می شود که نشان می دهد متون داخل عناصر <ul> به طور پیش فرض از متون دیگر با یک کاراکتر جدید جدا می شوند.

• FROM_HTML_SEPARATOR_LINE_BREAK_LIST_ITEM: از این پرچم استفاده شده است تا نشان دهد متون داخل عناصر <li> به طور پیش فرض از متون دیگر با یک کاراکتر جدید جدا می شوند.

• FROM_HTML_SEPARATOR_LINE_BREAK_PARAGRAPH: از این پرچم استفاده می شود تا نشان دهد که عناصر داخل <p> به طور پیش فرض از سایر متن ها با یک کاراکتر جدید جدا می شوند.

نمایش کد HTML با استفاده از WebView

اشیاء WebView به ما امکان می دهند محتوای وب را به عنوان بخشی از view خود نمایش دهیم، اما برخی از ویژگی های مرورگرهای توسعه یافته را ندارد. وقتی به کنترل بیشتری بر UI و گزینه های پیکربندی پیشرفته نیاز داریم، WebView مفید است که به ما امکان می دهد صفحات وب را در یک محیط ویژه برای برنامه خود جاسازی کنیم.

برای نمایش کد HTML میتوانیم از روش WebView.loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl) برای نمایش کدهای HTML استفاده کنیم:

webView.loadDataWithBaseURL(null, descriptionUsingWebView, "text/html", "utf-8", null);

برای کسب اطلاعات بیشتر در مورد WebView و گزینه های دیگر برای ارائه محتوای وب، مستندات مربوط به محتوای وب را بخوانید.

برای تست مطالب گفته شده در اندروید استدیو یک پروژه جدید ایجاد کنید. سپس از کدهای زیر در MainActivity آن استفاده کنید. میتوانید در کد زیر از پرچم های مختلف و متن های مختلف html استفده کرده و همه موارد را بررسی کنید:

package com.jackrutorial.displayhtmlcode;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Html;
import android.view.View;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    Button btnTextView;
    Button btnWebView;
    WebView webView;
    TextView txtTextView;

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

        btnTextView = (Button) findViewById(R.id.btnTextView);
        btnWebView = (Button) findViewById(R.id.btnWebView);
        txtTextView = (TextView) findViewById(R.id.txtTextView);
        webView = (WebView) findViewById(R.id.webView);

        final String descriptionUsingTextView = "<h2>Display HTML code in Android using TextView</h2><p>In this tutorial, we show you how to display HTML code in Android using TextView</p>";
        final String descriptionUsingWebView = "<h2>Display HTML code in Android using WebView</h2><p>In this tutorial, we show you how to display HTML code in Android using WebView</p>";


        btnTextView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.N) {
                    txtTextView.setText(Html.fromHtml(descriptionUsingTextView, Html.FROM_HTML_MODE_LEGACY));
                } else {
                    txtTextView.setText(Html.fromHtml(descriptionUsingTextView));
                }

                //hiden html from webview
                webView.loadDataWithBaseURL(null, null, "text/html", "utf-8", null);
            }
        });

        btnWebView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webView.loadDataWithBaseURL(null, descriptionUsingWebView, "text/html", "utf-8", null);

                //hiden html from textview
                txtTextView.setText(null);
            }
        });
    }
}

منابع:
https://developer.android.com/reference/android/webkit/WebView
https://developer.android.com/reference/android/text/Html