窗口顶部的 iTunes 或 Xcode 样式信息框答案

【问题标题】：iTunes or Xcode style information box at top of window窗口顶部的 iTunes 或 Xcode 样式信息框
【发布时间】：2011-05-10 13:57:48
【问题描述】：

我有哪些选择可以在 Cocoa 中重新创建 iTunes 顶部的框，或者像 Apple 在 XCode 4 中使用的那样？

这只是一个简单的图像，顶部有控件吗？或者它是带有一些自定义风格魔法的NSBox？

【问题讨论】：

标签： cocoa user-interface graphics

【解决方案1】：

我不得不为我的一个项目编写类似的代码。对于我的解决方案，您将需要此tutorial 中的示例代码中可用的两个类别。此代码将绘制背景渐变和必要的阴影，您可以在控件内添加其他内容。目前，代码将绘制 Xcode 样式渐变作为背景，但如果您需要，您可以将其注释掉并取消注释 iTunes 样式之一。希望这会有所帮助。

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

【讨论】：

看起来很不错。我正在我正在研究的可重用库中使用该技术：github.com/Uncommon/UUFullHeightToolbar ..我还添加了一个渐变来模仿 Instruments 中看到的渐变。
更新：我将其重命名为 github.com/Uncommon/FullHeightToolbar GitHub 正在重定向，但可能不会持续。

【解决方案2】：

我会写一个自定义的 NSView。在drawRect: 中自己绘制背景和边框。您可以使用NSGradient 来绘制填充的背景，或者您可以将其保存为图像并进行绘制。您可能可以使用白色的NSShadow 来获得边框的浮雕效果。

最后，要在其中显示文本，您只需将文本字段添加为新自定义视图的子视图。

【讨论】：