Theocacao: THCanvasView: Finder-Like Icon View for Cocoa

THCanvasView: Finder-Like Icon View for Cocoa

Mimicking the Finder icon view isn't entirely easy. Drawing the icons is one thing, but handling drag and drop, repositioning, adjusting the scroll view when the content changes — it all takes some work. To ease the burden, I'd like to share THCanvasView with you.

(Update: See THCanvasView 1.0.1 with a new sample app.)

Downloads: THCanvasView (28k) | THCanvasView + CorkBoard (72k)

While I'm not promising this will address all of your icon view needs, it does do some of the basics pretty well. It accepts multiple file drops from the Finder, does global resizing, displays image previews, allows repositioning withing the view, and is even Cocoa Bindings aware.

It's missing some things that the Finder has, such selection rectangles, shift-selection, multiple item drags, auto-arrangement, and arrow navigation. There are also some minor bugs, and it could draw more efficiently, but it's at least 80% on the way to doing the sort of thing you would typically need to do. There are tons of comments.

Some improvements are pretty easy to address, others will take a bit more work. The single most obvious shortcoming is that the label text can only be as wide as the icon itself. This is, of course, silly, but I'd rather release the basic version now.

It's also a pretty good sample for basics on how to implement and use a custom view. The sample app is called "CorkBoard," which is just a simple wrapper around the view.

You can drop files onto CorkBoard, select them, move them, delete them, and adjust the icon size. Double-clicking an item will launch or open it. Cocoa Bindings is used to display a simple status message which tells you how many items are currently in the view.

It's a fairly basic implementation, but maybe somebody will come up with some interesting ideas for it. I may make some improvements or more sample apps and post them. Leopard provides a lot more options for better and simpler implementations of the same concepts, so maybe we'll look at that, too.

Enjoy.

THCanvasView: Finder-Like Icon View for Cocoa
Posted Oct 11, 2007 — 13 comments below

Seth Willits — Oct 11, 07 4727

I wrote a quick one (sorta) for my yet-to-be-finished-and-released app QuickPick ( http://www.araelium.com/quickpick/ ).

What'd you write this for?

Scott Stevenson — Oct 11, 07 4728

QuickPick ( http://www.araelium.com/quickpick/ )
Looks interesting.

What'd you write this for?
It was originally the basis for a graphics tutorial. Bits and pieces of it got taken out and used elsewhere.

Joachim Bengtsson — Oct 11, 07 4729

There's also the excellent http://www.zathras.de/angelweb/sourcecode.htm#UKDistributedView . Feels a bit old, but it definitely works, including multiple selection and such.

Uli Kusterer — Oct 11, 07 4730

@Joachim: What do you mean by "feels a bit old"? You mean the code, or the way it draws, or what? Anything I can do to improve it in your eyes?

Joachim Bengtsson — Oct 11, 07 4731

@Uli: Oh, don't take it the wrong way; it works great and looks good. It just feels slightly less 10.5 than QuickPick/THCanvasView -- that's possibly partly because of the very os8-esque square icons and gray background in your demo app that comes to my mind whenever I think of the class :P

Although the solid dragging of icons feels wonky when used to ghost dragging in Finder.

Scott Stevenson — Oct 11, 07 4733

There's also the excellent http://www.zathras.de/angelweb/sourcecode.htm#UKDistributedView

True, and in many ways it's futher along than THCanvasView. However, it's worth mentioning that there's a (very modest) license fee for using UKDistributedView in for-profit apps. As far as I can tell, you're not allowed to distribute changes to the code yourself.

The source for THCanvasView is licensed in BSD style, so you can use it in any app you want and distribute changes to the code. That doesn't make it universally better, of course. Just another option.

Brandon Walkin — Oct 11, 07 4734

This will surely come in handy. Thanks Scott.

Blain — Oct 11, 07 4735

Perfect timing. This is just as I was working on my own Finder recreation, albeit idealized and a list view. So I'm adding in my offering (linked to by the name), which is some utility functions and categories to bridge IconRefs and UTIs into NSImages. This includes the darkened/selected icon and folder icons.

Elsewhere, for roundrects, I cheated and just used:

[drawnLine setLineJoinStyle:NSRoundLineJoinStyle];
[drawnLine setLineWidth:ourRadius];
[drawnLine appendBezierPathWithRect:ourHilightRect];
[drawnLine fill];
[drawnLine stroke];

Admittedly, this only works for a single-color roundrect.

Craig — Oct 12, 07 4737

I am very new to Cocoa and I was pointed to this site by a friend. I downloaded this project and it is very well commented, which will be useful in the learning process, but (forgive my "newb"-ness) how do I run this?

Dragan Mili — Oct 12, 07 4740

This looks really nice. I made my own, embedded in my application Springy. It is still very rough, without any drawing optimizations (read: it's slow), doesn't allow free icon arrangement (they are arranged in a grid) and there are a lot more things to improve, but it provides complete browsing functionality (going into items hierarchy), has data source and delegate methods similar to those of NSOutlineView, and also supports bindings. Full drag&drop functionality (including even promise drags) is also already in place. It's still just a proof of concept and I put it into the application just to hear the users feedback and points of improvement that I'd have missed otherwise. Once it's completely finished and polished, it will be publicly available, probably also under BSD license.

Scott Stevenson — Oct 12, 07 4741

@Craig: I downloaded this project and it is very well commented, which will be useful in the learning process, but (forgive my "newb"-ness) how do I run this?

You must have the Xcode Tools installed, which come with your computer or the most recent version of Mac OS X you've purchased. They're not installed by default, though, so you need to put the installation disc back in and look for either a folder called "Xcode Tools" or "Optional Installs."

If you need help with absolute basics, take a look at Learn Cocoa I and Learn Cocoa II.

mark — Nov 16, 07 5063

So how about a reimplementation using the new NSCollectionView? Would be nice.

Scott Stevenson — Nov 16, 07 5064

@mark: So how about a reimplementation using the new NSCollectionView? Would be nice

I'm not necessarily opposed to that, but what did you have in mind, specifically? NSCollectionView is already "done" as a stock class, so I'm not sure what THCanvasView would add to it.

As far as I can tell, NSCollectionView is based around the idea that the display is grid-based, whereas THCanvasView allows abitrary positioning. I think it would be more work to try to modify NSCollectionView than just starting from scratch.

I am working on an updated version of THCanvasView for Leopard, but it doesn't use NSCollectionView.

Comments Feed