Pattern to create specific Views

Question

I have an array with categories for example

var categories = ["Horror","Action","Comedy","Sports","Romance","Science"];

I want to create a pattern that will count the lenght of categories array and create custom views like this below, no matter the size of the array.

--------------------
|                  |
|      Horror      |
|                  |
--------------------
| Action || Comedy |
|________||________|

This is my code what i did until now:

    if (categories) {

    for (var i = 0,j = categories.length; i < j; i++) {

    var cateroryName = categories[i];

        if (i % 3 == 0 ) {
            //Job to create the View1
                var vParent = Ti.UI.createView({ //Parent container for all views
                top : 0,
                width : "95%", //Ti.UI.SIZE,
                height : height
            });

            var v = Ti.UI.createView({
                layout : 'vertical',
                zIndex : 5,
                height : "auto",
                top:10,
                backgroundColor:"blue"
            });
   var imgView = Ti.UI.createImageView({
                //id : i,
                height : 72, // IOS ->90,
                width : 72, // IOS ->75,
                touchEnabled : false,
                top : 0,
                zIndex : 5
            });
    }
    else if (i % 3 == 1  || i % 3 == 2 ) {
                //Jobs to create View2 and View3
            var v = Ti.UI.createView({
                top : 0,
                width : "95%", //Ti.UI.SIZE,
                height : height,
                backgroundColor:"green",
                layout : 'vertical'
            });
            var imgView = Ti.UI.createImageView({
                //id : i,
                height : 72, // IOS ->90,
                width : 72, // IOS ->75,
                top : 0
    } else {
                //Don't know something else
}
    }

Answer 1

Try this

var Win = Ti.UI.createWindow({
    backgroundColor : '#ffffff',
    layout : 'vertical',
    // top : 20
});

var categories = ["Horror","Action","Comedy","Sports","Romance","Science","Fiction","Si-Fi"];
var View1 = null;
var View2 = null;

if (categories) {
for (var i = 0,j = categories.length; i < j; i++) {
    var cateroryName = categories[i];
    var view = Ti.UI.createView({
        height : Ti.UI.FILL,
        width : '50%',
        borderColor : 'black'
    });
    var lbl = Ti.UI.createLabel({
        text : cateroryName
    });
    view.add(lbl);
    if (i % 3 == 0 ) {
        view.width = '100%';
        View1 = Ti.UI.createView({
            // borderColor : 'black',
            backgroundColor : '#ffffff',
            height : 50,
            width : '100%'
        });
        View1.add(view);
        Win.add(View1);

    }else if (i % 3 == 1) {
        View2 = Ti.UI.createView({
            // borderColor : 'black',
            backgroundColor : '#ffffff',
            height : 50,
            width : '100%',
            layout : 'horizontal'
        });
        View2.add(view);
        Win.add(View2);
    } else if(i % 3 == 2){
        View2.add(view);
    } else {
        //Don't know something else
    }

}
}
Win.open();

Please make changes according to you.

OUTPUT :