dissecting Twitter for Mac : how this amazing UI is done

Question

Loren Brichter made an amazing job with Twitter for Mac and created new UI standard. I am trying to understand how this has been done in order to be able to use some of these features in my apps: - The title Bar and title bar buttons, how to get something similar? - Animations, how to swap view like this? - Table view, it is nice but is it really a NSTableView?

...

Thanks in advance for your tips and tricks

Answer 1

From what I've been told, Loren wrote his own NSView replacement based on top of CoreAnimation. He basically re-wrote UIKit for the desktop. This allowed him to do all the fancy transitions and such without being held back by the legacy NSView code.

Answer 2

I'm not sure about a lot of the interface, but I did some searching around myself...

The normal titlebar is actually hidden I think, and if you find Twitter.app, show package contents and take a look in the /Resources folder there's custom close, minimize and zoom images.

You could use something like BWToolkit to make a custom black titlebar with its gradient view.

To hide the standard titlebar: [window setStyleMask:3]; (if window is an IBOutlet linked to your window). For titlebar buttons, just use NSButtons, with an image that's about 12 x 14 pixels and in the Inspector in Interface Builder, uncheck "Bordered" for the buttons.

To make the window look even more "fancy", you could make it fade in and have just slight transparency: [[window animator] setAlphaValue:0.9];

Fade out: NSTimeInterval delay = [[NSAnimationContext currentContext] duration] + 0.1; [window performSelector:@selector(orderOut:) withObject:nil afterDelay:delay]; [[window animator] setAlphaValue:0.0];

Answer 3

If you're still working on this...

Twitter open sourced a UI library based on their work on Twitter for Mac called TwUI earlier this month:

http://engineering.twitter.com/2011/07/starting-today-twitter-is-offering-twui.html