CJLabel
經(jīng)過若干版本迭代议薪,各個功能已經(jīng)日趨完善长酗,并且不斷精細,特別是在V4.0.0
版本迎來了重頭戲:新增enableCopy屬性寥假,支持選擇、全選疗隶、復(fù)制功能佑笋,類似UITextView的選擇復(fù)制效果。
老規(guī)矩斑鼻,上效果圖:
CJLabel鏈點點擊實現(xiàn)細節(jié)
先來回顧一下CJLabel在顯示文本以及響應(yīng)鏈點點擊的過程中蒋纬,底層是怎樣實現(xiàn)的。
一. 設(shè)置Attributes屬性
首先設(shè)置需要顯示的NSAttributedString文本的屬性坚弱,除了可設(shè)置系統(tǒng)提供的NSFontAttributeName
NSForegroundColorAttributeName
NSParagraphStyleAttributeName
等默認屬性外蜀备,還支持CJLabel的若干自定義擴展屬性:
kCJBackgroundFillColorAttributeName
背景填充顏色
kCJBackgroundStrokeColorAttributeName
背景邊框線顏色
kCJBackgroundLineWidthAttributeName
背景邊框線寬度
kCJStrikethroughColorAttributeName
刪除線顏色
……
CJLabel提供配置管理類CJLabelConfigure
,專門用來方便設(shè)置指定字符的副文本屬性荒叶,同時還提供了對應(yīng)的API碾阁,調(diào)用可生成封裝好的NSAttributedString副文本(此處只選取若干方法說明,更多可查看源碼
/**
根據(jù)圖片名初始化NSAttributedString
@param image 圖片名稱些楣,或者UIImage
@param size 圖片大兄住(這里是指顯示圖片等區(qū)域大小)
@param lineAlignment 圖片所在行愁茁,圖片與文字在垂直方向的對齊方式(只針對當前行)
@param configure 鏈點配置
@return NSAttributedString
*/
+ (NSMutableAttributedString *)initWithImage:(id)image
imageSize:(CGSize)size
imagelineAlignment:(CJLabelVerticalAlignment)lineAlignment
configure:(CJLabelConfigure *)configure;
/**
根據(jù)NSString初始化NSAttributedString
*/
+ (NSMutableAttributedString *)initWithString:(NSString *)string configure:(CJLabelConfigure *)configure;
二. 計算label的CGRect大小
label.attributedText = @"text"
UILabel繪制顯示文本蚕钦,首先會觸發(fā)以下方法
-textRectForBounds:limitedToNumberOfLines:
-sizeThatFits:
我們可以在這兩個方法里面根據(jù)需要顯示的文本內(nèi)容以及擴展屬性self.textInsets(繪制文本的內(nèi)邊距,默認UIEdgeInsetsZero)
埋市,計算當前l(fā)abel的CGRect大小冠桃,計算使用的核心函數(shù)是:
CGSize CTFramesetterSuggestFrameSizeWithConstraints(
CTFramesetterRef framesetter,
CFRange stringRange,
CFDictionaryRef __nullable frameAttributes,
CGSize constraints,
CFRange * __nullable fitRange )
三. CTFrameRef
-drawTextInRect:
是真正進行內(nèi)容繪制的方法,我們將在這里得到所有字符對應(yīng)的CTFrameRef道宅、CTLineRef以及CTRunRef
如圖食听,UILabel顯示的時候,所有內(nèi)容都由CTFrameRef管理污茵,然后每一行內(nèi)容是一個CTLineRef樱报,而每一行CTLineRef中包含了若干個CTRunRef。每一個CTRunRef對應(yīng)的可能只是一個字符泞当,也可能是整一行文字(連續(xù)的具有相同Attributes屬性的字符會包含在同一個CTRunRef中)迹蛤,比如以下例子,CTLineRef中包含三個CTRunRef襟士,分別對應(yīng)為:這是
一段
測試數(shù)據(jù)
三部分盗飒。
獲取到各個字符對應(yīng)的CTRunRef后,我們可以根據(jù)CTRunRef進一步判斷得到這一部分字符在UIlabel中對應(yīng)的CGRect大小陋桂,以及在第一步中對當前字符設(shè)置的其他自定義屬性逆趣。這一步也是整體流程中最復(fù)雜的部分,涉及到各種坐標數(shù)值的轉(zhuǎn)換判斷嗜历,最后將CTRunRef對應(yīng)的信息轉(zhuǎn)換為model記錄保存宣渗。
四. CTRunDraw
上一步已經(jīng)獲取得到了每一個CTRunRef的詳細信息抖所,此時我們可以執(zhí)行最后的圖文繪制操作了。首先是繪制自定義背景顏色(即kCJBackgroundFillColorAttributeName
相關(guān)屬性)痕囱;然后是繪制圖文田轧,如果是文字執(zhí)行CTRunDraw(CTRunRef run, CGContextRef context, CFRange range )
函數(shù),如果是圖片執(zhí)行CGContextDrawImage(CGContextRef c, CGRect rect, CGImageRef image)
函數(shù)鞍恢;最后填充邊框線以及刪除線(kCJBackgroundStrokeColorAttributeName
kCJStrikethroughColorAttributeName
)傻粘。
至此,CJLabel已經(jīng)完成了顯示部分的所有操作有序。
五. 點擊響應(yīng)
CJLabel默認userInteractionEnabled = YES
抹腿,如此我們可以在touch相關(guān)的方法中捕獲到CJLabel的點擊事件,通過判斷點擊觸摸點CGPoint
是否在保存記錄的CGRect數(shù)組內(nèi)旭寿,如果是則執(zhí)行對應(yīng)點擊字符的點擊回調(diào)事件警绩,同時觸發(fā)點擊字符的高亮重繪(如果存在高亮狀態(tài)的話,而且CGContextRef的重繪是全局重繪盅称,無法做到局部刷新)肩祥。
另外給CJLabel添加長按手勢
UILongPressGestureRecognizer
監(jiān)聽,在長按事件中同樣執(zhí)行與touchesBegan:類似的邏輯判斷缩膝,從而使CJLabel具備長按點擊功能混狠。
--------------------------------- 分割線 ---------------------------------
以上便是CJLabel功能的實現(xiàn)原理講解,下面進入本文的重點——如何使UILabel具備選擇復(fù)制的能力
當然這里說的選擇復(fù)制不可能是指點擊喚起UIMenuController
菜單疾层,然后出現(xiàn)復(fù)制剪切選項将饺,點擊只能復(fù)制所有文本那樣的功能。那樣的例子網(wǎng)上已經(jīng)有很多痛黎,沒有必要在這里再大費周章地來羅列說明予弧。
CJLabel需要具備的是類似于UITextView或UIWebView那樣,雙擊或長按湖饱,可出現(xiàn)選擇掖蛤、全選、拷貝
選項井厌,同時選中字符左右出現(xiàn)標示大頭針蚓庭,拖動則有放大鏡提示當前選中字符,并且盡量做到與系統(tǒng)行為一致仅仆。
剛開始面對如此需求的時候器赞,感覺有點無從下手。查遍資料也沒找到UITextView或UIWebView中有關(guān)選擇復(fù)制功能的資料說明墓拜,更不要說相關(guān)的API調(diào)用了拳魁,很明顯蘋果并沒有將此類功能封裝成模塊化,就算有那相關(guān)的方法也是私有API撮弧。
因此在初始的時候潘懊,由于開發(fā)時間緊,本人選擇了使用UITextView代替CJLabel作為顯示控件(產(chǎn)品業(yè)務(wù)要求支持圖文混排贿衍,支持富文本顯示授舟,文本能夠自動識別@用戶,能夠自動識別網(wǎng)址鏈接并替換為規(guī)定的圖標展示贸辈,文本內(nèi)容還要支持選擇復(fù)制……類似于微博的列表頁面释树,但卻比它更復(fù)雜??????)
但是UITextView存在若干問題:首先是點擊鏈點的設(shè)置不夠靈活,而且鏈點的高亮顏色只能全局設(shè)置擎淤,不能做到不同鏈點分別自定義奢啥;再就是UITextView在不同的iOS的系統(tǒng)版本下UI層級不一致,而且在觸發(fā)點擊嘴拢、滑動操作時樣式會發(fā)生偏移重置桩盲。
經(jīng)歷了初代版本的各種bug填坑,下一次版本迭代時我果斷放棄了UITextView席吴,決定用CJLabel來實現(xiàn)以上的需求赌结。
很明顯,CJLabel本身對于圖文混排孝冒、富文本展示部分已經(jīng)很好的支持了柬姚,那么剩下的就只是怎么支持選擇復(fù)制。
需求細化
選擇復(fù)制的需求主要包含以下幾點
- 選中字符后出現(xiàn)
選擇 全選 復(fù)制
菜單庄涡,這個使用系統(tǒng)的UIMenuController
功能即可實現(xiàn)量承,不存在難點問題。 - 對于選中的文字穴店,起始要有大頭針標識撕捍,中間填充淺藍色背景,而且這一部分區(qū)域會是一塊不規(guī)則多邊形迹鹅。系統(tǒng)沒有提供現(xiàn)成可復(fù)用的對應(yīng)UI控件卦洽,但只要我們能夠判斷到選中區(qū)域,想要什么樣式都可以自己繪制斜棚。所以這一塊也不存在問題阀蒂。
- 拖動選擇的過程中,出現(xiàn)放大鏡提示選中字符的更改弟蚀。在能夠獲取到指定觸摸點區(qū)域的前提下蚤霞,只需要將對應(yīng)區(qū)域的
CGContextRef
上下文做CGContextScaleCTM
縮放,然后再將放大后的CALayer
層顯示出來义钉,所以這個也是可以實現(xiàn)的昧绣。 - 最后便是重點了,如何判斷每一個字符對應(yīng)的
CGRect
坐標位置捶闸,并在手指移動時準確判斷選擇區(qū)域的變化夜畴。
實現(xiàn)
回顧前面CJLabel圖文顯示的過程中拖刃,其實已經(jīng)做過了對特定字符的CGRect
坐標位置的計算。只不過上面只是對指定鏈點做了判斷記錄贪绘,那如果我們能夠?qū)γ恳粋€字符都做轉(zhuǎn)換并保存記錄到_allRunItemArray
數(shù)組內(nèi)兑牡,那么后面的所有操作就都可以基于_allRunItemArray
來實現(xiàn)了。
對應(yīng)到CTFrameRef
層則是需要保證CTLineRef
中的每一個CTRunRef
都只包含一個字符税灌,還是這個例子:
此時它在
CTFrameRef
層級應(yīng)該是這
是
一
段
測
試
數(shù)
據(jù)
這樣實現(xiàn)均函,而我們知道連續(xù)的具有相同Attributes屬性的字符會包含在同一個CTRunRef中,那就想辦法讓每一個字符都具有不同屬性菱涤。我一開始的做法是添加一個自定義屬性
kCJIndexAttributesName
苞也,然后給每個字符存儲不同的index值
//給每一個字符設(shè)置index值,enableCopy=YES時用到
__block NSInteger index = 0;
[attText.string enumerateSubstringsInRange:NSMakeRange(0, [attText length]) options:NSStringEnumerationByComposedCharacterSequences usingBlock:
^(NSString *substring, NSRange substringRange, NSRange enclosingRange, BOOL *stop) {
[attText addAttribute:kCJIndexAttributesName
value:@(index)
range:substringRange];
index++;
}];
在CTFrameRef
的判斷中粘秆,確實達到了將每個字符拆分為一個對應(yīng)的CTRunRef
要求如迟,但其中卻存在一個難以發(fā)覺的bug!7堋氓涣!按照常規(guī)思路,對于添加的自定義屬性kCJIndexAttributesName
陋气,在遍歷完成后將其移除劳吠,那么之后也就不會再對這個屬性進行判斷。但實際使用中卻是移除并不生效巩趁,特別是當頁面內(nèi)的UITableView存在多個CJLabel痒玩,每個CJLabel都是長文本,滑動的時候會變的越來越卡议慰。因為滑動UITableViewCell重置時會對每個CJLabel的每個字符的kCJIndexAttributesName
做不停的遍歷計算蠢古。
然而如果是用系統(tǒng)提供的Attributes相關(guān)的屬性設(shè)置不同值則不會存在以上問題(好不容易才發(fā)現(xiàn)了這個bug,我猜測蘋果對于NSAttributedString的Attributes屬性的管理應(yīng)該是有一個類似單例的地方統(tǒng)一存儲管理的别凹,而且它對于一些自定義的添加對象不會友好支持)草讶。踩完坑后只好乖乖地從系統(tǒng)方法中尋找解決思路,幸好發(fā)現(xiàn)了NSLinkAttributeName
屬性炉菲,這是UITextView中用來設(shè)置http鏈接的擴展屬性堕战,存儲的對象是NSURL
或NSString
類型,而UILabel默認是不支持http鏈點的拍霜,使用NSLinkAttributeName
屬性可以最大限度的降低UILabel對默認NSAttributedString展示的影響嘱丢。同時為了更好的判斷計算,我將存儲的對象改為NSURL的子類CJCTRunUrl
祠饺,更改后的代碼
//給每一個字符設(shè)置index值越驻,enableCopy=YES時用到
__block NSInteger index = 0;
[attText.string enumerateSubstringsInRange:NSMakeRange(0, [attText length]) options:NSStringEnumerationByComposedCharacterSequences usingBlock:
^(NSString *substring, NSRange substringRange, NSRange enclosingRange, BOOL *stop) {
CJCTRunUrl *runUrl = nil;
if (!runUrl) {
NSString *urlStr = [NSString stringWithFormat:@"https://www.CJLabel%@",@(index)];
runUrl = [CJCTRunUrl URLWithString:urlStr];
}
runUrl.index = index;
runUrl.rangeValue = [NSValue valueWithRange:substringRange];
[attText addAttribute:NSLinkAttributeName
value:runUrl
range:substringRange];
index++;
}];
初始化的時候給CJLabel新增雙擊手勢UITapGestureRecognizer
。
結(jié)合前面已經(jīng)判斷記錄的所有字符的CGRect信息,當發(fā)生長按或者雙擊事件的時候缀旁,判斷到當前觸摸的字符不是可點擊鏈點時记劈,那么出現(xiàn)選擇復(fù)制視圖。
選擇 復(fù)制視圖
選擇復(fù)制視圖包含三部分:
- 選擇诵棵、全選抠蚣、復(fù)制 菜單
- 放大鏡
- 大頭針包含區(qū)域
第一部分直接使用UIMenuController
,重點重載以下方法就可以了
- (BOOL)canBecomeFirstResponder {
return YES;
}
- (BOOL)canPerformAction:(SEL)action withSender:(id)sender {
if ( (action == @selector(select:) && self.attributedText) // 需要有文字才能支持選擇復(fù)制
|| (action == @selector(selectAll:) && self.attributedText)
|| (action == @selector(copy:) && self.attributedText))
{
return YES;
}
return NO;
}
第二部分放大鏡履澳,自定義UIView子類CJMagnifierView
,并在CJMagnifierView
上添加一個處理放大效果的layer層CJContentLayer
@interface CJContentLayer : CALayer
@property (nonatomic, assign) CGPoint pointToMagnify;//放大點
@end
@implementation CJContentLayer
- (void)drawInContext:(CGContextRef)ctx {
CGContextTranslateCTM(ctx, self.frame.size.width/2, self.frame.size.height/2);
CGContextScaleCTM(ctx, 1.40, 1.40);
CGContextTranslateCTM(ctx, -1 * self.pointToMagnify.x, -1 * self.pointToMagnify.y);
[CJkeyWindow().layer renderInContext:ctx];
CJkeyWindow().layer.contents = (id)nil;
}
@end
/**
長按時候顯示的放大鏡視圖
*/
@interface CJMagnifierView ()
@property (nonatomic, assign) CGPoint pointToMagnify;//放大點
@property (strong, nonatomic) CJContentLayer *contentLayer;//處理放大效果的layer層
- (void)updateMagnifyPoint:(CGPoint)pointToMagnify showMagnifyViewIn:(CGPoint)showPoint;
@end
在更改放大點的時候主動調(diào)用[self.contentLayer setNeedsDisplay];
那么就會觸發(fā)CJContentLayer
的-drawInContext:
方法怀跛,這樣也就達到了更改放大鏡內(nèi)容的效果距贷。
第三部分大頭針包含區(qū)域,同樣自定義UIView的子類CJSelectTextRangeView
吻谋,并且在其中設(shè)定三部分區(qū)域headRect
middleRect
tailRect
這三部分存在任意組合的情況忠蝗,所以我們對這三部分區(qū)分開來,分別進行顏色填充的操作
/**
大頭針的顯示類型
*/
typedef NS_ENUM(NSInteger, CJSelectViewAction) {
ShowAllSelectView = 0,//顯示大頭針(長按或者雙擊)
MoveLeftSelectView = 1,//移動左邊大頭針
MoveRightSelectView = 2 //移動右邊大頭針
};
/**
選中復(fù)制填充背景色的view
*/
@interface CJSelectTextRangeView : UIView
/**
前半部分選中區(qū)域
*/
@property (nonatomic, assign) CGRect headRect;
/**
中間部分選中區(qū)域
*/
@property (nonatomic, assign) CGRect middleRect;
/**
后半部分選中區(qū)域
*/
@property (nonatomic, assign) CGRect tailRect;
/**
選擇內(nèi)容是否包含不同行
*/
@property (nonatomic, assign) BOOL differentLine;
- (void)updateFrame:(CGRect)frame headRect:(CGRect)headRect middleRect:(CGRect)middleRect tailRect:(CGRect)tailRect differentLine:(BOOL)differentLine;
@end
@implementation CJSelectTextRangeView
- (instancetype)init {
self = [super init];
if (self) {
self.backgroundColor = [UIColor clearColor];
self.opaque = NO;
}
return self;
}
- (void)updateFrame:(CGRect)frame headRect:(CGRect)headRect middleRect:(CGRect)middleRect tailRect:(CGRect)tailRect differentLine:(BOOL)differentLine {
self.differentLine = differentLine;
self.frame = frame;
self.headRect = headRect;
self.middleRect = middleRect;
self.tailRect = tailRect;
[self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect {
CGContextRef ctx = UIGraphicsGetCurrentContext();
//背景色
UIColor *backColor = CJUIRGBColor(0,84,166,0.2);
if (self.differentLine) {
[backColor set];
CGContextAddRect(ctx, self.headRect);
if (!CGRectEqualToRect(self.middleRect,CGRectNull)) {
CGContextAddRect(ctx, self.middleRect);
}
CGContextAddRect(ctx, self.tailRect);
CGContextFillPath(ctx);
[self updatePinLayer:ctx point:CGPointMake(self.headRect.origin.x, self.headRect.origin.y) height:self.headRect.size.height isLeft:YES];
[self updatePinLayer:ctx point:CGPointMake(self.tailRect.origin.x + self.tailRect.size.width, self.tailRect.origin.y) height:self.tailRect.size.height isLeft:NO];
}else{
[backColor set];
CGContextAddRect(ctx, self.middleRect);
CGContextFillPath(ctx);
[self updatePinLayer:ctx point:CGPointMake(self.middleRect.origin.x, self.middleRect.origin.y) height:self.middleRect.size.height isLeft:YES];
[self updatePinLayer:ctx point:CGPointMake(self.middleRect.origin.x + self.middleRect.size.width, self.middleRect.origin.y) height:self.middleRect.size.height isLeft:NO];
}
CGContextStrokePath(ctx);
}
- (void)updatePinLayer:(CGContextRef)ctx point:(CGPoint)point height:(CGFloat)height isLeft:(BOOL)isLeft {
UIColor *color = [UIColor colorWithRed:0/255.0 green:128/255.0 blue:255/255.0 alpha:1.0];
CGRect roundRect = CGRectMake(point.x - 5,
isLeft?(point.y - 10):(point.y + height),
10,
10);
//畫圓
CGContextAddEllipseInRect(ctx, roundRect);
[color set];
CGContextFillPath(ctx);
CGContextMoveToPoint(ctx, point.x, point.y);
CGContextAddLineToPoint(ctx, point.x, point.y + height);
CGContextSetLineWidth(ctx, 2.0);
CGContextSetStrokeColorWithColor(ctx, color.CGColor);
CGContextStrokePath(ctx);
}
@end
接下來便是顯示這三個選擇復(fù)制相關(guān)的視圖了漓拾,一開始我只是簡單的將它們添加到自定義的CJSelectBackView
上面阁最,在將CJSelectBackView
add 到CJLabel上面來統(tǒng)一管理的,但這樣會存在一個問題骇两。那就是當頁面中存在多個CJLabel速种,并且對多個CJLabel分別執(zhí)行選擇復(fù)制操作時,那么不同的label上都會出現(xiàn)選擇復(fù)制視圖低千,這是與系統(tǒng)的默認行為不一致的配阵。就算是頁面內(nèi)存在多個不同的UITextView,對不同的UITextView進行選擇復(fù)制示血,系統(tǒng)給人的感覺是只會有一個選擇控制視圖存在棋傍。
權(quán)衡之后我選擇將CJSelectBackView
作為單例處理,全局只初始化一次难审,避免了重復(fù)初始化的開銷瘫拣。并且引入UIWindow層,在不同的CJLabel之間進行選擇復(fù)制時告喊,借助UIWindow來進行控制切換麸拄。
最終選擇復(fù)制相關(guān)的層級結(jié)構(gòu)如下
最后便是一些優(yōu)化操作了,比如選擇復(fù)制拖動的時候處理UIScrollView滑動的手勢沖突葱绒,左右大頭針高度的調(diào)整等感帅。
具體的實現(xiàn)可以查看源碼CJLabel,歡迎star以及issue