iOS實現簡單圖文混排效果

在很多新聞類或有文字展示的應用中現在都會出現圖文混排的介面例如網易新聞等，乍一看去相似一個網頁，其實這樣效果並非由UIWebView 載入網頁實現。現在分享一種比較簡單的實現方式

 

iOS sdk中為我們提供了一套完善的文字排版開發組件：CoreText。CoreText庫中提供了很多的工具來對文本進行操作，例如CTFont、CTLine、CTFrame等。利用這些工具可以對文字字型每一行每一段落進行操作。

此例中預設圖片都在右上方，且為了美觀和開發簡便設定所佔寬度都相同。

 

1.         首先，需要引入CoreText庫

 

在需要使用的類檔案中添加#import <CoreText/CoreText.h>標頭檔。

2.         設定文本的參數

建立一個NSMutableAttributedString對象，包含所需展示的文本字串。這樣就可以對其進行設定了。通過CTFontCreateWithName函數建立一個CTFont對象，利用NSMutableAttributedString對象的addAttribute方法進行設定。類似的方法可以設定字間距。

對其方式與行間距的設定方式：

[cpp] 
// 文本對齊 
    CTTextAlignment alignment = kCTLeftTextAlignment; 
    CTParagraphStyleSetting alignmentStyle; 
    alignmentStyle.spec = kCTParagraphStyleSpecifierAlignment; 
    alignmentStyle.valueSize = sizeof(alignment); 
    alignmentStyle.value = &alignment; 
 // 建立設定數組 
            CTParagraphStyleSetting settings[] ={alignmentStyle}; 
CTParagraphStyleRef style = CTParagraphStyleCreate(settings, 1); 

同樣使用addAttribute設定字串對象。這樣的方法還可以設定行間距，段間距等參數。

3.         計算圖片所佔高度。圖片可以使用UIImageView 來進行顯示。很容易便可擷取每張圖片所佔總高度。

4.         由於圖片寬度是固定的這樣就可以計算每行文字縮短的字數。只要文本的總體高度低於映像總高度則文字長度都是縮短的。用CTTypesetterSuggestLineBreak函數動態計算每一行裡的字數，因為每一行裡面的中文字、標點符號、數字、字母都不一樣所以可以顯示的字數肯定也是不同的，所以需要作這樣的計算。這樣迴圈直至文本結束，就可以知道有多少行字了。再根據字型高度和行間距得出總的文本高度，如果文本高度大於圖片總高度那麼顯示地區的Frame高度就是文本的高度，反之亦然。

5.         繪製文本：

設定每一行繪製文本的區間：

[cpp]
CFRange lineRange = CFRangeMake(currentIndex, lineLength); 
建立文本行對象 
CTLineRef line = CTTypesetterCreateLine(typeSetter, lineRange); 
CGFloat x = [self textOffsetForLine:line inRect:self.bounds]; 
// 設定一行的位置 
CGContextSetTextPosition(context, x, y); 
// 繪製一行文字 
    CTLineDraw(line, context); 

6.         其他功能：

在完成文本繪製功能後可以加入調整文字大小的功能，和圖片的放大的功能。

文字大小可以通過直接設定字型大小後重新繪製文本來實現。

圖片放大可以在視圖上添加一個新的UIImageView 來展示放大後的圖片，並且加入動畫效