Question

我有一个包含例如

类别的数组

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

我想创建一个模式，它将计算类别数组的长度并创建如下所示的自定义视图，无论数组的大小如何。

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

请根据您的要求进行更改。

输出：

Answer 2

我会像这样创建它：

查看全部，垂直（容器）
- i％3 == 0 - ＆gt;视图（高度100，宽度Ti.UI.FILL）是“恐怖”
- 则i％3 == 1→虚拟视图（高度100，宽度Ti.UI.FILL，水平）包含：
  1. i％3 == 1（宽度50％高度100）
  2. i％3 == 2（宽度50％高度100）
- 跳过一个

等等。然后所有视图将在彼此之下（因为容器设置为垂直）并且您将具有相等的行（因为您每次都插入一个完整的行;％3具有一个内容而％2具有垂直的两个内容。

用于创建特定视图的模式

2 个答案: