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

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

itunes

¿Es solo una imagen simple, con control en la parte superior? O es un NSBox con un poco de magia de estilo personalizado?

preguntado el 10 de mayo de 11 a las 13:05

2 Respuestas

Tuve que codificar algo similar para uno de mis proyectos. Para mi solución, necesitará las dos categorías disponibles en el código de muestra en este tutoriales. Este código dibujará el degradado de fondo y las sombras necesarias, dependerá de usted agregar contenido adicional dentro del control. Actualmente, el código dibujará el degradado de estilo Xcode como fondo, pero puede comentarlo y descomentar el estilo de iTunes 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];
}

contestado el 10 de mayo de 11 a las 22:05

Eso se ve muy bien. Estoy usando esa técnica en una biblioteca reutilizable en la que estoy trabajando: github.com/Uncommon/UUFullHeightToolbar ... También agregué un degradado para imitar el que se ve en Instrumentos. - Poco común

Actualización: lo renombré a github.com/Uncommon/FullHeightToolbar GitHub está redireccionando por el momento, pero eso probablemente no durará. - Poco común

Escribiría un NSView personalizado. Dibuja el fondo y el borde drawRect:. Usted puede utilizar NSGradient para dibujar el fondo relleno o, alternativamente, puede guardarlo como una imagen y dibujarlo. Probablemente podrías usar un blanco NSShadow para obtener el efecto de relieve para el borde.

Finalmente, para que su texto aparezca allí, simplemente puede agregar campos de texto como subvistas de su nueva vista personalizada.

contestado el 10 de mayo de 11 a las 18:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.