iOS What are the UI elements in the itunes and marvel app??

[rthauby]

Hi everyone,

Just joined the forums because I've been looking for an answer desperately.

I've just started learning obj-c/cocoa touch so bear with me if I'm asking something really stupid here. I'm building an app that requires the same type of navigation (or similar) to that seen in the itunes app and the marvel comics app.

I can't seem to find a good explanation of what UI elements are used on those. Is that a HTML assembled UIWebView? I somehow doubt it... Is that a UITableView?

How would you go about replicating that type of navigation in IB? Is that a navigation bar in disguise?

(see attached screens)

Any help would be appreciated. Thanks!!

 

[ranguvar]

This is pure speculation (I don't own an iPad so I don't know how exactly those controls work), but I'd assume it's a UIScrollView. Inside that scrollview, there are many some subviews (the rectangle for each movie). Each of those subviews contains in turn some labels for the movie name, a UIImageView for the movie cover and the rating view.

EDIT: You could take a look at Apple's PageControl example. It should be fairly easily adaptable to what you want.

 

[PhoneyDeveloper]

The dots in the one image look like a page control. The arrows are probably simply buttons. I agree that the detail view for each movie is either comprised of standard view (image view, labels) or it might be a custom view put together that draws the strings and an image.

 

[rthauby]

i see...

The dots in the one image look like a page control. The arrows are probably simply buttons.

and how would you typically handle a purely aesthetic element like the bar where the buttons and pageControl are? Would you just use a UIImageView, or do you set the background Image in a view programatically?

 

[robbieduncan]

i see...



and how would you typically handle a purely aesthetic element like the bar where the buttons and pageControl are? Would you just use a UIImageView, or do you set the background Image in a view programatically?

Personally I'd look at creating custom views and drawing them programatically using CoreGraphics. That way when I want them in different sizes/scaled to different DPI or whatever it just works. I look at using images as a last-choice scenario. Many others will, no doubt, argue the other way...

 

[rossipoo]

I agree with robbie, it's almost certainly a subclassed UICell. A cell represents a single item, say Sherlock Holms: The subclassed UICell will need to have member attributes for a UIImage for the cover art, and several text attributes for the genre, release date, ratings, a delegate for the button, etc, and you just write some code so that the cell knows how to draw itself.

Then you can use this custom cell inside a TableView with two or three columns to make it look like these examples.

In the iTunes example, the sideways navigation buttons are more difficult to say exactly what they did, but it's obviously custom, as most cool looking things are. It looks like some work, if anything; you have to realize how extensive Apple's experience is with this stuff. It could be subclass of SegmentedControl, with a custom drawing method that draws the corners round on top, but not on the bottom.

 

[admanimal]

I don't think there are any actual UITableViews or UITableViewCells involved. Perhaps in the Marvel app but not iTunes.

 

[PhoneyDeveloper]

I haven't implemented anything like this but there are various ways to get this appearance.

Just a few ideas of the top of my head:

A toolbar wil draw the gradient that one likes. In fact the bar with the left button, page controle, and right button could be a toolbar. The controls would probably need to have their background color set to clear. It is also possible to draw that gradient using core graphics. Remember that images can be stretched. So you could use an image that's the required height and one pixel wide to draw that whole bar just by stretching it or scaling it. There are some rounded corners though in the screenshot, which I'm not sure how they did. Either core graphics or an image.

 

[rthauby]

cool! this is certainly going to help me get going.

 

[dejo]

Then you can use this custom cell inside a TableView with two or three columns to make it look like these examples.

UITableView is single-column (in iPhone OS).

 

[rthauby]

UITableView is single-column (in iPhone OS).

but you could use a custom UIView to make two/more cols, right?

 

[dejo]

but you could use a custom UIView to make two/more cols, right?

You could. But then you'd need to, for the Marvel app's case, do some fancy coding to make sure all the columns are in sync, when scrolling and such.

 

[firewood]

If you use the iTunes HTTP agent string and take the URL for that store page and download it (wget or curl), you will find a whole pile of HTML elements.

 

[Mhkobe]

I'd say scroll view, but there is a possibility it is a subview with a tab bar...

 

[rossipoo]

UITableView is single-column (in iPhone OS).

I don't have any experience with it, but I understand that iPad does nit any this limitation, which both these apps are. In any case though, your UICell could draw two or three movies in one row.

 

[dejo]

I don't have any experience with it, but I understand that iPad does nit any this limitation, which both these apps are.

Well, unfortunately you've been misinformed. The iPad does have this limitation.

 

[firewood]

Well, unfortunately you've been misinformed. The iPad does have this limitation.

But a web view displaying HTML div tags does not have this limitation. And div tags are in all the HTML data that the store sends down to the iTunes app.

Draw your own conclusions.