How to set NSString's background cornerRadius on iOS7

Question

I want to set NSString's background cornerRadius on iOS7. But,NSString don't have layer...

Please tell me, how to set NSString's background cornerRadius on iOS7?

example

Answer 1

You can do this by using an UITextView with a subclass of NSLayoutManager, that override -fillBackgroundRectArray:count:forCharacterRange:color:. Just a little sample how to this :

@implementation ViewController
- (void)viewDidLoad
{
    [super viewDidLoad];

    // setup text handling
    NSTextStorage *textStorage = [[NSTextStorage alloc] initWithString:@"Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nam liber te conscient to factor tum poen legum odioque civiuda."];

    // use our subclass of NSLayoutManager
    MyLayoutManager *textLayout = [[MyLayoutManager alloc] init];

    [textStorage addLayoutManager:textLayout];

    NSTextContainer *textContainer = [[NSTextContainer alloc] initWithSize:self.view.bounds.size];

    [textLayout addTextContainer:textContainer];
    UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(0,20,self.view.bounds.size.width,self.view.bounds.size.height-20)
                                               textContainer:textContainer];
    [self.view addSubview:textView];

    // set some background color to our text
    [textView.textStorage setAttributes:[NSDictionary dictionaryWithObject:[UIColor blueColor] forKey:NSBackgroundColorAttributeName] range:NSMakeRange(22, textView.text.length - 61)];
}
@end

@interface MyLayoutManager : NSLayoutManager
@end

- (void)fillBackgroundRectArray:(const CGRect *)rectArray count:(NSUInteger)rectCount forCharacterRange:(NSRange)charRange color:(UIColor *)color
{
     CGFloat halfLineWidth = 4.; // change this to change corners radius

     CGMutablePathRef path = CGPathCreateMutable();

     if (rectCount == 1
         || (rectCount == 2 && (CGRectGetMaxX(rectArray[1]) < CGRectGetMinX(rectArray[0])))
        )
    {
        // 1 rect or 2 rects without edges in contact

         CGPathAddRect(path, NULL, CGRectInset(rectArray[0], halfLineWidth, halfLineWidth));
         if (rectCount == 2)
            CGPathAddRect(path, NULL, CGRectInset(rectArray[1], halfLineWidth, halfLineWidth));
    }
     else
    {
        // 2 or 3 rects
         NSUInteger lastRect = rectCount - 1;

         CGPathMoveToPoint(path, NULL, CGRectGetMinX(rectArray[0]) + halfLineWidth, CGRectGetMaxY(rectArray[0]) + halfLineWidth);

         CGPathAddLineToPoint(path, NULL, CGRectGetMinX(rectArray[0]) + halfLineWidth, CGRectGetMinY(rectArray[0]) + halfLineWidth);
         CGPathAddLineToPoint(path, NULL, CGRectGetMaxX(rectArray[0]) - halfLineWidth, CGRectGetMinY(rectArray[0]) + halfLineWidth);

         CGPathAddLineToPoint(path, NULL, CGRectGetMaxX(rectArray[0]) - halfLineWidth, CGRectGetMinY(rectArray[lastRect]) - halfLineWidth);
         CGPathAddLineToPoint(path, NULL, CGRectGetMaxX(rectArray[lastRect]) - halfLineWidth, CGRectGetMinY(rectArray[lastRect]) - halfLineWidth);

         CGPathAddLineToPoint(path, NULL, CGRectGetMaxX(rectArray[lastRect]) - halfLineWidth, CGRectGetMaxY(rectArray[lastRect]) - halfLineWidth);
         CGPathAddLineToPoint(path, NULL, CGRectGetMinX(rectArray[lastRect]) + halfLineWidth, CGRectGetMaxY(rectArray[lastRect]) - halfLineWidth);

         CGPathAddLineToPoint(path, NULL, CGRectGetMinX(rectArray[lastRect]) + halfLineWidth, CGRectGetMaxY(rectArray[0]) + halfLineWidth);

         CGPathCloseSubpath(path);
    }

    [color set]; // set fill and stroke color

     CGContextRef ctx = UIGraphicsGetCurrentContext();
     CGContextSetLineWidth(ctx, halfLineWidth * 2.);
     CGContextSetLineJoin(ctx, kCGLineJoinRound);

     CGContextAddPath(ctx, path);
     CGPathRelease(path);

     CGContextDrawPath(ctx, kCGPathFillStroke);
}
@end

Answer 2

Emmanuel's code in swift:

class TagLayoutManager : NSLayoutManager {

override func fillBackgroundRectArray(rectArray: UnsafePointer<CGRect>, count rectCount: Int, forCharacterRange charRange: NSRange, color: UIColor) {

    let cornerRadius:CGFloat = 3.0
    let path = CGPathCreateMutable()

    if rectCount == 1 || (rectCount == 2 && (CGRectGetMaxX(rectArray[1]) < CGRectGetMaxX(rectArray[0]))) {

        CGPathAddRect(path, nil, CGRectInset(rectArray[0], cornerRadius, cornerRadius))
        if rectCount == 2 {
            CGPathAddRect(path, nil, CGRectInset(rectArray[1], cornerRadius, cornerRadius))
        }

    } else {
            let lastRect = rectCount - 1

            CGPathMoveToPoint(path, nil, CGRectGetMinX(rectArray[0]) + cornerRadius, CGRectGetMaxY(rectArray[0]) + cornerRadius);

            CGPathAddLineToPoint(path, nil, CGRectGetMinX(rectArray[0]) + cornerRadius, CGRectGetMinY(rectArray[0]) + cornerRadius);
            CGPathAddLineToPoint(path, nil, CGRectGetMaxX(rectArray[0]) - cornerRadius, CGRectGetMinY(rectArray[0]) + cornerRadius);

            CGPathAddLineToPoint(path, nil, CGRectGetMaxX(rectArray[0]) - cornerRadius, CGRectGetMinY(rectArray[lastRect]) - cornerRadius);
            CGPathAddLineToPoint(path, nil, CGRectGetMaxX(rectArray[lastRect]) - cornerRadius, CGRectGetMinY(rectArray[lastRect]) - cornerRadius);

            CGPathAddLineToPoint(path, nil, CGRectGetMaxX(rectArray[lastRect]) - cornerRadius, CGRectGetMaxY(rectArray[lastRect]) - cornerRadius);
            CGPathAddLineToPoint(path, nil, CGRectGetMinX(rectArray[lastRect]) + cornerRadius, CGRectGetMaxY(rectArray[lastRect]) - cornerRadius);

            CGPathAddLineToPoint(path, nil, CGRectGetMinX(rectArray[lastRect]) + cornerRadius, CGRectGetMaxY(rectArray[0]) + cornerRadius);

            CGPathCloseSubpath(path);
        }

        color.set()

        let ctx = UIGraphicsGetCurrentContext()
        CGContextSetLineWidth(ctx, cornerRadius * 2.0)
        CGContextSetLineJoin(ctx, .Round)

        CGContextAddPath(ctx, path)

        CGContextDrawPath(ctx, .FillStroke)
    }

}

Answer 3

As a complement to @Emmanuel's solution, adding

CGContextSetAllowsAntialiasing(ctx, YES);
CGContextSetShouldAntialias(ctx, YES);

will make it look much better.

Answer 4

Update to Swift 3.1 Emmanuel's code in swift updated to version 3.1

class TagLayoutManager: NSLayoutManager {

override func fillBackgroundRectArray(_ rectArray: UnsafePointer<CGRect>, count rectCount: Int, forCharacterRange charRange: NSRange, color: UIColor) {

    let cornerRadius:CGFloat = 5
    let path = CGMutablePath.init()




    if rectCount == 1 || (rectCount == 2 && (rectArray[1].maxX < rectArray[0].maxX)) {

        path.addRect(rectArray[0].insetBy(dx: cornerRadius, dy: cornerRadius))

        if rectCount == 2 {
            path.addRect(rectArray[1].insetBy(dx: cornerRadius, dy: cornerRadius))
        }

    } else {

        let lastRect = rectCount - 1

        path.move(to: CGPoint(x: rectArray[0].minX + cornerRadius, y: rectArray[0].maxY + cornerRadius))

        path.addLine(to: CGPoint(x: rectArray[0].minX + cornerRadius, y: rectArray[0].minY + cornerRadius))
        path.addLine(to: CGPoint(x: rectArray[0].maxX - cornerRadius, y: rectArray[0].minY + cornerRadius))

        path.addLine(to: CGPoint(x: rectArray[0].maxX - cornerRadius, y: rectArray[lastRect].minY - cornerRadius))
        path.addLine(to: CGPoint(x: rectArray[lastRect].maxX - cornerRadius, y: rectArray[lastRect].minY - cornerRadius))

        path.addLine(to: CGPoint(x: rectArray[lastRect].maxX - cornerRadius, y: rectArray[lastRect].maxY - cornerRadius))
        path.addLine(to: CGPoint(x: rectArray[lastRect].minX + cornerRadius, y: rectArray[lastRect].maxY - cornerRadius))

        path.addLine(to: CGPoint(x: rectArray[lastRect].minX + cornerRadius, y: rectArray[0].maxY + cornerRadius))

        path.closeSubpath()

    }

    color.set()

    let ctx = UIGraphicsGetCurrentContext()
    ctx!.setLineWidth(cornerRadius * 2.0)
    ctx!.setLineJoin(.round)

    ctx!.setAllowsAntialiasing(true)
    ctx!.setShouldAntialias(true)

    ctx!.addPath(path)
    ctx!.drawPath(using: .fillStroke)
}
}

Answer 5

NSString doesn't have that. NSAttributedString has a backgroundColor property that can be used but without custom rendering, you won't be able to set a corner radius for the selection of text fragments.

So you need to write a custom UIView to render your text

Answer 6

An NSString just defines a string of text. It doesn't define the properties of how it is rendered. For showing text on the screen, usually a UILabel or UITextView is used. However, for the selection behavior that you're showing in your example, you'll need to do that drawing yourself. Also it is changing the text color of the selected text, so you'll need to handle doing that yourself.

If you created a custom UIView that allows you to draw the blue selection area, you could place that behind a UILabel, and you could use an NSAttributedString to set the text of the label where the "selected" text is white instead of black. That would probably be the simplest way to do this.