iTunes or Xcode style information box at top of window

Question

What are my options to recreate the box at the top of iTunes in Cocoa, or like Apple uses in XCode 4?

Is this just a plain image, with control on top? Or is it an NSBox with some custom style magic?

Answer 1

I had to code up something similar for one of my projects. For my solution, you will need the two categories available from the sample code in this tutorial. This code will draw the background gradient and the necessary shadows, it would be up to you to add additional content inside the control. Currently, the code will draw the Xcode style gradient as the background, but you could comment that out and uncomment the iTunes style one if that is what you need. Hope this helps.

#import "NSShadow+MCAdditions.h" // from the tutorial linked to above
#import "NSBezierPath+MCAdditions.h" // from the same tutorial

- (void)drawRect:(NSRect)dirtyRect {
    static NSShadow *kDropShadow = nil;
    static NSShadow *kInnerShadow = nil;
    static NSGradient *kBackgroundGradient = nil;
    static NSColor *kBorderColor = nil;

    if (kDropShadow == nil) {
        kDropShadow = [[NSShadow alloc] initWithColor:[NSColor colorWithCalibratedWhite:.863 alpha:.75] offset:NSMakeSize(0, -1.0) blurRadius:1.0];
        kInnerShadow = [[NSShadow alloc] initWithColor:[NSColor colorWithCalibratedWhite:0.0 alpha:.52] offset:NSMakeSize(0.0, -1.0) blurRadius:4.0];
        kBorderColor = [[NSColor colorWithCalibratedWhite:0.569 alpha:1.0] retain];
        // iTunes style
        /*
         kBackgroundGradient = [[NSGradient alloc] initWithColorsAndLocations:[NSColor colorWithCalibratedRed:0.929 green:0.945 blue:0.882 alpha:1.0],0.0,[NSColor colorWithCalibratedRed:0.902 green:0.922 blue:0.835 alpha:1.0],0.5,[NSColor colorWithCalibratedRed:0.871 green:0.894 blue:0.78 alpha:1.0],0.5,[NSColor colorWithCalibratedRed:0.949 green:0.961 blue:0.878 alpha:1.0],1.0, nil];
         */
        // Xcode style
        kBackgroundGradient = [[NSGradient alloc] initWithColorsAndLocations:[NSColor colorWithCalibratedRed:0.957 green:0.976 blue:1.0 alpha:1.0],0.0,[NSColor colorWithCalibratedRed:0.871 green:0.894 blue:0.918 alpha:1.0],0.5,[NSColor colorWithCalibratedRed:0.831 green:0.851 blue:0.867 alpha:1.0],0.5,[NSColor colorWithCalibratedRed:0.82 green:0.847 blue:0.89 alpha:1.0],1.0, nil];
    }

    NSRect bounds = [self bounds];
    bounds.size.height -= 1.0;
    bounds.origin.y += 1.0;

    NSBezierPath *path = [NSBezierPath bezierPathWithRoundedRect:bounds xRadius:3.5 yRadius:3.5];

    [NSGraphicsContext saveGraphicsState];
    [kDropShadow set];
    [path fill];
    [NSGraphicsContext restoreGraphicsState];

    [kBackgroundGradient drawInBezierPath:path angle:-90.0];

    [kBorderColor setStroke];
    [path strokeInside];

    [path fillWithInnerShadow:kInnerShadow];
}

Answer 2

I'd write a custom NSView. Draw the background and border yourself in drawRect:. You can use NSGradient to draw the filled background, or alternatively you could save it as an image and draw that. You could probably use a white NSShadow to get the embossed effect for the border.

Finally, to get your text on there, you could just add text fields as subviews of your new custom view.