Drawing Line Separator with Cocoa

Question

How would one draw a line separator such as this:

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));    
}

Answer 1

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

Answer 2

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];

Answer 3

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];