Как вывести HTML в TextView


Довольно часто при добавлении текста на экран нужно выводить не обычный текст, а текст с HTML-тегами. Это позволяет не плодить большое количество TextView, чтобы использовать различное стилевое оформление для разных кусков текста. Ниже мы рассмотрим, как можно вывести HTML в TextView, чтобы он при этом «отработался», поскольку просто сделать setText(), где в качестве параметра будет html-строка — не получится.

1. Прежде всего, создадим разметку для нашего экрана — res/layout/activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
 
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="TextView" />
 
</RelativeLayout>

Здесь простой layout, в котором мы отображаем только один виджет TextView. На данный момент мы задаем значение текста по умолчанию «TextView». Далее мы его будем менять программно на текст, включающий в себя html-код.

2. Добавьте отступы в файл res/values/dimen.xml

1
2
3
4
<resources>    
    <dimen name="activity_horizontal_margin">10dp</dimen>
    <dimen name="activity_vertical_margin">10dp</dimen>
</resources>

3. Создадим MainActivity.java, где будет добавляться html-текст:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
package ru.androiddocs.firstapp;
 
import android.app.Activity;
import android.os.Bundle;
import android.text.Html;
import android.widget.TextView;
 
public class MainActivity extends Activity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        TextView textEl = (TextView) findViewById(R.id.textView1);
        textEl.setText(Html.fromHtml("this is <b>bold</b> text"));
    }    
}

Как видно из кода, в setText() мы в качестве параметра передаем результат выполнения Html.fromHtml(). Этот метод позволит добавить теги «как есть».

Теперь если мы запустим наше приложение, то увидим текст, где слово bold выделено жирным шрифтом.

Как вывести HTML в TextView

Рассмотрим пример использования строкового ресурса с HTML. Для начала нам необходимо в файле res/values/string.xml обернуть html-строку в код CDATA:

1
<![CDATA[ здесь html-код ]]>

Например:

1
2
3
4
<string name="info"><![CDATA[   
    <font color="#4713f2"><b>Сумма пополнения</b></font> - количество денег, которыми вы периодически пополняете счет
    <br></br>]]>
</string>

Теперь мы можем получить данный ресурс и вывести его в TextView:

1
2
3
TextView textEl = (TextView) findViewById(R.id.textView1);
String infoText = getResources().getString(R.string.info);
textEl.setText(Html.fromHtml(infoText));

Комментариев: 6 на “Как вывести HTML в TextView

  1. dimon

    а как теперь это дело по клику на button прикрутить чтобы только по клику выводилось ???

    Reply
    1. admin Post author

      Добавьте установку текста внутрь обработчика клика по кнопке

      Reply
  2. Денис

    День добрый. Скажите, а как можно вывести в html iframe?

    Reply
    1. admin Post author

      Не понятно, что именно вы хотите сделать в Андроид-приложении

      Reply
  3. Анатолий

    Как сделать, чтобы таблицы и картинки из html отображались?

    Reply
  4. Лала

    Как вывести html с картинками?

    Reply

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*