CODEWITHSUNDEEP
objective-ccocoarounded-cornersnstextfield
Dr.Kameleon
Dr.Kameleon

Reputation: 22820

NSTextField with rounded corners?

I'm trying to draw rounded corners around an NSTextField.

I've subclassed NSTextField, tried the code below, but without any result...

Any ideas?

- (void)drawRect:(NSRect)dirtyRect
{

    // black outline
    NSRect blackOutlineFrame = NSMakeRect(0.0, 0.0, [self bounds].size.width, [self bounds].size.height-1.0);
    NSGradient *gradient = nil;
    if ([NSApp isActive]) {
        gradient = [[NSGradient alloc] initWithStartingColor:[NSColor colorWithCalibratedWhite:0.24 alpha:1.0] endingColor:[NSColor colorWithCalibratedWhite:0.374 alpha:1.0]];
    }
    else {
        gradient = [[NSGradient alloc] initWithStartingColor:[NSColor colorWithCalibratedWhite:0.55 alpha:1.0] endingColor:[NSColor colorWithCalibratedWhite:0.558 alpha:1.0]];
    }
    [gradient drawInBezierPath:[NSBezierPath bezierPathWithRoundedRect:blackOutlineFrame xRadius:5 yRadius:5] angle:90];

}

Upvotes: 4

Views: 8338

Answers (5)

Rinku
Rinku

Reputation: 920

I did like this and it is working like charm.

yourLableName.wantsLayer = YES;
yourLableName.layer.cornerRadius = yourLableName.frame.size.width/2;

Upvotes: 1

Alen Liang
Alen Liang

Reputation: 529

Swift 3 version of @Verious codes, with properties editable in Interface Builder:

class RoundedTextFieldCell: NSTextFieldCell {

    @IBInspectable var borderColor: NSColor = .clear
    @IBInspectable var cornerRadius: CGFloat = 3

    override func draw(withFrame cellFrame: NSRect, in controlView: NSView) {
        let bounds = NSBezierPath(roundedRect: cellFrame, xRadius: cornerRadius, yRadius: cornerRadius)
        bounds.addClip()
        super.draw(withFrame: cellFrame, in: controlView)
        if borderColor != .clear {
            bounds.lineWidth = 2
            borderColor.setStroke()
            bounds.stroke()
        }
    }
}

Upvotes: 4

Anoop Vaidya
Anoop Vaidya

Reputation: 46543

The easiest one is to do with interface builder, unless you want the corners rounded by some units:

Simply select the border as rounded one :

enter image description here

Upvotes: 0

Vervious
Vervious

Reputation: 5569

It is better to subclass NSTextFieldCell to draw rounded corners to preserve NSTextField functionality, e.g:

- (void)drawWithFrame:(NSRect)cellFrame inView:(NSView *)controlView {
    NSBezierPath *betterBounds = [NSBezierPath bezierPathWithRoundedRect:cellFrame xRadius:CORNER_RADIUS yRadius:CORNER_RADIUS];
    [betterBounds addClip];
    [super drawWithFrame:cellFrame inView:controlView];
    if (self.isBezeled) {
        [betterBounds setLineWidth:2];
        [[NSColor colorWithCalibratedRed:0.510 green:0.643 blue:0.804 alpha:1] setStroke];
        [betterBounds stroke];
    }
}

Yields a nice rounded text field that works perfectly (if you had set it to draw a rectangle bezel in the first place, at least):

enter image description here

Upvotes: 7

Justin Boo
Justin Boo

Reputation: 10198

You are doing almost everything correct. You just need to change the textField's cell and radius which match. Take a look at this:

-(void)awakeFromNib {

    [[self cell] setBezelStyle: NSTextFieldRoundedBezel];
}


- (void)drawRect:(NSRect)dirtyRect
{

    NSRect blackOutlineFrame = NSMakeRect(0.0, 0.0, [self bounds].size.width, [self bounds].size.height-1.0);
    NSGradient *gradient = nil;
    if ([NSApp isActive]) {
        gradient = [[NSGradient alloc] initWithStartingColor:[NSColor colorWithCalibratedWhite:0.24 alpha:1.0] endingColor:[NSColor colorWithCalibratedWhite:0.374 alpha:1.0]];
    }
    else {
        gradient = [[NSGradient alloc] initWithStartingColor:[NSColor colorWithCalibratedWhite:0.55 alpha:1.0] endingColor:[NSColor colorWithCalibratedWhite:0.558 alpha:1.0]];
    }

    [gradient drawInBezierPath:[NSBezierPath bezierPathWithRoundedRect:blackOutlineFrame xRadius:10 yRadius:10] angle:90];

}

This is working for me nicely.

Upvotes: 4

Related Questions