ScrollableView in ListView

Ahad, 28 September 2014, 12:23 pm

Using ListView is all about mapping collection data structure to UI structure. What if we have a UI structure that have nested collection in a single ListItem, such as a ScrollableView? We have to make sure our data structure can map to the ScrollableView.views property.

The solution: we have to create each child view when setting items to ListView. Here’s how:

var win = Ti.UI.createWindow({
    exitOnClose: true,
    title: 'ScrollableView in ListView'
});

var newsTemplate = {
    childTemplates: [
        {
            type: 'Ti.UI.View',
            properties: {
                width: 300,
                backgroundColor: '#fff',
                borderColor: '#ccc',
                layout: 'vertical',
                top: 10
            },
            childTemplates: [
                {
                    type: 'Ti.UI.ScrollableView',
                    bindId: 'previews',
                    properties: {
                        width: 300,
                        height: 150
                    }
                },
                {
                    type: 'Ti.UI.Label',
                    bindId: 'title',
                    properties: {
                        color: '#333',
                        width: Ti.UI.FILL,
                        textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT,
                        left: 5,
                        right: 5,
                        wordWrap: false,
                        ellipsize: true,
                        font: {
                            fontSize: '14dp',
                            fontWeight: 'bold'
                        }
                    }
                },
                {
                    type: 'Ti.UI.Label',
                    bindId: 'published',
                    properties: {
                        color: '#aaa',
                        width: Ti.UI.FILL,
                        textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT,
                        left: 5,
                        right: 5,
                        wordWrap: false,
                        ellipsize: true,
                        font: {
                            fontSize: '12dp'
                        }
                    }
                }
            ]
        }
    ]
};

var sect = Ti.UI.createListSection();

var listView = Ti.UI.createListView({
    templates: {
        news: newsTemplate,
        foot: {
            properties: {
                height: 10
            }
        }
    },
    backgroundColor: '#eee',
    separatorColor: '#eee',
    sections: [sect]
});
win.add(listView);

var data = [
    {
        title: 'News A',
        timestamp: 1411789472624,
        previews: [
            'http://placehold.it/300x150/0099cc/ffffff',
            'http://placehold.it/300x150/9933cc/ffffff',
            'http://placehold.it/300x150/669900/ffffff',
            'http://placehold.it/300x150/ff8800/ffffff'
        ]
    },
    {
        title: 'News B',
        timestamp: 1411443872624,
        previews: [
            'http://placehold.it/300x150/cc0000/ffffff',
            'http://placehold.it/300x150/33b5e5/ffffff',
            'http://placehold.it/300x150/aa66cc/ffffff'
        ]
    },
    {
        title: 'News C',
        timestamp: 1411184672624,
        previews: [
            'http://placehold.it/300x150/99cc00/ffffff',
            'http://placehold.it/300x150/ffbb33/ffffff',
            'http://placehold.it/300x150/ff4444/ffffff',
            'http://placehold.it/300x150/0099cc/ffffff',
            'http://placehold.it/300x150/9933cc/ffffff',
        ]
    }
];

win.addEventListener('open', function() {
    var items = [];

    var getDate = function(timestamp) {
        var d = new Date(timestamp);
        var m = d.getMonth() + 1;
        if (m > 12) {
            m = 1;
        }
        return d.getDate() +'/'+ m +'/'+ d.getFullYear();
    };


    for (var i = 0; i < data.length; i++) {
        var d = data[i];

        var views = [];
        for (var j = 0; j < d.previews.length; j++) {
            views.push(Ti.UI.createImageView({
                image: d.previews[j],
                width: 300,
                height: 150
            }));
        }


        items.push({
            template: 'news',
            previews: {
                views: views
            },
            title: {
                text: d.title
            },
            published: {
                text: 'Published on '+ getDate(d.timestamp)
            }
        });
    }

    items.push({
        template: 'foot'
    });

    sect.setItems(items);
});

win.open();

Output: