Feature request: Grid layout like iTunes and iPhoto's

[GoogleCodeExporter]

It'd be awesome if you implemented a grid layout like what iTunes and 
iPhoto (and I think Safari 4) use. It'd also be superb if the selectable 
buttons that the grid would contain were available to use on their own too. 
I love what I see right now, though. :)

Original issue reported on code.google.com by rbysam...@gmail.com on 12 Mar 2009 at 7:52

[GoogleCodeExporter]

I've attached a screenshot of the grid view (please verify that this is the 
component your are referencing).

When you selectable buttons, do you mean the buttons at the top (e.g. "Albums", 
"Artists" etc.).

Original comment by kenneth....@gmail.com on 12 Mar 2009 at 10:55

• Changed state: Accepted
• Added labels: Type-Enhancement
• Removed labels: Type-Defect

Attachments:

• iTunes.png

[GoogleCodeExporter]

Yes, that's what I mean.

What I meant by "selectable buttons" were the icons in the grid itself--the 
active 
one in the screenshot is "For Those About to Rock". It'd be superb if I could 
put 
those buttons into my own layouts and get their behavior bundled in. Of course, 
getting those tabs at the top ("Albums", etc.) alone would be nice too, but I 
meant 
the icon buttons themselves.

Thanks again!

Original comment by rbysam...@gmail.com on 12 Mar 2009 at 11:12

[GoogleCodeExporter]

One of the more interesting parts to implement (since I've implemented this 
kind of
component and recently reimplemented it to look better) is the ability to vary 
the
size of the items using the slider. I haven't implemented that part, but I 
remember
seeing some code for that somewhere. Might have been in Filthy Rich Clients.

The size slider isn't too useful in the case of iTunes, but if you've got an
application where there could potentially be dozens or perhaps even 100 items 
in the
list, then being able to vary the size to your liking could prove useful.

On the visual side of things, there's a subtle drop shadow and bevel effect 
applied
to each icon. I've done the former using a modified form of Romain Guy's 
example code
for fast shadow rendering, but I haven't looked into the bevel effect yet.

If you're looking into curved icons (e.g. clip against a rounded rectangle), 
you'll
need to work around that since the clipper isn't anti-aliased. The workaround 
is to
draw a mask to an intermediate image, apply AlphaComposite.SrcAtop as the 
composite
and then draw the desired image over that. I'm sure that this is old knowledge 
for
you, but I just went through this process a couple days ago and wanted to 
share. :)

Original comment by sten...@gmail.com on 26 Mar 2009 at 5:52

[GoogleCodeExporter]

Thanks for sharing your lessons learned Jon!

Original comment by kenneth....@gmail.com on 26 Mar 2009 at 12:14

[GoogleCodeExporter]

Ken, do you know what font and font details are used in those tabs in the iTunes
image? I've started to have a go at this but not sure what the font is. 
Attached is
the start of my attempt:

Original comment by johnatha...@gmail.com on 10 Jan 2010 at 9:18

Attachments:

• [Tab Component.tiff](https://storage.googleapis.com/google-code-attachments/macwidgets/issue-66/comment-5/Tab Component.tiff)

[GoogleCodeExporter]

Hi Johnathan,

I'm not exactly sure -- my first guess would be Helvetica, but I'm one to be 
able to pick a font out of a crowd.

-Ken

Original comment by kenneth....@gmail.com on 10 Jan 2010 at 10:26

[GoogleCodeExporter]

Lucida Grande, just like the rest of OS X's UI.

Original comment by andrewr...@gmail.com on 2 Mar 2010 at 10:25