javascript - 创建特定 View 的模式

Question

例如，我有一个包含类别的数组

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

我想创建一个模式来计算类别数组的长度并创建像下面这样的自定义 View ，无论数组的大小如何。

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

这是我到目前为止所做的代码:

    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

试试这个

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();

请根据您的情况进行修改。

输出: