Grid of views no longer works adding child views to layout: horizontal on scrollView

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

I have code that used to display a very nice grid of views, but no longer acts as expected after several SDK updates.

The idea is this: I have a master scrollView with layout:horizontal and add child views that are about a third the size of the screen width and about a third the height. What used to happen is the first view would be added in the top left corner, then views would be added to the right of that first view. When it reached the width of the screen, it would then wrap to the next line, giving me a nice grid.

Now, I just get the three views along the top and I don't know what happens to the rest of them, but they are no longer wrapping. Here is sample code: 

var win = Ti.UI.currentWindow;
 
var storiesContainer = Titanium.UI.createScrollView({
    width: '100%',
    height: '100%',
    contentWidth: '100%',
    contentHeight: 'auto',
    layout: 'horizontal',
    backgroundColor: '#EEE',
    showVerticalScrollIndicator: true
}); 
 
for (x=0;x<10;x++) {
 
    var itemContainer = Ti.UI.createView({
        width:240,
        height:'auto',
        top: 8,
        bottom: 3,
        left: 8,
        right: 8,
        borderWidth:1,
        borderColor: '#DDD',
        layout: 'vertical',
        backgroundColor: '#FFF'
    }); 
 
    var labelHeadline = Ti.UI.createLabel({
        text: x + ' title',
        color:'#333',
        width:200,
        height:'auto',
        top: 5,
        left: 18,
        right: 18,
        bottom: 7,
        textAlign: 'left',
        font:{fontSize:16, fontFamily:'Helvetica'}      
    });
 
    itemContainer.add(labelHeadline);
    storiesContainer.add(itemContainer);
 
}
 
win.add(storiesContainer);
Thanks a lot for any help you can provide. Matt.

2 Answers

Accepted Answer

You're not going to like what I have to say. This setup is not sustainable cross platform. Celebrate the new update by completely redesigning this. Remember, in the latest update, it's best to use Ti.UI.SIZE for both the contentWidth and contentHeight rather than the percentages. Check out the release notes.

For optimal performance, gather the screen sizes dynamically from the device, set your storiesContainer scrollView layout to absolute and scrollType to horizontal. Then do some math in your iteration to set the stories dynamically based on the size of the screen, using top and left for each itemContainer.

This is javascript, but the layout on Appcelerator in no way resembles an HTML div.

— answered 9 months ago by Francis Meetze
answer permalink
1 Comment

  • You're right, I don't like it one bit! Haha. How you described it is how I used to do it, but my new method seemed so much more streamlined and worked great for a while. Looks like it's time to revert.

    Thanks for the help.

    — commented 9 months ago by Matt Harvey

Rather than using absolute points and 'auto' property for your view and label, try to give in percentage (for absolute points) and Ti.UI.SIZE or FILL (for auto) accordingly. Like if you want to add 2 views in scrollview in one row ,give view width '50%' not points like 240 and label height and width Ti.UI.FILL .

And, if you want to add 1 view having 2 labels in one row, remove horizontal layout from scroll view.Give it to vertical and place horizontal layout in view. View width---Ti.UI.FILL or (100%) and label width 50% and height Ti.UI.FILL or (100%)

Your Answer

Think you can help? Login to answer this question!