views:

20

answers:

1

Folks,

coming from the Java/Swing world, I am sometimes puzzled by the UI programming on the iPhone. I've spent the last hours with Googling for information but it seems that I asked the wrong questions by thinking too much in Java. Could you please point me to resources to get more familiar with the GUI concepts to be able to achive the following functionality:

Basically, I want to create a vertically scrollable view that represents structured text (for example, a recipe). Each step consists of a title and a textual description. As I want to fold and unfold such steps, the title would be somehow interactive and by clicking it the description would be displayed or hidden.

In Java, I would create a component that renders one such section. The layout manager would compute the components preferred height (with or without description being displayed).

Then, in Java, I would create a panel with a vertical layout manager and sequentially add my components. This panel would be placed in a scroll pane; the scroll pane would ask the panel to layout itself and then show a viewport on it, if for example the height is bigger than the scroll pane's height.

What Java provides me is:

  • layouting of elements (computing their preferred height and width), thus no need to deal with coordinates and dimensions
  • dynamic creation of UIs by creating and adding components during runtime

What I understood on the iPhone:

What I don't understand on the iPhone:

  • does one view always correspond to a visible screen (I did use tab and navbar navigation so far and there whenever I set a new view, it fills the current visible screen minus the space needed for the two bars)?
  • or is it possible to define a view that contains a label on top ("north") and a text in center; if so, could such a view automatically determine its height?
  • can I realize my example in a similar way like in Java or would I need to calculate all dimensions and coordinates of the individual components on my own? (This example seems to touch on that topic: http://stackoverflow.com/questions/3406721/iphone-scrollview-add-elements-dynamically-with-id)

Alternatively, could I use a WebView and render my stuff as local HTML using JavaScript to show or hide nodes?

Thanks for any hint or link!

A: 

There are no layout managers in Cocoa, views are being reposition according to their struts and springs settings. For information on that read the documentation: http://developer.apple.com/library/ios/#documentation/DeveloperTools/Conceptual/IB_UserGuide/Layout/Layout.html

To create a "view that contains a label on top and a text in center" you create a view with subviews - one being a label at the top, second the textview in center. If you configure struts/springs for all of subviews properly, they will autoresize when the container view is resized.

You should also get accustomed to Interface Builder, creating views in code is real pain in the ass.

Michal
Interface Builder is nice, but there are benefits to creating the UI for your application programatically.
Reed Olsen
I'm curious to hear what kind of benefits there are ? For anything more complex then creating a tableView, I can't imagine how someone can enjoy positioning elements, setting their properties, all that in the code. Sure, sometimes you need to create views dynamically from the code, but even then, I load them from nib and add to view hierarchy as needed.
Michal
I will try out doing it this way, too. However as soon as your contents are dynamic (e.g. think about loading scientific papers with unknown number of sections not as entire page but as "navigatable" page), I guess you need to build the main UI dynamically. In addition, I wondered if a component embedded to a container can cause the container to autoresize, not the other way around. E.g. a growing text in a list of text components lets the outer view grow.
Sven
Adding subviews does not make the view to grow. You have to adapt the size programmatically. How I'm used to do it is that I design the partial element in IB (as extra xib), then programmatically load that nib, get the view out of it, figure out its height, resize the main view by that many points, and then add the loaded view as subview. It's much easier as creating and designing all subviews (like labels, image views...) in code. It's also pretty easy to configure resizing properties of all those subviews, so I can easily use the same xib in different sizes (iPhone, iPad).
Michal