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

Discussion in 'iOS Programming' started by rthauby, May 25, 2010.

  1. rthauby macrumors newbie

    Joined:
    May 25, 2010
    #1
    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!!
     

    Attached Files:

  2. ranguvar macrumors 6502

    Joined:
    Sep 18, 2009
    #2
    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.
     
  3. PhoneyDeveloper macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #3
    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.
     
  4. rthauby thread starter macrumors newbie

    Joined:
    May 25, 2010
    #4
    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?
     
  5. robbieduncan Moderator emeritus

    robbieduncan

    Joined:
    Jul 24, 2002
    Location:
    London
    #5
    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...
     
  6. rossipoo macrumors regular

    Joined:
    Jun 7, 2009
    #6
    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.
     
  7. admanimal macrumors 68040

    Joined:
    Apr 22, 2005
    #7
    I don't think there are any actual UITableViews or UITableViewCells involved. Perhaps in the Marvel app but not iTunes.
     
  8. PhoneyDeveloper macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #8
    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.
     
  9. rthauby thread starter macrumors newbie

    Joined:
    May 25, 2010
    #9
    cool! this is certainly going to help me get going.
     
  10. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #10
    UITableView is single-column (in iPhone OS).
     
  11. rthauby thread starter macrumors newbie

    Joined:
    May 25, 2010
    #11
    but you could use a custom UIView to make two/more cols, right?
     
  12. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #12
    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.
     
  13. firewood macrumors 604

    Joined:
    Jul 29, 2003
    Location:
    Silicon Valley
    #13
    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.
     
  14. Mhkobe macrumors regular

    Joined:
    Jun 25, 2009
    #14
    I'd say scroll view, but there is a possibility it is a subview with a tab bar...
     
  15. rossipoo macrumors regular

    Joined:
    Jun 7, 2009
    #15
    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.
     
  16. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #16
    Well, unfortunately you've been misinformed. The iPad does have this limitation.
     
  17. firewood macrumors 604

    Joined:
    Jul 29, 2003
    Location:
    Silicon Valley
    #17
    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.
     

Share This Page