Drawing Line Separator with Cocoa

Question

How would one draw a line separator such as this:

enter image description here

Note that there's 2 single pixel lines on top of each other. Any tips?

Edit:

Here's the code I needed, in a NSBox subclass: (or NSView, doesn't really matter):

- (void)drawRect:(NSRect)rect
{
    [[NSColor lightGrayColor] set];
    NSRectFill(NSMakeRect(0, 1, NSWidth(rect), 1));
    
    [[NSColor whiteColor] set];
    NSRectFill(NSMakeRect(0, 0, NSWidth(rect), 1));    
}

I created an NSView subclass project which does one thing only: draw a horizontal line: https://github.com/ashchan/KASeparatorLine. The difference from the line in the original question is it has gradient. — James Chen, Feb 17 '14 at 00:19

score 7 · Accepted Answer · answered Feb 25 '13 at 16:18

Typically this kind of separator is drawn with an NSBox, usually configured as an NSBoxSeparator type. That's not quite the look you're looking for, though. I'd recommend hand-drawing it in an NSBox subclass (so you get the normal NSBox behaviors). For an example of an NSBox subclass, see Matt Gemmell's RoundedBox.

You just need two lines, so the drawRect: should be very simple. Encapsulating it this way will make it extremely flexible for you.

(Of course you can also consider just using the standard NSBox separator rather than creating a custom look. That's what it's there for.)

Thanks, I've now implemented the drawing code and added the code to my original question in case anyone else wants it. — , Feb 25 '13 at 17:24

James Webster · Answer 2 · 2013-02-25T16:13:59.390

0

I mimicked it with something like this with iOS, assuming NSView has a similar interface, I expect this will help:

UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(11, 99, 298, 1)];
lineView.backgroundColor = [UIColor darkGrayColor];
[panel addSubview:lineView];

UIView *lineView2 = [[UIView alloc] initWithFrame:CGRectMake(10, 100, 300, 1)];
lineView2.backgroundColor = [UIColor whiteColor];
[panel addSubview:lineView2];

Having a look at the NSView interface myself, it appears to be almost directly transferable:

NSView *lineView = [[NSView alloc] initWithFrame:CGRectMake(11, 99, 298, 1)];
lineView.backgroundColor = [NSColor colorWithCalibratedRed:0.4f green:0.4f blue:0.4f alpha:1.0f];
[panel addSubview:lineView];

NSView *lineView2 = [[NSView alloc] initWithFrame:CGRectMake(10, 100, 300, 1)];
lineView2.backgroundColor = [NSColor colorWithCalibratedRed:1.0f green:1.0f blue:1.0f alpha:1.0f];
[panel addSubview:lineView2];

edited Feb 25 '13 at 16:13

answered Feb 25 '13 at 15:48

James Webster

31,873
11
70
114

2

The question is about doing this with AppKit on OS X, not using UIKit on iOS. – Andrew Madsen Feb 25 '13 at 15:53
@AndrewMadsen I didn't spot that: Amended =] – James Webster Feb 25 '13 at 16:17
Thanks for this, but I found another way with which I only need 1 object. – Feb 25 '13 at 17:26
the "UIView *lineView" saves me a lot of effort, after trying lots of drawRect stuff from other places. – lionfly May 04 '13 at 18:17

score 0 · Answer 3 · answered May 18 '14 at 07:30

you could also use a CALayer

CALayer *lineLayer = [CALayer layer];
lineLayer.frame = (CGRectMake(0, 100, 300, 1));
[lineLayer setBackgroundColor:CGColorCreateGenericRGB(1.0, 1.0, 1.0, 1.0)];
[panel.layer addSublayer: lineLayer];

or (if you don't have access to a layer)

CALayer *lineLayer = [CALayer layer];
lineLayer.frame = (CGRectMake(0, 100, 300, 1));
[lineLayer setBackgroundColor:CGColorCreateGenericRGB(1.0, 1.0, 1.0, 1.0)];
[panel setWantsLayer:YES];
[panel setLayer: lineLayer];

Drawing Line Separator with Cocoa

Edit:

3 Answers3