Buttons to appear on Grid

Hi all..

I want to have buttons arranged on a grid. At present I wanna have 4 buttons (2 rows and 2 columns) and in future if I want to add more buttons( 2 more), I should be able to do that easily. Please help me out how to have it as an array of buttons n Grid.

Please guide me on this. Should I go with scroll view or Please help me how to go further with array of buttons.

Thanks in advance.

var data =[];
        for(var i = 0; i < 3; i++) {
            var row = Ti.UI.createTableViewRow();
            row.add(createButtonRow());
            data.push(row);
        }
        var table = Ti.UI.createTableView({
            data:data
        });
        function createButtonRow(){
            var button1 = Ti.UI.createButton({
                title:"Button1"
            });
            var button2 = Ti.UI.createButton({
                title:"Button2"
            });
            var button3 = Ti.UI.createButton({
                title:"Button3"
            });
            var button4 = Ti.UI.createButton({
                title:"Button4"
            });
            var view = Ti.UI.createView({
                width:Ti.UI.SIZE,
                height:Ti.UI.SIZE,
                layout: 'horizontal'
            });
            view.add(button1);
            view.add(button2);
            view.add(button3);
            view.add(button4);
 
            return view;
        }

You can also simply use a view with the 'horizontal' layout with its default wrapping behavior (horizontalWrap == true).

var container = Ti.UI.createView({ layout: 'horizontal'});
    var button;
    for (var i=0;i<4;i++) {
        button = Ti.UI.createButton({ title: "Button "+i, width: '50%'});
        container.add(button);
    }

Note that the width of each button is 50%, so the third button wraps around to the next line. You can keep going with 6 (or 60) buttons in the same way. And you can stick this container view inside a scroll view if necessary.

If you want a more flexible layout, you can create a view for each row with layout='horizontal' and nest these inside another view (or ScrollView) with layout = 'vertical'. This gives you the flexibility to mix different rows (1 centered button, 3 buttons) without having to make the sizes add up to exactly 100% for each row.

If you don't need any of TableView's extras, I'd recommend using plain views and avoiding the overhead.