iOS開發 關於圖文混排

說到圖文混排，馬上想到的是用第三方的，RTLabel,RcLabel,coretext,等等一些方式。這些東西確實管用。可也得看數據源是什麼。

我現在着手的項目，類似於討論區，主要由帖子構成，圖文混排不可避免。而返回的數據是帶html的 ，數據字段是

message，在這裏放個圖會更加清楚：

紅色箭頭所指的就是圖片，我需要做的就是把這段代碼轉化成圖文混排。

我看了半天，發現一個規律：有圖片的地方是html語言有"<img  id= "這樣的東西，如果是表情則是 "<img src"。馬上想到用正則表達式，把有這些的地方找出來 獲取 NSRange  這樣圖片的位置就找到了。

然後在這個位置放入圖片，完美！！！

扯淡！！！！

忽略了一個問題，我展示的內容肯定是剔除出html的，那這些NSRange已經不是之前的位置了。所以把片擺上去也是不行。

後來發現，在去除掉html語言之後有圖片的位置會變爲"\r\n\n\n\n\n\n\r\n"，這是和返回數據本身有關的東西。這時候一個解決的思路就是通過這些特殊的符號，把文本分開方法：

NSArray *components = [stringContent1componentsSeparatedByString:@"\r\n\n\n\n\n"];

這樣的話就把一大段的字符分割開了。圖片的URL是單獨給出來的，所以只需要按順序排列 字符串－圖片－字符串－圖片－。這個過程需要注意圖片的個數和數組的count值之間的關係，不然程序很容易崩潰。

這時候需要做的就是按順序排下來就行，label自適應然後放上圖片。

如果想要圖片點擊放大，加上屬性

 imageView.userInteractionEnabled =YES;

                _messageLabel.userInteractionEnabled =YES;

這個方法能夠成功的前提是分割字符非常規律，那問題將會很簡單。

然而，現實很殘酷，有各種情況出現。你永遠不知道下一個帖子的作者圖片會怎麼擺出來。所以只能節哀。

在此可以分享一下正則表達式和去除html語言的方法：

- (void *)rexget:(NSString *)staString{

   

    NSString *emotion =@"<img src=\\\"static/image/smiley/default/\\w+";

    // NSString *parten = @"(\\s)*(\\[)(\\s)*(self)(\\s)*(.)(\\s)*(label)(\\s)*(setText)(\\s)*(:)(\\s)*(@)(\\s)*(\".*\")(\\s)*(\\])(\\s)*(;)(\\s)*";

   NSError* error =NULL;

    

    NSRegularExpression *reg1 = [NSRegularExpressionregularExpressionWithPattern:emotionoptions:nilerror:&error];

    

    NSArray* match1 = [reg1matchesInString:staStringoptions:NSMatchingCompletedrange:NSMakeRange(0, [staStringlength])];

    

   if (match1.count !=0)

    {

       NSMutableString *str1 = [NSMutableStringstringWithString:staString];

       NSInteger  lastIndex =0;

       for (NSTextCheckingResult *matcin match1)

        {

           NSRange range = [matcrange];

          //  NSLog(@"%lu,%lu,%@",(unsigned long)range.location,(unsigned long)range.length,[staString substringWithRange:range]);

        }

    }

}

-(NSString *)filterHTML:(NSString *)html

{

   NSScanner * scanner = [NSScannerscannerWithString:html];

   NSString * text =nil;

   while([scannerisAtEnd]==NO)

    {

        //找到標籤的起始位置

        [scanner scanUpToString:@"<"intoString:nil];

        //找到標籤的結束位置

        [scannerscanUpToString:@">"intoString:&text];

       //替換字符

        html = [html stringByReplacingOccurrencesOfString:[NSStringstringWithFormat:@"%@>",text]withString:@""];

    }

    //    NSString * regEx = @"<([^>]*)>";

    //    html = [html stringByReplacingOccurrencesOfString:regEx withString:@""];

   return html;

}

效果圖：

問題仍然存在，再接再厲

從上面的圖可以看出 圖和文字之間有大片的空白，解決這個問題很簡單

 while([str11rangeOfString:@"\n\n"].length>0){

                [str11deleteCharactersInRange: [str11rangeOfString: @"\n\n"]];

            }

           while([str11rangeOfString:@"\r\n"].length>0){

                [str11deleteCharactersInRange: [str11rangeOfString: @"\r\n"]];

            }

str11爲你所分割的字符串，通過這個過濾之後，內容便會變的緊湊

在這之後需要對承載這些子視圖的_messageLabel的frame重新定義，這樣才能保證加在圖片上的手勢不會出錯。

這個問題的用了很長時間才找到。

    _messageLabel.frame =CGRectMake(_messageLabel.left,_userImage.bottom +10, _messageLabel.width, height);

最後：

相應的對行高進行一下改變之後，圖文混排完美解決。

總結：

相對於一些第三方庫來說，這個辦法無疑是笨的，但卻是最簡單的。不需要倒入什麼第三方的庫。只是對label重新佈局，也能更廣泛的適用。

整個問題下來用了斷斷續續用了四天。找了很多第三方的東西，雖然沒怎麼用上，但也有一些收穫。

之後再寫一些關於他們的。

至此！