Тег Html List не работает в текстовом окне Android. Что я могу сделать?


99

Тег HTML-списка не работает в Android TextView. Это мое строковое содержимое:

String str="A dressy take on classic gingham in a soft, textured weave of stripes that resembles twill.  Take a closer look at this one.<ul><li>Trim, tailored fit for a bespoke feel</li><li>Medium spread collar, one-button mitered barrel cuffs</li><li>Applied placket with genuine mother-of-pearl buttons</li><li>;Split back yoke, rear side pleats</li><li>Made in the U.S.A. of 100% imported cotton.</li></ul>";

Я загрузил его в текстовом виде вот так:

textview.setText(Html.fromHtml(str));

Результат выглядит как абзац. Что я могу сделать? Есть ли какое-то решение?

Редактировать:

webview.loadData(str,"text/html","utf-8");

1
Должен быть text / html, а не texl / html.
— Хлоя

Ответы:


156

Как видно из Htmlисходного кода класса , Html.fromHtml(String)не поддерживаются все теги HTML. В данном случае <ul>и <li>не поддерживаются.

Из исходного кода я составил список разрешенных тегов HTML:

  • br
  • p
  • div
  • em
  • b
  • strong
  • cite
  • dfn
  • i
  • big
  • small
  • font
  • blockquote
  • tt
  • monospace
  • a
  • u
  • sup
  • sub

Так что лучше воспользуйтесь WebViewи его loadDataWithBaseURLметодом. Попробуйте что-то вроде этого:

String str="<html><body>A dressy take on classic gingham in a soft, textured weave of stripes that resembles twill.  Take a closer look at this one.<ul><li>Trim, tailored fit for a bespoke feel</li><li>Medium spread collar, one-button mitered barrel cuffs</li><li>Applied placket with genuine mother-of-pearl buttons</li><li>;Split back yoke, rear side pleats</li><li>Made in the U.S.A. of 100% imported cotton.</li></ul></body></html>";
webView.loadDataWithBaseURL(null, str, "text/html", "utf-8", null);

тогда что я могу сделать, чтобы исправить это?
— Praveen

2
очень важно отметить, что некоторые атрибуты этих «разрешенных» тегов также не поддерживаются. : = (
— Jorgesys

2
Успокойтесь ... Я отредактировал свой ответ, дайте пожалуйста знать, работает ли.
— Cristian

6
На самом деле вы не можете использовать WebView таким же образом, так что на самом деле это не решение проблемы.
— Брилл Паппин

11
Как это решение? вы не можете просто использовать WebView, это очень дорогой виджет по сравнению с TextView. Вы не можете просто использовать WebView для каждого имеющегося форматированного текста.
— SpaceMonkey

135

У меня та же проблема, что я сделал, это переопределил TagHandler по умолчанию . Этот сработал для меня.

public class MyTagHandler implements TagHandler {

    boolean first = true;
    String parent = null;
    int index = 1;
    @Override
    public void handleTag(boolean opening, String tag, Editable output, XMLReader xmlReader) {

        if (tag.equals("ul")) {
            parent = "ul";
        } else if (tag.equals("ol")) {
            parent = "ol";
        }

        if (tag.equals("li")) {
            if (parent.equals("ul")) {
                if (first) {
                    output.append("\n\t•");
                    first = false;
                } else {
                    first = true;
                }
            } else{
                if (first) {
                    output.append("\n\t"+index+". ");
                    first = false;
                    index++;
                } else {
                    first = true;
                }
            }   
        }
    }
}

и для отображения текста ...

myTextView.setText(Html.fromHtml("<ul><li>I am an Android developer</li><li>Another Item</li></ul>", null, new MyTagHandler()));

[Редактировать]

Куитси также опубликовал действительно хорошую библиотеку, которая делает то же самое, полученная по этой ссылке SO .


В итоге мы использовали этот подход. Любые неподдерживаемые HTML-теги мы сами кодируем в тексте. На данный момент это просто ol и ul, но мы добавили в стеки для обработки вложенности списков и хранения индексов при вложении ol. Кроме того, вы можете использовать открывающий логический параметр вместо first.
— JonWillis

6
@Aman Gautam очень здорово, спасибо за это! Вы знаете, как добавить табуляцию к тексту, если он занимает более одной строки? С помощью этого кода после 2-й строки текст выравнивается с номером, а не с табуляцией, чтобы число было разделено. Я попытался сделать несколько вещей, но не смог этого понять
— RyanG

То же самое и здесь, разрывы строк в списке вызывают проблемы с этим подходом.
— Андреас Рудольф

Вместо использования вставленного символа маркера, может быть лучше использовать символ Unicode: output.append ("\ n \ t \ u2022");
— Мэтт Макминн

Спасибо за этот красивый код, но я не могу использовать его, пока мы не найдем решение, как исправить отступы в несколько строк
— peter.bartos

68

Полный пример проекта находится по адресу https://bitbucket.org/Kuitsi/android-textview-html-list .
Образец изображения доступен по адресу https://kuitsi.bitbucket.io/stackoverflow3150400_screen.png.

Это решение наиболее близко к ответу Маши . Некоторый код также взят из внутреннего класса android.text.Html.HtmlToSpannedConverter. Он поддерживает вложенные упорядоченные и неупорядоченные списки, но слишком длинные тексты в упорядоченных списках по-прежнему выравниваются по номеру элемента, а не по тексту. Смешанные списки (ol и ul) тоже нуждаются в доработке. Пример проекта содержит реализацию Html.TagHandler, который передается в Html.fromHtml (String, ImageGetter, TagHandler) .

Изменить: для более широкой поддержки тегов HTML, возможно, стоит попробовать https://github.com/NightWhistler/HtmlSpanner .


Пока что лучшее решение. Спасибо
— peter.bartos

Ни один вопрос отслеживания в Bitbucket репо, поэтому размещение здесь: вам нужно добавить проверку здесь и здесь для output.length() > 0как вif (output.length() > 0 && output.charAt(output.length() - 1) != '\n')
— mindeh

2
Чтобы другие люди не тратили на это 2 часа, NightWhistler HtmlSpanner удаляет все символы с диакритическими знаками по неизвестной причине.
— EpicPandaForce

@Kuitsi спасибо за решение. С этим есть одна проблема: когда html-текст имеет вид «<ul> <li> something </li> </ul>», то последняя буква в «something» не отображается в списке.
— Сэм Берг,

Это очень хорошее решение, НО с двумя недостатками: 1) оно не поддерживает Android ≥ 7 и 2) не устанавливает начальный отступ для первого уровня списка.
— soshial

24

Небольшое исправление в коде Aman Guatam. У функции выше есть проблема с отображением символа новой строки. Например: если перед <li>тегом является <p>тег, отображаются 2 символа новой строки. Вот обновленный код:

import org.xml.sax.XMLReader;

import android.text.Editable;
import android.text.Html.TagHandler;

public class ListTagHandler implements TagHandler {
    boolean first = true;

    @Override
    public void handleTag(boolean opening, String tag, Editable output, XMLReader xmlReader) {

        // TODO Auto-generated method stub
        if (tag.equals("li")) {
            char lastChar = 0;
            if (output.length() > 0)
                lastChar = output.charAt(output.length() - 1);
            if (first) {
                if (lastChar == '\n')
                    output.append("\t•  ");
                else
                    output.append("\n\t•  ");
                first = false;
            } else {
                first = true;
            }
        }
    }
}

Просто, но эффективно
— steven0529 03

А как насчет упорядоченного списка?
— разработчик Android

13

ПРЕДУПРЕЖДЕНИЕ

по состоянию на 10 февраля 2016 г. android.text.Htmlфактически поддерживаетli и ulтеги и использует базовые new BulletSpan(), что означает , в последних версиях Android отHtml.TagHandler решения , размещенные здесь будут игнорироваться

убедитесь, что ваш код обрабатывает это изменение, если вы ожидаете BulletSpan с большим промежутком, чем по умолчанию, вам нужно будет какое-то решение, которое выполняет поиск / замену промежутков


4
Но этот новый класс Html доступен только в Android Nи более поздних версиях .
— Сакибой

1
Ага - значит, нужно учитывать, что разные версии ОС будут вести себя по-разному. Поэтому я рекомендую решение, которое находит и заменяет BulletSpan после того, как HTML был проанализирован на разные промежутки. Реализация по умолчанию для версий после N будет использовать поле по умолчанию, вы можете найти и заменить его на нужное поле.
— Кассим

Всегда будьте в курсе.
— Кай Ван

9

Другое решение с использованием LeadingMarginSpan. Обрабатывает упорядоченные и неупорядоченные списки, а также вложение.

public class ListTagHandler implements TagHandler
{
    private int                 m_index     = 0;
    private List< String >  m_parents   = new ArrayList< String >( );

    @Override
    public void handleTag( final boolean opening, final String tag, Editable output,    final XMLReader xmlReader )
    {
        if( tag.equals( "ul" ) || tag.equals( "ol" ) || tag.equals( "dd" ) )
        {
            if( opening )
            {
                m_parents.add( tag );
            }
            else m_parents.remove( tag );

            m_index = 0;
        }
        else if( tag.equals( "li" ) && !opening ) handleListTag( output );
    }

    private void handleListTag( Editable output )
    {
        if( m_parents.get(m_parents.size()-1 ).equals( "ul" ) )
        {
            output.append( "\n" );
            String[ ] split = output.toString( ).split( "\n" );

            int lastIndex = split.length - 1;
            int start = output.length( ) - split[ lastIndex ].length( ) - 1;
            output.setSpan( new BulletSpan( 15 * m_parents.size( ) ), start, output.length( ), 0 );
        }
        else if( m_parents.get(m_parents.size()-1).equals( "ol" ) )
        {
            m_index++ ;

            output.append( "\n" );
            String[ ] split = output.toString( ).split( "\n" );

            int lastIndex = split.length - 1;
            int start = output.length( ) - split[ lastIndex ].length( ) - 1;
            output.insert( start, m_index + ". " );
            output.setSpan( new LeadingMarginSpan.Standard( 15 * m_parents.size( ) ), start, output.length( ), 0 );
        }
    }
}

5
Мне нравится идея использовать Spans, но я не могу заставить вложенный список работать с этим кодом. Обе линии output.setSpan(...)java.lang.RuntimeException: PARAGRAPH span must start at paragraph boundary
— вылетели

Спасибо за хорошее решение! Он также делает отступы для многострочного текста
— peter.bartos

2
почему вы используете Vector вместо простого ArrayList? Вектор предназначен для многопоточности ...
— разработчик Android

@androiddeveloper программист на c ++, мой плохой, не стесняйтесь редактировать ответ
— Маша

1
Я написал как Фрагмент androidsnippets.com/…
— Pratik Butani

8

Если вам нужно только отформатировать список, сделайте его простым и скопируйте / вставьте символ Юникода в свой TextView для достижения того же результата.

• Символ Юникода "BULLET" (U + 2022)


6

Я пришел сюда в поисках реализации TagHandler. Оба ответа Truong Nguyen и Aman Guatam очень хороши, но мне нужна была смешанная версия обоих: мне нужно было мое решение, чтобы не переформатировать его и иметь возможность повторно распределять <ol>теги, поскольку я разбираю что-то вроде<h3>title</h3><ol><li>item</li><li>item</li><li>item</li></ol> .

Вот мое решение.

import org.xml.sax.XMLReader;

import android.text.Editable;
import android.text.Html.TagHandler;

public class MyTagHandler implements TagHandler {
    boolean first = true;
    String parent = null;
    int index = 1;

    public void handleTag(final boolean opening, final String tag,
            final Editable output, final XMLReader xmlReader) {

        if (tag.equals("ul")) {
            parent = "ul";
                    index = 1;
        } else if (tag.equals("ol")) {
            parent = "ol";
                    index = 1;
        }
        if (tag.equals("li")) {
            char lastChar = 0;
            if (output.length() > 0) {
                lastChar = output.charAt(output.length() - 1);
            }
            if (parent.equals("ul")) {
                if (first) {
                    if (lastChar == '\n') {
                        output.append("\t•  ");
                    } else {
                        output.append("\n\t•  ");
                    }
                    first = false;
                } else {
                    first = true;
                }
            } else {
                if (first) {
                    if (lastChar == '\n') {
                        output.append("\t" + index + ". ");
                    } else {
                        output.append("\n\t" + index + ". ");
                    }
                    first = false;
                    index++;
                } else {
                    first = true;
                }
            }
        }
    }
}

Обратите внимание: поскольку мы сбрасываем значение индекса всякий раз, когда начинается новый список, он НЕ БУДЕТ работать, если вы вложите списки, как в <ol><li>1<ol><li>1.1</li><li>1.2</li></ol><li>2</li></ol>

  1. 1
    1. 1.1
    2. 1.2
  2. 2

С этим кодом вы получите 1, 1, 2, 3вместо 1, 1, 2, 2.


Этот код работает до версии 23. Как заставить его работать на 24 и выше?
— Абхинав Тьяги,

3

Конечно, в Android TextView есть способ отображать маркеры. Вы можете заменить <li>теги на &#149;(это HTML-код для маркера).

Если вы хотите попробовать другие значки списка, используйте предпочтительный значок из таблицы - эта ссылка;

http://www.ascii-code.com/


У меня не сработало. Вместо этого в Android 7.1.1 и 6.0.1 вместо маркера в TextView появляется прямоугольник со сквозным знаком x.
— user1652110

3

Вы можете просто заменить "li" на юникоды.

    @Override
public void handleTag(boolean opening, String tag, Editable output, XMLReader xmlReader) {

    if (tag.equalsIgnoreCase("li")) {
        if (opening) {
            output.append("\u2022 ");
        } else {
            output.append("\n");
        }
    }
}

2

Ответ лорда Волдерморта - хорошая отправная точка. Однако мне нужен olтег для отображения упорядоченного списка 1. 2. 3. ....вместо маркеров. Кроме того, для правильной работы вложенных тегов требуется особая обработка.

В моем коде, я поддерживал стек (parentList) следить за открытыми и закрытыми ulи olтег , а также знать текущий открытый тег. Кроме того, a levelWiseCounterиспользуется для поддержания разных подсчетов в случае вложенных olтегов.

myTextView.setText(Html.fromHtml("your string", null, new CustomTagHandler()));

. . .

private static class CustomTagHandler implements TagHandler
   {
      int level = 0;
      private LinkedList<Tag> parentList = new LinkedList<DetailFragment.CustomTagHandler.Tag>();
      private HashMap<Integer, Integer> levelWiseCounter = new HashMap<Integer, Integer>();

      @Override
      public void handleTag(boolean opening, String tag, Editable output, XMLReader xmlReader)
      {
         if (tag.equalsIgnoreCase("ul") || tag.equalsIgnoreCase("ol"))
         {
            if (opening)
            {
               if (tag.equalsIgnoreCase("ul"))
               {
                  parentList.push(Tag.UL);
               }
               else
               {
                  parentList.push(Tag.OL);
               }
               level++;
            }
            else
            {
               if (!parentList.isEmpty())
               {
                  parentList.pop();

                  //remove counter at that level, in any present.
                  levelWiseCounter.remove(level);
               }
               level--;
               if (level < 0)
               {
                  level = 0;
               }
            }
         }
         else if (tag.equalsIgnoreCase("li"))
         {
            if (opening && level > 0)
            {
               //new line check
               int length = output.toString().length();
               if (length > 0 && (output.toString().charAt(length - 1) == '\n'))
               {
               }
               else
               {
                  output.append("\n");
               }

               //add tabs as per current level of li
               for (int i = 0; i < level; i++)
               {
                  output.append("\t");
               }

               // append dot or numbers based on parent tag
               if (Tag.UL == parentList.peek())
               {
                  output.append("•");
               }
               else
               {
                  //parent is OL. Check current level and retreive counter from levelWiseCounter
                  int counter = 1;
                  if (levelWiseCounter.get(level) == null)
                  {
                     levelWiseCounter.put(level, 1);
                  }
                  else
                  {
                     counter = levelWiseCounter.get(level) + 1;
                     levelWiseCounter.put(level, counter);
                  }
                  output.append(padInt(counter) + ".");
               }

               //trailing tab
               output.append("\t");

            }
         }
      }

      /**
       * Add padding so that all numbers are aligned properly. Currently supports padding from 1-99.
       * 
       * @param num
       * @return
       */
      private static String padInt(int num)
      {
         if (num < 10)
         {
            return " " + num;
         }
         return "" + num;
      }

      private enum Tag
      {
         UL, OL
      }
   }

2

Как насчет следующего кода (по этой ссылке ):

public class TextViewHtmlTagHandler implements TagHandler
  {
  /**
   * Keeps track of lists (ol, ul). On bottom of Stack is the outermost list
   * and on top of Stack is the most nested list
   */
  Stack<String>                   lists          =new Stack<String>();
  /**
   * Tracks indexes of ordered lists so that after a nested list ends
   * we can continue with correct index of outer list
   */
  Stack<Integer>                  olNextIndex    =new Stack<Integer>();
  /**
   * List indentation in pixels. Nested lists use multiple of this.
   */
  private static final int        indent         =10;
  private static final int        listItemIndent =indent*2;
  private static final BulletSpan bullet         =new BulletSpan(indent);

  @Override
  public void handleTag(final boolean opening,final String tag,final Editable output,final XMLReader xmlReader)
    {
    if(tag.equalsIgnoreCase("ul"))
      {
      if(opening)
        lists.push(tag);
      else lists.pop();
      }
    else if(tag.equalsIgnoreCase("ol"))
      {
      if(opening)
        {
        lists.push(tag);
        olNextIndex.push(Integer.valueOf(1)).toString();// TODO: add support for lists starting other index than 1
        }
      else
        {
        lists.pop();
        olNextIndex.pop().toString();
        }
      }
    else if(tag.equalsIgnoreCase("li"))
      {
      if(opening)
        {
        if(output.length()>0&&output.charAt(output.length()-1)!='\n')
          output.append("\n");
        final String parentList=lists.peek();
        if(parentList.equalsIgnoreCase("ol"))
          {
          start(output,new Ol());
          output.append(olNextIndex.peek().toString()+". ");
          olNextIndex.push(Integer.valueOf(olNextIndex.pop().intValue()+1));
          }
        else if(parentList.equalsIgnoreCase("ul"))
          start(output,new Ul());
        }
      else if(lists.peek().equalsIgnoreCase("ul"))
        {
        if(output.charAt(output.length()-1)!='\n')
          output.append("\n");
        // Nested BulletSpans increases distance between bullet and text, so we must prevent it.
        int bulletMargin=indent;
        if(lists.size()>1)
          {
          bulletMargin=indent-bullet.getLeadingMargin(true);
          if(lists.size()>2)
            // This get's more complicated when we add a LeadingMarginSpan into the same line:
            // we have also counter it's effect to BulletSpan
            bulletMargin-=(lists.size()-2)*listItemIndent;
          }
        final BulletSpan newBullet=new BulletSpan(bulletMargin);
        end(output,Ul.class,new LeadingMarginSpan.Standard(listItemIndent*(lists.size()-1)),newBullet);
        }
      else if(lists.peek().equalsIgnoreCase("ol"))
        {
        if(output.charAt(output.length()-1)!='\n')
          output.append("\n");
        int numberMargin=listItemIndent*(lists.size()-1);
        if(lists.size()>2)
          // Same as in ordered lists: counter the effect of nested Spans
          numberMargin-=(lists.size()-2)*listItemIndent;
        end(output,Ol.class,new LeadingMarginSpan.Standard(numberMargin));
        }
      }
    else if(opening)
      Log.d("TagHandler","Found an unsupported tag "+tag);
    }

  private static void start(final Editable text,final Object mark)
    {
    final int len=text.length();
    text.setSpan(mark,len,len,Spanned.SPAN_MARK_MARK);
    }

  private static void end(final Editable text,final Class<?> kind,final Object... replaces)
    {
    final int len=text.length();
    final Object obj=getLast(text,kind);
    final int where=text.getSpanStart(obj);
    text.removeSpan(obj);
    if(where!=len)
      for(final Object replace : replaces)
        text.setSpan(replace,where,len,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    return;
    }

  private static Object getLast(final Spanned text,final Class<?> kind)
    {
    /*
     * This knows that the last returned object from getSpans()
     * will be the most recently added.
     */
    final Object[] objs=text.getSpans(0,text.length(),kind);
    if(objs.length==0)
      return null;
    return objs[objs.length-1];
    }

  private static class Ul
    {
    }

  private static class Ol
    {
    }
  }

1
Этот ответ имеет лишь немного другое форматирование по сравнению с исходным источником этого, который был создан для поддержки другого ответа на тот же вопрос: stackoverflow.com/a/17365740/262462 :)
— Куитси 02

правда. не заметил этого.
— разработчик Android

2

У меня была проблема, что после списка с решением @Kuitsis всегда появлялась пустая строка. Я добавил несколько строк в handleTag (), и теперь пустые строки исчезли:

@Override
public void handleTag(final boolean opening, final String tag, final Editable output, final XMLReader xmlReader) {
    if (UL_TAG.equalsIgnoreCase(tag)) {
        if (opening) {   // handle <ul>
            lists.push(new Ul());
        } else {   // handle </ul>
            lists.pop();
            if (output.length() > 0 && output.charAt(output.length() - 1) == '\n') {
                output.delete(output.length() - 1, output.length());
            }
        }
    } else if (OL_TAG.equalsIgnoreCase(tag)) {
        if (opening) {   // handle <ol>
            lists.push(new Ol()); // use default start index of 1
        } else {   // handle </ol>
            lists.pop();
            if (output.length() > 0 && output.charAt(output.length() - 1) == '\n') {
                output.delete(output.length() - 1, output.length());
            }
        }
    } else if (LI_TAG.equalsIgnoreCase(tag)) {
        if (opening) {   // handle <li>
            lists.peek().openItem(output);
        } else {   // handle </li>
            lists.peek().closeItem(output, lists.size());
        }
    } else {
        Log.d("TagHandler", "Found an unsupported tag " + tag);
    }
}

2

Вы можете использовать Html.TagHandler. Ниже можно использовать для котлина

    class UlTagHandler : Html.TagHandler {
    override fun handleTag(
        opening: Boolean, tag: String, output: Editable,
        xmlReader: XMLReader
    ) {
        if (tag == "ul" && !opening) output.append("\n")
        if (tag == "li" && opening) output.append("\n\t•")
    }
}

и

textView.setText(Html.fromHtml(myHtmlText, null, UlTagHandler()));

0

это подтверждение того, что сказал касим. есть фрагментация. Я нашел, как решить эту проблему. мне нужно переименовать <li>и ul в настраиваемый тег. так:

myHTML.replaceAll("</ul>","</customTag>").replaceAll("<ul>","<customTag>");
//likewise for li

затем в моем обработчике я могу найти этот customTag (который ничего не делает) и заставить его что-то делать.

//now my handler can handle the customtags. it was ignoring them after nougat. 
 public class UlTagHandler implements Html.TagHandler {
        //for ul in nougat and up this tagHandler is completely ignored
        @Override
        public void handleTag(boolean opening, String tag, Editable output,
                              XMLReader xmlReader) {

            if (tag.equals("customtag2") && opening)
            output.append("\n\t\u25CF\t");
        if (tag.equals("customtag2") && !opening)
            output.append("\n");
        }
    }

это должно заставить его работать для всех версий Android.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.