如何在滚动视图中添加表格视图？答案

【问题标题】：How i can add a table view in a scroll view?如何在滚动视图中添加表格视图？
【发布时间】：2014-06-08 04:02:08
【问题描述】：

我在滚动视图中添加了一个表格视图，它在 iOS 的情况下可以顺利运行，但在 Android 的情况下，表格视图不会滚动。

我已经描述了下面描述我的问题的代码.. 建议我任何可以帮助解决我的问题的答案。

var rows = [];

var win = Ti.UI.createWindow({
    backgroundColor:'white'
});

var scrollableView = Ti.UI.createScrollView({
    top : 0,
    contentWidth : '100%',
    contentHeight : 'auto'
});

var fruit = Ti.UI.createView({
    top : 40,
    width : '70%',
    height : 20,
    left : 10,
    backgroundColor:'#000'
});
var fruitLabel = Ti.UI.createLabel({
    text : "Fruit list",
    font:{
        fontSize : 15,
        fontWeight : 'bold'
    },
    color : 'red'
});
fruit.add(fruitLabel);
var fruitTableView = Titanium.UI.createTableView({
    top : 70,
    width : 200,
    height : 150,
    left : 80,
    right : 20,
    separatorColor : 'transparent'
});
rows = [];
for(var i=0; i<20; i++){
    rows.push(Titanium.UI.createTableViewRow({
        title:'fruit ' + String(i),
        color : '#000'
    }));
};
fruitTableView.setData(rows);

var veg = Ti.UI.createView({
    top : 250,
    width : '70%',
    height : 20,
    left : 10,
    backgroundColor:'#82C6E8'
});
var vegLabel = Ti.UI.createLabel({
    text : "Veg list",
    font:{
        fontSize : 15,
        fontWeight : 'bold'
    },
    color : 'red'
});
veg.add(vegLabel);
var vegTableView = Titanium.UI.createTableView({
    top : 280,
    width : 200,
    height : 150,
    left : 80,
    right : 20,
});
rows = [];
for(var i=0; i<20; i++){
    rows.push(Titanium.UI.createTableViewRow({
        title:'veg ' + String(i),
        color : '#000'
    }));
};
vegTableView.setData(rows);


var grains = Ti.UI.createView({
    top : 460,
    width : '70%',
    height : 20,
    left : 10,
    backgroundColor:'pink'
});
var grainLabel = Ti.UI.createLabel({
    text : "Grains list",
    font:{
        fontSize : 15,
        fontWeight : 'bold'
    },
    color : 'red'
});
grains.add(grainLabel);
var grainsTableView = Titanium.UI.createTableView({
    top : 490,
    width : 200,
    height : 120,
    left : 80,
    right : 20,
});
rows = [];
for(var i=0; i<50; i++){
    rows.push(Titanium.UI.createTableViewRow({
        title:'grain ' + String(i),
        color : '#000'
    }));
};
grainsTableView.setData(rows);

scrollableView.add(fruit);
scrollableView.add(fruitTableView);
scrollableView.add(veg);
scrollableView.add(vegTableView);
scrollableView.add(grains);
scrollableView.add(grainsTableView);

win.add(scrollableView);
win.open();

【问题讨论】：

使用 tableview insode scrollview 是个坏主意，但我没有你的确切要求，所以......是的，当你在 android 的 scrollview 中添加表格时它会产生问题，所以我建议设置 tableview 的确切高度..
@MitulBhalia 我也在某处研究过，这是一个坏主意，但如果您看到我的要求，我认为除此之外没有其他解决方案。 Mitul 它在 iOS 情况下运行良好，但在 Android 情况下会引发问题。看看我的问题，建议我如何解决 Android 的问题。
你应该显示表格的所有行......为此你需要将tableview的高度设置为它的内容高度。
@MitulBhalia 首先我必须在表格中创建动态行，所以我不知道程序中表格的高度。而且，如果我在第一个表中有 50 个项目，在第二个表中有 50 个项目，那么用户必须滚动很多才能看到第三个表的项目，我认为如果我愿意，这将是最糟糕的 UI。

标签： android titanium scrollview tableview

【解决方案1】：

谢谢大家的回复，我在@Surajkochale 的帮助下找到了实现它的正确方法。

如果我在代码中添加这些行并且效果很好，这就是我的问题的解决方案..

fruitTableView.addEventListener('touchstart', function(){
    scrollableView.canCancelEvents = false;
});
fruitTableView.addEventListener('touchend', function(){
    scrollableView.canCancelEvents = true;
});
fruitTableView.addEventListener('touchcancel', function(){
    scrollableView.canCancelEvents = true;
});


vegTableView.addEventListener('touchstart', function(){
    scrollableView.canCancelEvents = false;
});
vegTableView.addEventListener('touchend', function(){
    scrollableView.canCancelEvents = true;
});
vegTableView.addEventListener('touchcancel', function(){
    scrollableView.canCancelEvents = true;
});


grainsTableView.addEventListener('touchstart', function(){
    scrollableView.canCancelEvents = false;
});
grainsTableView.addEventListener('touchend', function(){
    scrollableView.canCancelEvents = true;
});
grainsTableView.addEventListener('touchcancel', function(){
    scrollableView.canCancelEvents = true;
});

【讨论】：

thanx...它对我的帮助

【解决方案2】：

试试这个

var tableView = Titanium.UI.createTableView({
    bubbleParent:false,
});

并不顺利，但它工作。

【讨论】：

是的@Suraj 它可以工作，但你知道如果我在我的项目中实施它，客户会立即飞到我身边问我实施了什么以及为什么;) :) Suraj 它有效但非常恼火你能建议我任何其他解决方案吗..
@NeerajGoel 您可以直接将表格视图添加到窗口而无需滚动视图。
请仔细阅读我的示例，如果我将直接在窗口中添加tableview，那么我的只有一部分是可见的，并且会滚动其他部分将被隐藏。请再次阅读我的示例，希望您能以正确的方式回复我。
试试这个docs.appcelerator.com/titanium/2.1/#!/api/…
感谢 Suraj 的回答，如果我以正确的方式使用此属性，它会运行良好...再次感谢您的回复。

【解决方案3】：

你可以检查contentHeight : Ti.UI.SIZE，它对我有用

【讨论】：

嗨@Swanand 我的问题是当我在scollview 中添加表格视图时表格视图不滚动。滚动视图工作顺利。所以请建议我在添加滚动视图窗口时如何滚动表格视图的任何答案。

【解决方案4】：

你需要在视图中添加tableview...

fruit.add(fruitTableView);
scrollableView.add(fruit);

veg.add(vegTableView);
scrollableView.add(veg);

grains.add(grainsTableView);
scrollableView.add(grains);

【讨论】：

嗨@Mitul 请再次检查您的回复。这不是任何解决方案。
哦..对不起......我虽然你想在一个滚动视图中添加表格视图，但它只是一个滚动视图。
没关系@MitulBhalia。如果您有任何其他解决方案，请告诉我