AWRichText
基於CoreText,物件導向,極簡,易用,高效,支援精確點選,UIView混排,GIF動圖,並不僅僅侷限於圖文混排的富文字排版神器。
程式碼地址:https://github.com/hardman/AWRichText — 喜歡的同學可以star。
接下來會在blog中更新一些具體實現細節。
簡述
很多app中都有聊天功能,圖文混排也是常見的需求。
iOS原生類:NSAttributedString 就是支援圖文混排的。很多應用會用它來實現自己的功能。
但是直接使用它會有很多不方便的地方,大概有下面幾個:
- 太難用,屬性那麼多,而且使用字典構造,每次用都要查一下文件。更不要說大規模使用了
- 不支援GIF動圖
- 不支援區域性精確點選
- 不支援UIView與文字進行混排
AWRichText完全解決了這些問題,它的特點如下:
- 基於 NSAttributedString+CoreText 繪製
- 物件導向+鏈式操作,不需記憶繁多的屬性名即可快速生成各種文字效果
- 支援GIF 及 任意UIView 的圖文混排
- 支援精確點選
AWRichText是可以讓你在專案中大規模使用的,並不僅僅侷限於圖文混排的工具。
它適合於如下場景:文字+文字,圖片+文字,元件(UIView及其子類)+文字。
因此可出現在:文件排版,聊天排版,列表展示,廣告文案 等各個位置。
功能演示
圖中的Demo(直接下載github程式碼執行即可)包含4部分:
- 第一部分展示了長文字圖文混排功能。展示了文字樣式,UIView(一個無處安放的按鈕)混排,精確點選(藍紫色字型),GIF動圖(小龍)。
- 第二部分展示了富文字的更多使用方式。可以在任意頭像+暱稱這種列表中使用,省去動態建立UIImageView和UILabel的麻煩。
- 第三部分展示了一個簡單的的仿鬥魚聊天功能。展示瞭如何建立複雜的富文字及獲取富文字尺寸等功能。
- 第四部分展示了純UIView單行排版功能:對於按鈕橫排的需求很實用,另外點選”開啟DebugFrame”按鈕,會觸發線框模式,能夠看到每個文字的位置和大小。
Demo中所有元素都是使用AWRichText構造的。
使用方法
1.直接引入檔案
將程式碼中的 “RichText” 資料夾直接拖入你的工程。
引入標頭檔案 “AWRichText.h” 即可使用。
2.使用pod
在Podfile檔案中加入:
source `https://github.com/CocoaPods/Specs.git`
platform :ios, `8.0`
target `TargetName` do
pod `AWRichText`, `~> 1.0.1`
end
複製程式碼
然後命令列執行如下命令:
pod install
複製程式碼
基本用法
#include "AWRichText.h"
...
...
AWRichText *richText = [[AWRichText alloc] init];
//建立紅色文字hello,文字型別 text和font是必須設定的。
AWRTTextComponent *rTextComp = [[AWRTTextComponent alloc] init]
.AWText(@"hello")
.AWColor([UIColor redColor])
.AWFont([UIFont systemFontOfSize:12])
.AWPaddingRight(@1);
[richText addComponent: rTextComp];
//建立藍色文字world
AWRTTextComponent *bTextComp = [[AWRTTextComponent alloc] init]
.AWText(@" world")
.AWColor([UIColor blueColor ])
.AWFont([UIFont systemFontOfSize:12])
.AWPaddingRight(@1);
[richText addComponent:bTextComp];
//建立圖片,圖片型別也請設定font,否則可能顯示異常
AWRTImageComponent *imgComp = [[AWRTImageComponent alloc] init]
.AWImage([UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"fengtimo.jpg" ofType:nil]])
.AWFont([UIFont systemFontOfSize:12])
.AWBoundsDepend(@(AWRTAttchmentBoundsDependFont))
.AWAlignment(@(AWRTAttachmentAlignCenter))
.AWPaddingRight(@1);
[richText addComponent:imgComp];
//建立UIButton
UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 120, 22)];
btn.titleLabel.font = [UIFont systemFontOfSize:12];
[btn setTitle:@"這是一個button" forState:UIControlStateNormal];
[btn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[btn setTitleColor:[UIColor colorWithRed:170.f/255 green:170.f/255 blue:170.f/255 alpha:1] forState:UIControlStateHighlighted];
[btn setBackgroundColor:[UIColor colorWithRed:1 green:184.f/255 blue:0 alpha:1]];
btn.layer.cornerRadius = 5;
btn.layer.borderWidth = 1/[UIScreen mainScreen].scale;
btn.layer.borderColor = [UIColor colorWithRed:201.f/255 green:201.f/255 blue:201.f/255 alpha:1].CGColor;
//根據button建立ViewComponent,View型別也請設定font,否則可能顯示異常
//另外 AWRTxxxComponent元件也可以從Pool中取,直接呼叫addComponentFromPoolWithType:方法。
//此種方法適合AWRichText的components變化頻繁的情況。
//正常情況使用 alloc init的方式生成即可。
((AWRTViewComponent *)[richText addComponentFromPoolWithType:AWRTComponentTypeView])
.AWView(btn)
.AWFont([UIFont systemFontOfSize:12])
.AWBoundsDepend(@(AWRTAttchmentBoundsDependContent))
.AWAlignment(@(AWRTAttachmentAlignCenter));
//建立label,AWRichTextLabel是UILabel的子類
AWRichTextLabel *awLabel = [richText createRichTextLabel];
//請務必設定rtFrame屬性,設定後會自動計算frame的尺寸
//寬度為非0,高度為0表示高度自適應。另外若寬度設定特別大,超出文字內容,最終生成的寬度仍然是以文字內容寬度為準。
//寬度為0表示單行。
//系統屬性numberOfLines無效
awLabel.rtFrame = CGRectMake(100, 100, 100, 0);
awLabel.backgroundColor = [UIColor colorWithRed:0.9f green:0.9f blue:0.9f alpha:1];
[superView addSubview:awLabel];
...
...
複製程式碼
上述程式碼效果:
1 . 當rtFrame為 CGRectMake(100,100,100,0)時:
2 . 當rtFrame為 CGRectMake(100,100,1000,0)時:
其他用法及效果實現,詳見github中的demo。