CJLabel富文本三 —— UILabel支持選擇復制以及實現原理

CJLabel經過若干版本迭代，各個功能已經日趨完善，并且不斷精細，特別是在V4.0.0版本迎來了重頭戲：新增enableCopy屬性，支持選擇、全選、復制功能，類似UITextView的選擇復制效果。
老規矩，上效果圖：

CJLabel

CJLabel鏈點點擊實現細節

先來回顧一下CJLabel在顯示文本以及響應鏈點點擊的過程中，底層是怎樣實現的。


CJLabel.png
一. 設置Attributes屬性

首先設置需要顯示的NSAttributedString文本的屬性，除了可設置系統提供的NSFontAttributeName NSForegroundColorAttributeName NSParagraphStyleAttributeName等默認屬性外，還支持CJLabel的若干自定義擴展屬性：
kCJBackgroundFillColorAttributeName背景填充顏色
kCJBackgroundStrokeColorAttributeName背景邊框線顏色
kCJBackgroundLineWidthAttributeName背景邊框線寬度
kCJStrikethroughColorAttributeName刪除線顏色
……
CJLabel提供配置管理類CJLabelConfigure，專門用來方便設置指定字符的副文本屬性，同時還提供了對應的API，調用可生成封裝好的NSAttributedString副文本（此處只選取若干方法說明，更多可查看源碼

/**
 根據圖片名初始化NSAttributedString

 @param image         圖片名稱，或者UIImage
 @param size          圖片大?。ㄟ@里是指顯示圖片等區域大?。? @param lineAlignment 圖片所在行，圖片與文字在垂直方向的對齊方式（只針對當前行）
 @param configure     鏈點配置
 @return              NSAttributedString
 */
+ (NSMutableAttributedString *)initWithImage:(id)image
                                   imageSize:(CGSize)size
                          imagelineAlignment:(CJLabelVerticalAlignment)lineAlignment
                                   configure:(CJLabelConfigure *)configure;

/**
 根據NSString初始化NSAttributedString
 */
+ (NSMutableAttributedString *)initWithString:(NSString *)string configure:(CJLabelConfigure *)configure;
二. 計算label的CGRect大小

label.attributedText = @"text"

UILabel繪制顯示文本，首先會觸發以下方法
-textRectForBounds:limitedToNumberOfLines:
-sizeThatFits:
我們可以在這兩個方法里面根據需要顯示的文本內容以及擴展屬性self.textInsets（繪制文本的內邊距，默認UIEdgeInsetsZero），計算當前label的CGRect大小，計算使用的核心函數是:

CGSize CTFramesetterSuggestFrameSizeWithConstraints(
    CTFramesetterRef framesetter,
    CFRange stringRange,
    CFDictionaryRef __nullable frameAttributes,
    CGSize constraints,
    CFRange * __nullable fitRange )
三. CTFrameRef

-drawTextInRect:是真正進行內容繪制的方法，我們將在這里得到所有字符對應的CTFrameRef、CTLineRef以及CTRunRef

CTFrameRef.png

如圖，UILabel顯示的時候，所有內容都由CTFrameRef管理，然后每一行內容是一個CTLineRef，而每一行CTLineRef中包含了若干個CTRunRef。每一個CTRunRef對應的可能只是一個字符，也可能是整一行文字（連續的具有相同Attributes屬性的字符會包含在同一個CTRunRef中），比如以下例子，CTLineRef中包含三個CTRunRef，分別對應為：這是 一段 測試數據三部分。

.jpg

獲取到各個字符對應的CTRunRef后，我們可以根據CTRunRef進一步判斷得到這一部分字符在UIlabel中對應的CGRect大小，以及在第一步中對當前字符設置的其他自定義屬性。這一步也是整體流程中最復雜的部分，涉及到各種坐標數值的轉換判斷，最后將CTRunRef對應的信息轉換為model記錄保存。

四. CTRunDraw

上一步已經獲取得到了每一個CTRunRef的詳細信息，此時我們可以執行最后的圖文繪制操作了。首先是繪制自定義背景顏色（即kCJBackgroundFillColorAttributeName相關屬性）；然后是繪制圖文，如果是文字執行CTRunDraw(CTRunRef run, CGContextRef context, CFRange range )函數，如果是圖片執行CGContextDrawImage(CGContextRef c, CGRect rect, CGImageRef image)函數；最后填充邊框線以及刪除線（kCJBackgroundStrokeColorAttributeName kCJStrikethroughColorAttributeName）。

至此，CJLabel已經完成了顯示部分的所有操作。

五. 點擊響應

CJLabel默認userInteractionEnabled = YES，如此我們可以在touch相關的方法中捕獲到CJLabel的點擊事件，通過判斷點擊觸摸點CGPoint是否在保存記錄的CGRect數組內，如果是則執行對應點擊字符的點擊回調事件，同時觸發點擊字符的高亮重繪（如果存在高亮狀態的話，而且CGContextRef的重繪是全局重繪，無法做到局部刷新）。

touches.png

另外給CJLabel添加長按手勢UILongPressGestureRecognizer監聽，在長按事件中同樣執行與touchesBegan:類似的邏輯判斷，從而使CJLabel具備長按點擊功能。

--------------------------------- 分割線 ---------------------------------

以上便是CJLabel功能的實現原理講解，下面進入本文的重點——如何使UILabel具備選擇復制的能力
當然這里說的選擇復制不可能是指點擊喚起UIMenuController菜單，然后出現復制剪切選項，點擊只能復制所有文本那樣的功能。那樣的例子網上已經有很多，沒有必要在這里再大費周章地來羅列說明。
CJLabel需要具備的是類似于UITextView或UIWebView那樣，雙擊或長按，可出現選擇、全選、拷貝選項，同時選中字符左右出現標示大頭針，拖動則有放大鏡提示當前選中字符，并且盡量做到與系統行為一致。

CJLabel.gif

剛開始面對如此需求的時候，感覺有點無從下手。查遍資料也沒找到UITextView或UIWebView中有關選擇復制功能的資料說明，更不要說相關的API調用了，很明顯蘋果并沒有將此類功能封裝成模塊化，就算有那相關的方法也是私有API。
因此在初始的時候，由于開發時間緊，本人選擇了使用UITextView代替CJLabel作為顯示控件（產品業務要求支持圖文混排，支持富文本顯示，文本能夠自動識別@用戶，能夠自動識別網址鏈接并替換為規定的圖標展示，文本內容還要支持選擇復制……類似于微博的列表頁面，但卻比它更復雜??????）

但是UITextView存在若干問題：首先是點擊鏈點的設置不夠靈活，而且鏈點的高亮顏色只能全局設置，不能做到不同鏈點分別自定義；再就是UITextView在不同的iOS的系統版本下UI層級不一致，而且在觸發點擊、滑動操作時樣式會發生偏移重置。
經歷了初代版本的各種bug填坑，下一次版本迭代時我果斷放棄了UITextView，決定用CJLabel來實現以上的需求。
很明顯，CJLabel本身對于圖文混排、富文本展示部分已經很好的支持了，那么剩下的就只是怎么支持選擇復制。

需求細化

選擇復制的需求主要包含以下幾點

  • 選中字符后出現選擇 全選 復制菜單，這個使用系統的UIMenuController功能即可實現，不存在難點問題。
  • 對于選中的文字，起始要有大頭針標識，中間填充淺藍色背景，而且這一部分區域會是一塊不規則多邊形。系統沒有提供現成可復用的對應UI控件，但只要我們能夠判斷到選中區域，想要什么樣式都可以自己繪制。所以這一塊也不存在問題。
  • 拖動選擇的過程中，出現放大鏡提示選中字符的更改。在能夠獲取到指定觸摸點區域的前提下，只需要將對應區域的CGContextRef上下文做CGContextScaleCTM縮放，然后再將放大后的CALayer層顯示出來，所以這個也是可以實現的。
  • 最后便是重點了，如何判斷每一個字符對應的CGRect坐標位置，并在手指移動時準確判斷選擇區域的變化。
實現

回顧前面CJLabel圖文顯示的過程中，其實已經做過了對特定字符的CGRect坐標位置的計算。只不過上面只是對指定鏈點做了判斷記錄，那如果我們能夠對每一個字符都做轉換并保存記錄到_allRunItemArray數組內，那么后面的所有操作就都可以基于_allRunItemArray來實現了。
對應到CTFrameRef層則是需要保證CTLineRef中的每一個CTRunRef都只包含一個字符，還是這個例子：

.jpg

此時它在CTFrameRef層級應該是這 是 一 段 測 試 數 據 這樣實現，而我們知道連續的具有相同Attributes屬性的字符會包含在同一個CTRunRef中，那就想辦法讓每一個字符都具有不同屬性。
我一開始的做法是添加一個自定義屬性kCJIndexAttributesName，然后給每個字符存儲不同的index值

//給每一個字符設置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的判斷中，確實達到了將每個字符拆分為一個對應的CTRunRef要求，但其中卻存在一個難以發覺的bug?。?！按照常規思路，對于添加的自定義屬性kCJIndexAttributesName，在遍歷完成后將其移除，那么之后也就不會再對這個屬性進行判斷。但實際使用中卻是移除并不生效，特別是當頁面內的UITableView存在多個CJLabel，每個CJLabel都是長文本，滑動的時候會變的越來越卡。因為滑動UITableViewCell重置時會對每個CJLabel的每個字符的kCJIndexAttributesName做不停的遍歷計算。

然而如果是用系統提供的Attributes相關的屬性設置不同值則不會存在以上問題（好不容易才發現了這個bug，我猜測蘋果對于NSAttributedString的Attributes屬性的管理應該是有一個類似單例的地方統一存儲管理的，而且它對于一些自定義的添加對象不會友好支持）。踩完坑后只好乖乖地從系統方法中尋找解決思路，幸好發現了NSLinkAttributeName屬性，這是UITextView中用來設置http鏈接的擴展屬性，存儲的對象是NSURL或NSString類型，而UILabel默認是不支持http鏈點的，使用NSLinkAttributeName屬性可以最大限度的降低UILabel對默認NSAttributedString展示的影響。同時為了更好的判斷計算，我將存儲的對象改為NSURL的子類CJCTRunUrl，更改后的代碼

//給每一個字符設置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。
結合前面已經判斷記錄的所有字符的CGRect信息，當發生長按或者雙擊事件的時候，判斷到當前觸摸的字符不是可點擊鏈點時，那么出現選擇復制視圖。

選擇 復制視圖

選擇復制視圖包含三部分：

  • 選擇、全選、復制 菜單
  • 放大鏡
  • 大頭針包含區域

第一部分直接使用UIMenuController，重點重載以下方法就可以了

- (BOOL)canBecomeFirstResponder {
    return YES;
}

- (BOOL)canPerformAction:(SEL)action withSender:(id)sender {
    if ( (action == @selector(select:) && self.attributedText) // 需要有文字才能支持選擇復制
        || (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

在更改放大點的時候主動調用[self.contentLayer setNeedsDisplay];那么就會觸發CJContentLayer的-drawInContext:方法，這樣也就達到了更改放大鏡內容的效果。

第三部分大頭針包含區域，同樣自定義UIView的子類CJSelectTextRangeView，并且在其中設定三部分區域headRect middleRect tailRect

CJSelectTextRangeView.png

這三部分存在任意組合的情況，所以我們對這三部分區分開來，分別進行顏色填充的操作

/**
 大頭針的顯示類型
 */
typedef NS_ENUM(NSInteger, CJSelectViewAction) {
    ShowAllSelectView    = 0,//顯示大頭針（長按或者雙擊）
    MoveLeftSelectView   = 1,//移動左邊大頭針
    MoveRightSelectView  = 2 //移動右邊大頭針
};
/**
 選中復制填充背景色的view
 */
@interface CJSelectTextRangeView : UIView
/**
 前半部分選中區域
 */
@property (nonatomic, assign) CGRect headRect;
/**
 中間部分選中區域
 */
@property (nonatomic, assign) CGRect middleRect;
/**
 后半部分選中區域
 */
@property (nonatomic, assign) CGRect tailRect;
/**
 選擇內容是否包含不同行
 */
@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

接下來便是顯示這三個選擇復制相關的視圖了，一開始我只是簡單的將它們添加到自定義的CJSelectBackView上面，在將CJSelectBackView add 到CJLabel上面來統一管理的，但這樣會存在一個問題。那就是當頁面中存在多個CJLabel，并且對多個CJLabel分別執行選擇復制操作時，那么不同的label上都會出現選擇復制視圖，這是與系統的默認行為不一致的。就算是頁面內存在多個不同的UITextView，對不同的UITextView進行選擇復制，系統給人的感覺是只會有一個選擇控制視圖存在。

權衡之后我選擇將CJSelectBackView作為單例處理，全局只初始化一次，避免了重復初始化的開銷。并且引入UIWindow層，在不同的CJLabel之間進行選擇復制時，借助UIWindow來進行控制切換。
最終選擇復制相關的層級結構如下

CJLabelSelect.png

最后便是一些優化操作了，比如選擇復制拖動的時候處理UIScrollView滑動的手勢沖突，左右大頭針高度的調整等。

具體的實現可以查看源碼CJLabel，歡迎star以及issue

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 227,748評論 6贊 531
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 98,165評論 3贊 414
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 175,595評論 0贊 373
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 62,633評論 1贊 309
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 71,435評論 6贊 405
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 54,943評論 1贊 321
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,035評論 3贊 440
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 42,175評論 0贊 287
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 48,713評論 1贊 333
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,599評論 3贊 354
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,788評論 1贊 369
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,303評論 5贊 358
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,034評論 3贊 347
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,412評論 0贊 25
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,664評論 1贊 280
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,408評論 3贊 390
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 47,747評論 2贊 370