Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

vertical createScrollableView

Is this possible to do?
Now it only is horizontal can i make it scroll vertical?

Regards

— asked September 30th 2010 by Frederik Heyninck
  • createscrollableview
  • vertical
0 Comments

6 Answers

  • Any suggestions?

    — answered October 2nd 2010 by Frederik Heyninck
    permalink
    0 Comments
  • That isn't possible with the scrollable view, but you can use views and swipe gestures to approximate the effect.

    — answered October 2nd 2010 by Kevin Whinnery
    permalink
    0 Comments
  • this is how i did it

    <script src='http://pastie.org/1196140.js'></script>

    i just made the height of the scrollableview pretty long to force it to scroll

    but i am still new and there is probably as always a better way

    — answered October 3rd 2010 by Luke Haviland
    permalink
    0 Comments
  • This should work. The key is to add "layout:'vertical'". Cheers John.

    
    var win = Ti.UI.currentWindow;
    
    var scrollView = Titanium.UI.createScrollView
    ({
        contentWidth:'auto',
        contentHeight:'auto',
        showVerticalScrollIndicator:true,
        layout:'vertical'
    }); 
    
    
    var content = Ti.UI.createLabel
    ({
        text:'This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially. This text will scroll vertially.  ',
        font:{fontWeight:'bold', fontSize:14},
        color: '#8c0000',
        height: 'auto',
        left: 10,
        top:10
    });     
    
    scrollView.add(content);
    
    var content2 = Ti.UI.createLabel
    ({
        text:'Another label.',
        font:{fontSize:14},
        height: 'auto',
        left: 10,
        top:10
    });     
    
    scrollView.add(content2);
    
    
    
    Titanium.UI.currentWindow.add(scrollView);
    
    — answered October 3rd 2010 by John Howell
    permalink
    2 Comments
    • I use a createScrollableView not createScrollView
      but layout doesn't seem to work… on the createScrollableView

      — commented October 4th 2010 by Frederik Heyninck
    • Frederik - your suggestion seem to only work for me for scrolling a label. Oddly if I add buttons or images (in views in the scroll view) below it, the label will scroll and my other content will not scroll into view.

      The view in the scrollView is to allow structured layout design of content that scrolls.

      — commented July 20th 2012 by chief meow
  • var view1 = Ti.UI.createView({
    backgroundColor:'red',
    left:0,
    right:0,
    top:0,
    bottom:0
    // transform:Ti.UI.create2DMatrix().rotate(90)
    });
    var l1 = Ti.UI.createLabel({
    text:'View 1',
    color:'#fff',
    width:'auto',
    height:'auto'
    });
    view1.add(l1);

    var view2 = Ti.UI.createView({
        backgroundColor:'blue',
        left:0,
        right:0,
        top:0,
        bottom:0
        // transform:Ti.UI.create2DMatrix().rotate(90)
    });
    var l2 = Ti.UI.createLabel({
        text:'Click Me (View 2 - see log)',
        color:'#fff',
        width:'auto',
        height:'auto'
    });
    view2.add(l2);
    
    var view3 = Ti.UI.createView({
        backgroundColor:'green',
        left:0,
        right:0,
        top:0,
        bottom:0
    });
    var l3 = Ti.UI.createLabel({
        text:'View 3',
        color:'#fff',
        width:'auto',
        height:'auto'
    });
    view3.add(l3);
    
    var view4 = Ti.UI.createView({
        backgroundColor:'black',
        left:0,
        right:0,
        top:0,
        bottom:0
    });
    var l4 = Ti.UI.createLabel({
        text:'View 4',
        color:'#fff',
        width:'auto',
        height:'auto'
    });
    view4.add(l4);
    
     var button2 = Titanium.UI.createButton({
        title:'Rotate Scrollableview',
        width:300,
        height:30,
        background:'transparent',
        bottom:0,
        left:0
        //bottom:20
    });
    button2.addEventListener("click",function(e){
        var t1 = Ti.UI.create2DMatrix().rotate(90);
        var t2 = Ti.UI.create2DMatrix().rotate(270);
        scrollView.transform = t1;
        for(i=0; i < scrollView.views.length ; i++){
            scrollView.views[i].transform = t2; 
        }
    
    
    });
    win1.add(button2);
    var scrollView = Titanium.UI.createScrollableView({
        views:[view1,view2,view3,view4],
        showPagingControl:true,
        pagingControlHeight:30,
        maxZoomScale:2.0,
        top:0,
        height:200,
        width:300,
        currentPage:1    
    });
    
    win1.add(scrollView);
    
    — answered February 22nd 2012 by Nikunj Kapupara
    permalink
    0 Comments
  • scrollType: 'vertical',

    — answered November 16th 2012 by Robert Starkweather
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.