8

Several apps, including the built-in Address Book use a HUD window that is semi-transparent, with large shadowed text. I'd like to implement a similar window in my Cocoa Mac app.

screenshot

Is there a free implementation of this kind of window somewhere?

If not, what is the best way to implement it?

amrox
  • 6,207
  • 3
  • 36
  • 57

2 Answers2

23

Here's a sample project that shows how to do it:

http://github.com/NSGod/BlackBorderlessWindow

Basically, you need to create a borderless NSWindow subclass. The easiest way to do this is to set your window size and arrangement in the nib file, and then set its class to be your custom subclass. So while it will still look like a normal window in Interface Builder, at runtime it will appear as you need it to.

@implementation MDBorderlessWindow

- (id)initWithContentRect:(NSRect)contentRect
            styleMask:(NSUInteger)windowStyle
              backing:(NSBackingStoreType)bufferingType
                defer:(BOOL)deferCreation {

    if (self = [super initWithContentRect:contentRect
                            styleMask:NSBorderlessWindowMask
                              backing:NSBackingStoreBuffered defer:deferCreation]) {
            [self setAlphaValue:0.75];
            [self setOpaque:NO];
            [self setExcludedFromWindowsMenu:NO];
    }
    return self;
}

The alpha value will make the window semi-transparent.

Also, you can create a custom NSView subclass that will draw a round rectangle:

@implementation MDBlackTransparentView

- (id)initWithFrame:(NSRect)frame {
    if (self = [super initWithFrame:frame]) {

    }
    return self;
}

- (void)drawRect:(NSRect)frame {
    NSBezierPath *path = [NSBezierPath bezierPathWithRoundedRect:frame
                                    xRadius:6.0 yRadius:6.0];
    [[NSColor blackColor] set];
    [path fill];
}

@end

Like with the window, you simply set the class of the window's contentView to be your custom NSView subclass. (Use outline view mode and click the disclosure triangle to show the nested NSView inside the icon of the window in the nib file). Again, while the view will look ordinary in Interface Builder, it will look okay at runtime.

Then just place an NSTextField on top of view and set the text accordingly.

Note that, in general, borderless windows aren't easy to work with (for example, if you want to be able to drag the window around, you'll need to add that functionality back yourself). Apple has some sample code on how to allow dragging, for instance.

alt text

NSGod
  • 22,699
  • 3
  • 58
  • 66
  • Exactly what I was looking for. Funny, even the demo app used exactly the same "1-800-MY-APPLE" sample text. – amrox Dec 16 '10 at 00:56
  • 2
    @amrox: Well, I made the demo specifically ;-) (Actually, I already had a sample project of a borderless window, it only took a minute to tweak it to do what you wanted). – NSGod Dec 16 '10 at 03:43
  • Now it would be great if someone would make this into an OSX service that you could just pipe some text into. There was an app like this (LargeType 1.0) but it has been discontinued and downloads have been removed(!?). You up for it NSGod? – davemyron Jul 19 '11 at 17:42
  • this is so cool. Just what I am looking for. Having messing arround with http://www.cocoabuilder.com/archive/cocoa/96267-window-transparency.html but I't's not much of a help than this one. Thanks @NSGod – swdev Oct 30 '11 at 21:55
  • @orangechicken Check out the freely available mac app Alfred (http://www.alfredapp.com). I use it for just this purpose, e.g. highlight the phone number and Cmd-C -> Cmd-Space (my Alfred shortcut) -> Cmd-V -> Cmd-L ... Voilà – dingo sky Dec 20 '14 at 01:23
3

Thank you for sharing this code. Helped me a lot! You may add the following line...

[self setBackgroundColor:[NSColor clearColor]];

to the init function of the window. This removes the white corners.

Scott Allen
  • 1,199
  • 1
  • 12
  • 14
Jan Linxweiler
  • 382
  • 2
  • 9