需要幫助解析html代碼，按順序排序視圖

Question

我有一個html代碼，放入一個我想解析的字符串，然後將其轉換成不同的視圖，並顯示Android中的每個視圖..

HTML示例：

String htmlText = " 
<div class = "quote"> 
<br> 
<br> 
Hello how are you today. 
<p> 
I am fine thank you. 
<br> 
<br> 
<img src="http://testing.jpg"/> 
<br> 
<br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
<br>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. 
<br> 
<img src="http://testing2.jpg"/> 
</div>"; 

對於這種情況，我想顯示機器人的各imageviews和textviews。但所有這些都必須按升序排列。這很重要，因爲內容每次都是動態的，圖像可以在文本之前/之後等。

我可以將內容轉換爲相應的視圖，如將文本設置爲textview，以便不是問題。我的問題是如何解析HTML代碼的方式，內容會按照順序顯示？

我能想到的唯一方法是將html分成幾行，然後檢查它是否是圖片URL或文本。然後我會使用Jsoup進行解析，並將其分別放入相應的視圖中。

String[] parts = htmlText.split(System.getProperty("line.separator")); 

for(int i = 0; i<parts.length;i++){ 

    if(parts[i].contains("<img src=\"")){ 
    Document doc = Jsoup.parse(parts[i]); 
    String imgSrc = doc.getElementsByTag("img").attr("src"); 

    //function to convert imageUrl to imageView 
    converttoImageView(imgSrc); 
    } 
    else{ 

    Document doc2 = Jsoup.parse(parts[i]); 
    converttoTextView(doc2.text()); 
    } 

} 

private void converttoTextView(String text){ 


    View messageView = LayoutInflater.from(((PostViewHolder) holder).message_row.getContext()).inflate(R.layout.reply_message, ((PostViewHolder) holder).message_row, false); 

    TextView message_textview = (TextView) messageView.findViewById(R.id.reply_message); 
    message_textview.setText(text); 


    ((PostViewHolder) holder).message_row.addView(messageView); 

} 

這樣做的問題是，每個文本由線分開線和動態創建TextView的一次函數被調用。我想使textview可選，以便用戶可以複製和粘貼。但我無法選擇整個文本。我只能選擇textview的textview。

輸出，我得到

<TextView> Hello how are you today</TextView> 
<TextView> I am fine thank you </TextView> 
<ImageView>testing.jpg</ImageView> 
<TextView>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</TextView> 
<TextView>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</TextView> 
<ImageView>testing2.jpg</ImageView> 

預計輸出

<TextView> Hello how are you today \n\n I am fine thank you </TextView> 
<ImageView>testing.jpg</ImageView> 
<TextView>Lorem Ipsum is simply dummy text of the printing and typesetting industry.\nLorem Ipsum has been the industry's standard dummy text ever since the 1500s.</TextView> 
<ImageView>testing2.jpg</ImageView> 

Answer 1

我覺得你可以編輯for循環，你可以記錄文字，並將其轉換爲TextView的時候發現<img>

例如：

StringBuilder text = new StringBuilder(); 
for(int i = 0; i<parts.length;i++){ 
    if(parts[i].contains("<img src=\"")){ 
     if (!text.toString().equals("")) { 
      //when find img, judge the text equals empty, if not, convert to TextView 
      converttoTextView(text.toString()); 
      //clean the text after convert 
      text.delete(0, text.length()); 
     } 

     Document doc = Jsoup.parse(parts[i]); 
     String imgSrc = doc.getElementsByTag("img").attr("src"); 

     //function to convert imageUrl to imageView 
     converttoImageView(imgSrc); 
    } else { 
     Document doc2 = Jsoup.parse(parts[i]); 
     //converttoTextView(doc2.text()); 

     //append the doc2 to text, but not execute convert method, just record 
     text.append(doc2+"/n"); 
    } 

} 

if (!text.toString().equals("")) { 
    //when find img, judge the text equals empty, if not, convert to TextView 
    converttoTextView(text.toString()); 
    //clean the text after convert 
    text.delete(0, text.length()); 
} 

希望它能幫助你，它只是一個簡單的方法在你的代碼的基礎上。

Answer 2

您現在可能已經想通了，但如果您仍在尋找解決方案，請查看此庫https://github.com/square1-io/rich-text-android。

特別是可以解析您的HTML字符串電話：

 RichDocument document = RichTextV2.fromHtml(context, 
       html, new RichTextV2.DefaultStyle(context) { 
      @Override 
      public boolean extractImages(){ // this will extract img tags from content 
       return true; 
      } 
     }); 

然後你就可以做到以下幾點：

for(DocumentElement element : document.getElements()){ 

     if(element instanceof RichTextDocumentElement){ 
      String content = ((RichTextDocumentElement)element).contentString(); 
      //set content to your TextView 
     } 
     if(element instanceof ImageDocumentElement){ 
      String imageUrl = ((ImageDocumentElement)element).getImageURL(); 
      //do whatever you want 
     } 

    }