创建特定视图的模式

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

我会这样创建它：

查看全部，垂直（容器）
- i%3==0 -> 视图（高度 100，宽度 Ti.UI.FILL）是 "Horror"
- i%3==1-> 虚拟视图（高度 100，宽度 Ti.UI.FILL，水平）包含：
  1. i%3==1（宽50%高100）
  2. i%3==2（宽50%高100）
- 跳过第一个

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

Answer 2

试试这个

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 3

这将解决您的问题，

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

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

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

创建特定视图的模式

Pattern to create specific Views

javascript

titanium

appcelerator

titanium-mobile