iostextkitnslayoutmanagernstextcontainer

Using a CALayer to highlight text in a UITextView which spans multiple lines


This is a continuation of Getting CGRect for text in a UITextView for the purpose of highlighting with a CALayer. I'm having trouble with getting the correct rectangle for the ranges in each line fragment.

NSString* searchString = @"Returns the range of characters that generated";
NSRange match = [[[self textView]text]rangeOfString:searchString];
NSRange matchingGlyphRange = [manager glyphRangeForCharacterRange:match actualCharacterRange:NULL];



[manager enumerateLineFragmentsForGlyphRange:matchingGlyphRange usingBlock:
 ^(CGRect lineRect, CGRect usedRect, NSTextContainer *textContainer, NSRange lineRange, BOOL *stop) {

     NSRange currentRange = NSIntersectionRange(lineRange, matchingGlyphRange);

     [manager enumerateEnclosingRectsForGlyphRange:currentRange withinSelectedGlyphRange:NSMakeRange(NSNotFound, 0) inTextContainer:textContainer usingBlock:
      ^(CGRect rect, BOOL* stop) {
         if (usedRect.origin.y == rect.origin.y && NSLocationInRange(currentRange.location, lineRange)) {

             CGRect theRect = [manager boundingRectForGlyphRange:currentRange inTextContainer:textContainer];

             CALayer* roundRect = [CALayer layer];
             [roundRect setFrame:theRect];
             [roundRect setBounds:theRect];

             [roundRect setCornerRadius:5.0f];
             [roundRect setBackgroundColor:[[UIColor blueColor]CGColor]];
             [roundRect setOpacity:0.2f];
             [roundRect setBorderColor:[[UIColor blackColor]CGColor]];
             [roundRect setBorderWidth:3.0f];
             [roundRect setShadowColor:[[UIColor blackColor]CGColor]];
             [roundRect setShadowOffset:CGSizeMake(20.0f, 20.0f)];
             [roundRect setShadowOpacity:1.0f];
             [roundRect setShadowRadius:10.0f];

             [[[self textView]layer]addSublayer:roundRect];
             *stop = YES;
         }
     }];
}];

This my current attempt. I'm basically using enumerateLineFragmentsForGlyphRange:usingBlock: to cycle through each line. Then i'm using enumerateEnclosingRectsForGlyphRange:withinSelectedGlyphRange:usingBlock: to make sure the range of the text on the current line matches up with the line's range and has the same Y coordinate. Sometimes this works, and sometimes it doesn't.

It seems that if the search text is near a return it draws the highlight way off. (the y coordinate).

Highlight is off.  It seems to be the Y coordinate that is off

In this screenshot "Returns the range of characters that generated" is supposed to be highlighted.

It seems if the text is not near a return or whitespace this works correctly:

Working Correctly if there is no whitespace around the text

Am I missing something?

UPDATE:

I've narrowed the problem down a bit, I believe enumerateLineFragmentsForGlyphRange: usingBlock: is skipping over lines which have returns.


Solution

  • I've found the solution:

    Instead of using enumerateEnclosingRectsForGlyphRange: I use the NSString method enumerateSubstringsInRange:options:usingBlock:

    I enumerate the line fragments as usual, but instead of trying to use the enclosing rect enumeration method, I enumerate each character on the line while building the rect for the layer.

    -(void)drawLayerForTextHighlightWithString:(NSString*)string {
    
    for (CALayer* eachLayer in [self highlightLayers]) {
        [eachLayer removeFromSuperlayer];
    }
    
    NSLayoutManager* manager = [[self textView]layoutManager];
    
    // Find the string
    NSRange match = [[[self textView]text]rangeOfString:string options:
                     NSCaseInsensitiveSearch | NSDiacriticInsensitiveSearch | NSWidthInsensitiveSearch];
    
    // Convert it to a glyph range
    NSRange matchingGlyphRange = [manager glyphRangeForCharacterRange:match actualCharacterRange:NULL];
    
    // Enumerate each line in that glyph range (this will fire for each line that the match spans)
    [manager enumerateLineFragmentsForGlyphRange:matchingGlyphRange usingBlock:
     ^(CGRect lineRect, CGRect usedRect, NSTextContainer *textContainer, NSRange lineRange, BOOL *stop) {
    
         // currentRange uses NSIntersectionRange to return the range of the text that is on the current line
         NSRange currentRange = NSIntersectionRange(lineRange, matchingGlyphRange);
    
         // This rect will be built by enumerating each character in the line, and adding to it's width
         __block CGRect finalLineRect = CGRectZero;
    
         // Here we use enumerateSubstringsInRange:... to go through each glyph and build the final rect for the line
         [[[self textView]text]enumerateSubstringsInRange:currentRange options:NSStringEnumerationByComposedCharacterSequences usingBlock:
          ^(NSString* substring, NSRange substringRange, NSRange enclostingRange, BOOL* stop) {
    
              // The range of the single glyph being enumerated
              NSRange singleGlyphRange =  [manager glyphRangeForCharacterRange:substringRange actualCharacterRange:NULL];
    
              // get the rect for that glyph
              CGRect glyphRect = [manager boundingRectForGlyphRange:singleGlyphRange inTextContainer:textContainer];
    
              // check to see if this is the first iteration, if not add the width to the final rect for the line
              if (CGRectEqualToRect(finalLineRect, CGRectZero)) {
                  finalLineRect = glyphRect;
              } else {
                  finalLineRect.size.width += glyphRect.size.width;
              }
    
          }];
    
         // once we get the rect for the line, draw the layer
         UIEdgeInsets textContainerInset = [[self textView]textContainerInset];
         finalLineRect.origin.x += textContainerInset.left;
         finalLineRect.origin.y += textContainerInset.top;
    
         CALayer* roundRect = [CALayer layer];
         [roundRect setFrame:finalLineRect];
         [roundRect setBounds:finalLineRect];
    
         [roundRect setCornerRadius:5.0f];
         [roundRect setBackgroundColor:[[UIColor blueColor]CGColor]];
         [roundRect setOpacity:0.2f];
         [roundRect setBorderColor:[[UIColor blackColor]CGColor]];
         [roundRect setBorderWidth:3.0f];
         [roundRect setShadowColor:[[UIColor blackColor]CGColor]];
         [roundRect setShadowOffset:CGSizeMake(20.0f, 20.0f)];
         [roundRect setShadowOpacity:1.0f];
         [roundRect setShadowRadius:10.0f];
    
         [[[self textView]layer]addSublayer:roundRect];
         [[self highlightLayers]addObject:roundRect];
    
         // continues for each line
     }];
    

    }

    I'm still working on multiple matches, i'll update the code once I get that working.