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! While you're at it, check out some resources Treehouse students have shared here.

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

Posted by xjgzoraqqp
xjgzoraqqp
20,623 Points

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
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

https://dl.dropboxusercontent.com/u/16720756/example/Screen%20Shot%202014-06-02%20at%2023.38.49.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
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
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

xjgzoraqqp
xjgzoraqqp
20,623 Points
xjgzoraqqp
xjgzoraqqp
20,623 Points

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?

KyungMoon Lee
KyungMoon Lee
202 Points
KyungMoon Lee
KyungMoon Lee
202 Points

which course did you learn card like uitableview ??