创建一个可滚动视图,其中包含Titanium中的动态按钮网格

时间:2013-01-19 06:55:28

标签: javascript titanium appcelerator

所以我想做的是: 我正在从sqlite数据库加载数据并将其与while... isValidRow一起使用来动态创建一组按钮,我设置了静态topleft(或右)。我发现如果我将所有按钮的父级设为createView()并将layout设置为horizontal,则会创建一个漂亮的网格。

var brandView = Ti.UI.createView({  
    width: 100,
    height: 100,
    left: 0,
    layout: 'horizontal',
    textAlign: 'center'
});


while(rows.isValidRow()) {
     var dynamicButton = Ti.UI.createButton({
        width: 10,
        height: 10,
        top: 10,
        left: 10,
        title: rows.fieldByName('name');
    });
    view.add(dynamicButton);

    rows.next();
}

我遇到的问题是,有时候屏幕上可以显示的按钮数量多于按钮,因此按钮会在可见屏幕下方向下延伸。所以我将视图转换为createScrollView,并且layout仍然设置为horizontal(或垂直),它现在将并排的按钮延伸到屏幕外侧(丢失网格位置)。 所以我的问题是如何使视图可滚动并让按钮以网格样式形式出现?

2 个答案:

答案 0 :(得分:2)

试试,这个。我认为这对你有帮助。

var brandView = Ti.UI.createScrollView({  
    height      : Ti.UI.FILL,
    width       : Ti.UI.FILL,
    contentHeight : "auto",
    backgroundColor : "transparent",
    layout      : "horizontal",
    horizontalBounce :false,
});


while(rows.isValidRow()) {
     var dynamicButton = Ti.UI.createButton({
        width: 10,
        height: 10,
        top: 10,
        left: 10,
        title: rows.fieldByName('name');
    });
    brandView.add(dynamicButton);

    rows.next();
}

答案 1 :(得分:0)

将您的品牌视图嵌套在scrollView中,否则它只会水平滚动,如果您希望按钮在屏幕中居中,请不要设置left属性,只需设置top属性。此外,textAlignTitanium.UI.View无效。

这是一个填充整个屏幕,向网格添加按钮,居中并嵌套在滚动视图中的示例。

var scroller =  Ti.UI.createScrollView({
    height: Ti.UI.FILL,
    width: Ti.UI.FILL,
});
var brandView = Ti.UI.createView({  
    width: Ti.UI.FILL,
    height: Ti.UI.FILL,
    top: 0,
    layout: 'horizontal',
    textAlign: 'center'
});


while(rows.isValidRow()) {
     var dynamicButton = Ti.UI.createButton({
        width: 10,
        height: 10,
        top: 10,
        left: 10,
        title: rows.fieldByName('name');
    });
    view.add(dynamicButton);

    rows.next();
}

scroller.add(brandView);