Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


iOS “Card” like UITableView layout

Hi I’ve just finished the “Build a Photo Browser iPhone App” course. I’m very inspired and want to build something similar, but with a slightly different layout.

I’ve found a nice design pattern, which is pretty awesome. It's seen in almost every Google app, but also in Tumblr, Facebook etc. Have a look at these screenshots: Google Maps Google Maps Google Auth Tumblr

How do I implement such “card” like design? And is it best to use Table Views or Collection Views?

Last but not least, thanks to all the iOS teachers for the amazing videos. I’ve learned so much by watching and coding along. I love the project-based approach. Keep up the good work!

Thanks in advance Terkel

5 Answers

Wayne Knoesen
Wayne Knoesen
9,435 Points

Here is a little screen shot of the card in the story board. The whole cell is clickable, while we have 2 buttons, one for sharing and the other for information that is for that exact card.

The card has a little shadow as you will see in the screen shot and the second screen shot is the cell in action on the simulator We also have 2 Cell types. You can see both on this Screen shot. from the storyboard. https://dl.dropboxusercontent.com/u/16720756/example/Screen%20Shot%202014-06-02%20at%2023.33.38.png


The image says 400X400 but our backend is actually scalling it down when we request it on iOS as we share the same backend with Android and have build a cards solution for them too.

Wayne Knoesen
Wayne Knoesen
9,435 Points

We have built an app that uses the Cards UI pattern.

Our approach was to use a table view, however it seems the "newer" way. I guess that both ways can get you a very similar result.

Stone Preston
Stone Preston
42,016 Points

you can use a tableView and storyboard's prototype tableView cell to design the way your card looks. The hard part is going to be making your cell heights and text label heights dynamic so that they resize to fit different sized content. The diary app briefly covers dynamic cell height

Thank you Wayne. Did your cards have drop-shadow and margins to the left and right as seen in Googles apps? if true, how did you accomplish this. Did you use Storyboards to do the design, or code only?

which course did you learn card like uitableview ??