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

Question

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).

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:

Am I missing something?

UPDATE:

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

Edgaredgard

Answer 1

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.

Edgaredgard

Heya, it's been a while since the answer has been posted. Have you got any updated code for this? – Thetos

Under iOS7, the highlights are only drawn AFTER the user edits the text. The first round of highlighting will always be incorrect — and it looks like newlines are being completely ignored. However, when the text is updated next, it's perfectly fine. – Thetos

Hi, do you have any improvements on this code? How to fix the highlight position when the device rotates? Any hints no that? – Rhoda

Haven't messed with this in a while, but I would guess you need to recalculate the highlight position after the device rotates. I would look into WHEN the layout manager and/or text container recalculate layout and line position. – Edgaredgard