在很多新聞類或有文字展示的應用中現在都會出現圖文混排的界面例如網易新聞等,乍一看去相似一個網頁,其實這樣效果並非由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 來展示放大後的圖片,並且加入動畫效