Titanium Android水平滚动表格视图

Question

Can we make a titanium android tableview scroll horizontally. I tried this

var scrollAlbums = Ti.UI.createScrollView({
bottom : 10,
backgroundColor:'green',
contentHeight : Ti.UI.SIZE, // add this
contentWidth : Ti.UI.SIZE, // change this
height : 95,
layout : 'horizontal',
showHorizontalScrollIndicator : false,
showVerticalScrollIndicator : true, // should be a visual indication if can scroll
scrollType : 'horizontal',
horizontalWrap : false,
width : Ti.UI.FILL // assuming you need it full width - if not specify a width
});

// Create a TableView.
var aTableView = Ti.UI.createTableView({width:1000,backgroundColor:'red',height:200});

Please suggest me what should be the possible solution for that.Thanks.

Answer 1

I think you cannot make a tableview scroll horizontally. But you can use a scrollView as tableView .

According to the documentation:

Views added to the scroll view will be scrolled based on the size of the scrollable region of content. If a scrollable region fits within the size of its scroll view, the view will not scroll.

On Android, you can scroll a scroll view only in one direction, either vertical or horizontal, and not both at the same time. You can use the scrollType property to set the scroll direction explicitly.

From Documentation:

If the scrollType property is not defined, the scroll view attempts to deduce the scroll direction based on some of the other properties that have been set. Specifically, if contentWidth and width are both set and are equal to each other, or if they are both set and showVerticalScrollIndicator is set to true, then the scroll direction is set to "vertical". If contentHeight and height are both set and are equal, or if they are both set and showHorizontalScrollIndicator is set to true, then the scroll direction is set to "horizontal". If scrollType is set, it overrides the deduced setting.

Please have a look at the following example

var win = Ti.UI.createWindow({
  backgroundColor: 'white',
  exitOnClose: true,
  fullscreen: false,
  title: 'Horizontal ScrollView Demo'
});

var scrollView = Ti.UI.createScrollView({
  contentWidth  : 'auto',
  contentHeight : 'auto',
  scrollType    : 'horizontal',
  showHorizontalScrollIndicator: true
});

var containerView = Ti.UI.createView({
    width       : 2000,
    layout      : 'horizontal',
    height      : 300,
    backgroundColor : '#000'
});

var columns = [];
for(var index=0;index<15;index++){
    columns[index] = Ti.UI.createView({
        width   : 200,
        height  : 200,
        backgroundColor : '#123456',
        left    : 20 
    });
    containerView.add(columns[index]);
}
scrollView.add(containerView);
win.add(scrollView);
win.open();

I have tried this and it's working. Hope it helped you.