add views in a tile like manner

Question

add views in a tile like manner

You must Login before you can answer or comment on any questions.

I am wanting to create views in a loop and I want the views to be different sizes dependent on the content. I thought I had it cracked with this code:

var win = Ti.UI.createWindow({
         layout : 'vertical',
             backgroundColor:'#D9D9D9'
     });
 
    // create table view data object
    var data = [];
 
    for (var c = 0; c < obj.length; c++) {
 
 
        var date = obj[c].dateCreated;
        var message = obj[c].message;
 
 
        // Create a vertical layout view to hold all the info labels and images for each tweet
        var post_view = Ti.UI.createView({
            top: 10,
 
 
             backgroundColor:'white',
             width: 300
        });
 
 
        var user_label = Ti.UI.createLabel({
            text : date,
            left : 2,
 
             top : 2,
 
            height : 'auto',
            textAlign : 'left',
            color : '#444444',
            font : {
                fontFamily : 'Trebuchet MS',
                fontSize : 10
 
            }
        });
 
        post_view.add(user_label);
 
        var text = Ti.UI.createLabel({
            text : message,
            left : 54,
            top : 4,
            bottom : 2,
            height : 'auto',
            width : 230,
            textAlign : 'left',
            color : '#000',
            font : {
                fontSize : 14
            }
        });
        // Add the tweet to the view
        post_view.add(text);
 
        var post = Ti.UI.createView();
 
        win.add(post_view);
        data[c] = post;
    }
 
    var postView = Titanium.UI.createView();
    postView.add(data);
 
 
    win.add(postView);
    win.open();

But it doesnt seem to work , It just create one large view containing the last element from the loop. Also I have tried adding

height: 'auto'

This does not work.

Any Ideas?

Thanks.

2 Answers

Your Answer

Think you can help? Login to answer this question!

Accepted Answer

Accepted Answer

I see lots wrong with your code, by the way. You've got a bunch of empty views being created and added to the window. Also, you're trying to add an array of empty views to another view, which is not possible (you can only add UI objects to other UI objects).

The window with layout:'vertical' is correct, but it won't scroll if your views go beyond the height of the screen. Try something like this:

var win = Ti.UI.createWindow();
var scrollV = Ti.UI.createScrollView({top:0,bottom:0,left:0,right:0,contentHeight:'auto',layout:'vertical'});
win.add(scrollV);
for (var i=0;i<30;i++) {
  var something = Ti.UI.createLabel({height:Ti.UI.SIZE,left:10,right:10,top:5,bottom:20,text:'instance '+i}); // note that top & bottom are padding in between elements added to scrollV
  scrollV.add(something);
}
win.open();

Answer 2

'auto' is deprecated for height/width. Use Ti.UI.SIZE or Ti.UI.FILL instead.