Cuadro de información de estilo iTunes o Xcode en la parte superior de la ventana

Question

¿Cuáles son mis opciones para recrear el cuadro en la parte superior de iTunes en Cocoa, o como lo hace Apple en XCode 4?

Se trata sólo de una imagen sencilla, con un control en la parte superior? ¿O es un NSBox con un poco de magia de estilo personalizado?

Answer 1

Tuve que codificar algo similar para uno de mis proyectos. Para mi solución, necesitará las dos categorías disponibles del código de muestra en este tutorial. Este código dibujará el degradado de fondo y las sombras necesarias, depende de usted agregar contenido adicional dentro del control. Actualmente, el código dibujará el degradado de estilo de Xcode como fondo, pero podría comentarlo y descomentar el estilo de iTunes uno si eso es lo que necesita. Espero que esto ayude.

#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

Escribo un NSView personalizado. Dibuje el fondo y borde usted mismo en drawRect:. Puede usar NSGradient para dibujar el fondo relleno o, alternativamente, puede guardarlo como una imagen y dibujarlo. Probablemente pueda usar un blanco NSShadow para obtener el efecto realzado para el borde.

Finalmente, para obtener su texto allí, podría simplemente agregar campos de texto como subvistas de su nueva vista personalizada.