Titanium Android Horizontal & Vertical Scroll

Question

Titanium appcelerator while scrolling horizontally, ui is scrolling vertically. Is there anyway to lock vertical scrolling while horizontal scrolling ?

Answer 1

For horizontal scrolling:

<Alloy>
    <Window backgroundColor="white">
        <ScrollView backgroundColor="gray" layout="horizontal" width="Ti.UI.FILL" height="Ti.UI.SIZE" scrollType="horizontal">
            <View left="10" width="100" height="100" backgroundColor="red" />
            <View left="10" width="100" height="100" backgroundColor="red" />
            <View left="10" width="100" height="100" backgroundColor="red" />
            <View left="10" width="100" height="100" backgroundColor="red" />
            <View left="10" width="100" height="100" backgroundColor="red" />
            <View left="10" width="100" height="100" backgroundColor="red" />
            <View left="10" width="100" height="100" backgroundColor="red" />
            <View left="10" width="100" height="100" backgroundColor="red" />
            <View left="10" width="100" height="100" backgroundColor="red" />
        </ScrollView>
    </Window>
</Alloy>

For vertical scrolling:

<Alloy>
    <Window backgroundColor="white">
        <ScrollView backgroundColor="gray" layout="vertical" width="Ti.UI.SIZE" height="Ti.UI.FILL" scrollType="vertical">
            <View top="10" width="100" height="100" backgroundColor="red" />
            <View top="10" width="100" height="100" backgroundColor="red" />
            <View top="10" width="100" height="100" backgroundColor="red" />
            <View top="10" width="100" height="100" backgroundColor="red" />
            <View top="10" width="100" height="100" backgroundColor="red" />
            <View top="10" width="100" height="100" backgroundColor="red" />
            <View top="10" width="100" height="100" backgroundColor="red" />
            <View top="10" width="100" height="100" backgroundColor="red" />
            <View top="10" width="100" height="100" backgroundColor="red" />
        </ScrollView>
    </Window>
</Alloy>

Titanium Classic Example

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

var scrollview = Ti.UI.createScrollView({
    backgroundColor : "gray",
    layout : "horizontal",
    width : Ti.UI.FILL,
    height : Ti.UI.SIZE,
    scrollType : "horizontal"
});

for (var i=0; i<=10; i++) {
    scrollview.add(createView());
}

win.add(scrollview);

win.open();

function createView() {
    return Ti.UI.createView({
        backgroundColor : 'red',
        width : 100,
        height : 100,
        left : 10
    });
}

Your keypoint to restrict the scroll direction on Android is scrollType property.