1. 程式人生 > >iOS實現簡單圖文混排效果

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 來展示放大後的圖片,並且加入動畫效