It’s been awhile since I’ve posted any new Cocoa stuff. Especially anything as widely loved as JLNDragEffectManager. Since I love all that positive attention and am sorely disappointed by the recent falloff of ego-sustaining limelight, I thought I’d solve yet another of the Cocoa world’s problems and give you a rather easy way of mimicking the “recessed list effect” found in Dictionary.app. I was reminded of the effect by this StackOverflow post today (thanks, Li Fumin, for reminding me I wanted to figure this out).

Recessed List Effect In Dictionary.app

The effect I’m talking about is shown to the right. When you search for a word and there are multiple results, you get a list on the left that looks as if it’s recessed. It’s no simple shadow edge because, to achieve the desired visual effect, the top and bottom have to fade out, forming a visual depression.

How Does It Work?

This lovely effect requires subclassing three views (as far as I could tell to get it to work correctly). A NSTableView subclass provides the basic shadow edge. An NSView subclass provides the same edge but a fade at the top and bottom. An NSSplitView (set to Thin Divider mode) subclass draws the divider with the magic slightly-lighter-than-default color and the same top and bottom fade.

The “backing” view (the NSView subclass) has to provide the fade because the table view’s top and bottom edge move around when scrolled, which would take the fade with it were it responsible for this. The table view is sized in the backing view to leave an 11-pixel gap at the top and bottom to let the backing view’s fade show through. The backing view stays put and also provides a repeat of the shadow effect to account for the iOS-like elastic scrolling that was added in Lion. Since table views are happiest when they draw a background, this was a good design compromise.

It’s Not Perfect

It could be better. It doesn’t exactly match Apple’s flavor as I’ve fudged some things and don’t have enough time to polish it up more. You’re more than welcome to download it here here.

How Do We Use It?

See Github for details. Long story short: copy the three view subclasses (six source files in all) into your project. Open the example app’s MainMenu.xib and copy the split view and its contents into your project (you’ll probably want to replace the web view with something sensible). That’s all there is to it.

How’d You Get the Colors?

I use and rely on xScope (by Icon Factory) for such things. Well worth the money over the years.

Where Do I Get It?

From Github. Liberal license (but I request attribution … you know … ego whoring and all). Enjoy!

Related Posts