Layout question Titanium Mobile

3
votes

I'm having a bit of trouble with the layout of the GUI in Titanium Mobile (iPhone). Is there a guide/article somewhere that explains how height/width/positioning/scrolling/etc. works in Titanium Mobile?

Right now I'm stuck on two problems:

  1. I want a scrollable window with an ImageView in the top part, and a TableView beneath it. They should both scroll together. I tried adding them both to a ScrollView and stretching the ScrollView to the size of the window, but then the ImageView is fixed to the top of the screen, and the TableView is scrollable in the bottom half of the screen, whereas everything should scroll together within the window.

  2. I want to create an editable grouped TableView similar to the "Contacts" app on iPhone. For the blue labels on the left I created a label and added them to the TableRow, then added a textfield for the rest of the row. This works, but is it possible to give the label an 'auto' width large enough to fit the text and a bit of padding left and right, and have the textfield on the right to fill the rest of the row (I tried setting the width of the label to 'auto', that doesn't do the trick).

I hope my questions are clear, otherwise leave a comment and I'll make some screenshots describing the problems visually.

Thanks for any help!

2
iphoneuser-interfacelayoutmobiletitanium

2 Answers

8
votes

0) Nope, there is no "layout" documentation in one nice place.

1) Make the entire display a table. Put the image view into the headerView of a table. That's how I did this:

screenshot

2) I don't know about textfields, sorry. But as a fallback, you can do labels like above, and then load a separate form in another screen. That may be your simplest/best option.

3
votes
var baseScrollView = Ti.UI.createScrollView({
  top:0,
  contentWidth:'auto',
  contentHeight:'auto',
  showVerticalScrollIndicator:true,
  showHorizontalScrollIndicator:false,
  backgroundColor:'white',
  scrollType : 'vertical'
});

var iv = Ti.UI.createImageView({
  borderRadius:10,
  top:10,
  width:300,
  height:300,
  image:currentWindow._rowObject["image"]
});
baseScrollView.add(iv);

var data = [];

tableView = Titanium.UI.createTableView({
  top:320,
  height:400,
  scrollable: false,
  data:data,
  touchEnabled : true,
  allowsSelection : false,
  font: {
    fontFamily:"Trebuchet MS",
    fontSize:12
  },
  style : Titanium.UI.iPhone.TableViewStyle.GROUPED
});
baseScrollView.add(tableView);