buttons in a scrollview

You must Login before you can answer or comment on any questions.

Hi, in my app i need to put buttons in a scrollview to vertical scroll them, how can i do it?thanks

3 Answers

Accepted Answer

Hi Raffaele

I think you meant to say you want to add several buttons to a scrollview so that they can be scrolled.

Try this 

var win = Titanium.UI.currentWindow;
 
var scrollView = Titanium.UI.createScrollView({
    contentHeight: 'auto',
    contentWidth: 'auto',
    height: Ti.UI.FILL,
    layout: 'vertical',
    showHorizontalScrollIndicator: true
    showVerticalScrollIndicator: true,
    width: Ti.UI.FILL,
});
win.add(scrollView);
 
var btn1 = Titanium.UI.createButton({
    bottom: 10, // used as margin - change to suit
    height: 40,
    left: 10, // used as margin - change to suit
    right: 10, // used as margin - change to suit
    top: 10, // used as margin - change to suit
    title: 'Button 1',
    width: TI.UI.FILL
});
scrollView.add(btn1);
 
var btn2 = Titanium.UI.createButton({
    bottom: 10,
    height: 40,
    left: 10,
    right: 10,
    top: 10,
    title: 'Button 2',
    width: TI.UI.FILL
});
scrollView.add(btn2);
 
var btn3 = Titanium.UI.createButton({
    bottom: 10,
    height: 40,
    left: 10,
    right: 10,
    top: 10,
    title: 'Button 3',
    width: TI.UI.FILL
});
scrollView.add(btn3);
 
// you can keep adding as many buttons as
// you like, each one will appear below the
// other - without having to worry about how
// the previous one was positioned

Try this 

var win = Titanium.UI.currentWindow;
 
var scrollView = Titanium.UI.createScrollView({
    contentWidth:'auto',
    contentHeight:'auto',
    top:0,
    showVerticalScrollIndicator:true,
    showHorizontalScrollIndicator:true
});
 
 
var view = Ti.UI.createView({
    backgroundColor:'#336699',
    borderRadius:10,
    width:300,
    height:2000,
    top:10
});
 
scrollView.add(view);
 
var button = Titanium.UI.createButton({
    title:'Scroll to Top',
    height:40,
    width:200,
    bottom:10
});
view.add(button);
button.addEventListener('click', function()
{
    scrollView.scrollTo(0,0);
});
 
var button2 = Titanium.UI.createButton({
    title:'Add to Scroll View',
    height:40,
    width:200,
    top:20
});
scrollView.add(button2);
button2.addEventListener('click', function()
{
    var view = Ti.UI.createView({
        backgroundColor:'red',
        borderRadius:10,
        width:300,
        height:300,
        top:2020
    });
    scrollView.add(view);
 
});
 
win.add(scrollView);

Just add the buttons in the scrollview and on the click events of the buttons use the scrollTo method of the scrollview

http://docs.appcelerator.com/titanium/2.1/index.html#!/api/Titanium.UI.ScrollView-method-scrollTo

Your Answer

Think you can help? Login to answer this question!