How to center the buttons in a view

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

Hi,

How can I center the content (so the buttons) in the views (view1, view2 and view3)? I tried to use auto width/height on different places but no luck at all.

I want to make a flexible grid layout for all screens (ipad, iphone and all android) with icon buttons. I think I'm in the good direction but it won't work. 

var window = Ti.UI.createWindow({
    backgroundColor:'#f0f',
});
 
var btnWidth = 130;
var btnHeight = 130;
 
var screenWidth = btnWidth * (Math.floor(Ti.Platform.displayCaps.platformWidth / btnWidth));
var screenHeight = btnHeight * (Math.floor(Ti.Platform.displayCaps.platformHeight / btnHeight));
 
 
var view1 = Ti.UI.createView({ 
    backgroundColor:'#111',
    layout: 'horizontal',
    width: 'screenWidth',
    height: 'screenHeight'
});
 
var view2 = Ti.UI.createView({ 
    backgroundColor:'#751',
    layout: 'horizontal',
    width: 'screenWidth',
    height: 'screenHeight'
});
 
var view3 = Ti.UI.createView({ 
    backgroundColor:'#964',
    layout: 'horizontal',
    width: 'screenWidth',
    height: 'screenHeight' 
});
 
var view = Ti.UI.createScrollableView({
    views:[view1,view2,view3],
    showPagingControl:true,
    width: '100%',
    height: '100%'
});
 
 
function makeBtn(btnname){
    return Titanium.UI.createButton({
        width: btnWidth,
        height: btnHeight,
        title: btnname,
    });
}
 
view1.add(makeBtn(L('string1')));
view1.add(makeBtn(L('string2')));
view1.add(makeBtn(L('string3')));
view1.add(makeBtn(L('string4')));
view1.add(makeBtn(L('string5')));
view1.add(makeBtn(L('string6')));
view1.add(makeBtn(L('string7')));
view2.add(makeBtn(L('string8')));
view2.add(makeBtn(L('string9')));
view2.add(makeBtn(L('string10')));
view2.add(makeBtn(L('string11')));
view2.add(makeBtn(L('string12')));
view2.add(makeBtn(L('string13')));
view3.add(makeBtn(L('string14')));
view3.add(makeBtn(L('string15')));
view3.add(makeBtn(L('string16')));
view3.add(makeBtn(L('string17')));
view3.add(makeBtn(L('string18')));
view3.add(makeBtn(L('string19')));
view3.add(makeBtn(L('string20')));
view3.add(makeBtn(L('string21')));
 
window.add(view);
window.open();

I also tried to make a new view to use as a wrapper.

var centerview = Ti.UI.createWindow({ width: 'auto', height: 'auto' });
 
 
centerview.add(view1);
window.add(centerview);
windows.open();
Is there anyone who knows a solution?

— asked 9 months ago by Jesse R
0 Comments

4 Answers

If you want them to center, just dont set a left and right, and they will center themselves. You'll have to adjust the top or bottom for vertical placement, but thats all.

— answered 9 months ago by Josh Lewis
answer permalink
1 Comment

  • As far as I know I didn't have set left or right.

    I have only used width and height. Is that also a problem?

    — commented 9 months ago by Jesse R

center : {
    x : "50%",
    y : "50%"
}
look at the documentation on Center

— answered 9 months ago by Aaron Saunders
answer permalink
2 Comments

  • I tried to use that like this but it didn't work: 

    var view1 = Ti.UI.createView({ 
    backgroundColor:'#111',
    layout: 'horizontal',
    width: 'screenWidth',
    height: 'screenHeight',
    center: { x: "50%", y: "50%" } 
});

    — commented 9 months ago by Jesse R

  • I dont think you can use the "layout" property and the "center" property together... at least I have never used them that way

    — commented 9 months ago by Aaron Saunders

I got a solution:

I use this to calculate the max width of a container view:

var screenWidth = btnWidth * (Math.floor(Ti.Platform.displayCaps.platformWidth / btnWidth));
Than I use this to make the container: 
var view1 = Ti.UI.createScrollView({ 
    backgroundColor:'#eee',
    width: 'auto',
    height: 'auto'
});
 
var view1cont = Ti.UI.createView({
    backgroundColor: '#eee',
    layout: 'horizontal',
    width: screenWidth,
    height: 'auto',
    top: (btnWidth / 6)
});
 
view1.add(view1cont);
 
Titanium.Gesture.addEventListener('orientationchange', function(e){
    view1cont.setWidth(btnWidth * (Math.floor(Ti.Platform.displayCaps.platformWidth / btnWidth)));
});
The createScrollView (view1) will make it allow to scroll up/down. Because of the auto width and hight it will center the content within it. The createView will be centered in the scrollView with a max width of maximum number of buttons in a row.

So if the screen width is 440 and buttons 130, view1cont will have a width of 390. Because of layout 'horizontal' the buttons will appear next of each other and will create a new row when needed.

view1cont.setWidth(btnWidth * (Math.floor(Ti.Platform.displayCaps.platformWidth / btnWidth))); re-sizes the screenWidth when the screen orientation is changed so more/less buttons will appear next to each other.

I still got a question. I've asked here: http://developer.appcelerator.com/question/142250/how-to-get-a-button-move-to-a-view-in-scrollableview I want the buttons link to other views in the scrollableView.

Feel free to use, edit and share. It's far from perfect so contribute if you got something better.

Here is the full code.

app.js:

var window = Ti.UI.createWindow({
    backgroundColor: '#eee'
});
 
var btnWidth = 130;
var btnHeight = btnWidth;
var screenWidth = btnWidth * (Math.floor(Ti.Platform.displayCaps.platformWidth / btnWidth));
 
 
/*view1*/
var view1 = Ti.UI.createScrollView({ 
    backgroundColor:'#eee',
    width: 'auto',
    height: 'auto'
});
 
var view1cont = Ti.UI.createView({
    backgroundColor: '#eee',
    layout: 'horizontal',
    width: screenWidth,
    height: 'auto',
    top: (btnWidth / 6)
});
 
view1.add(view1cont);
 
Titanium.Gesture.addEventListener('orientationchange', function(e){
    view1cont.setWidth(btnWidth * (Math.floor(Ti.Platform.displayCaps.platformWidth / btnWidth)));
});
/*end view1*/
 
 
/*view2*/
var view2 = Ti.UI.createScrollView({ 
    backgroundColor:'#751',
    layout: 'horizontal',
    width: screenWidth
});
/*end view2*/
 
 
/*view2*/
var view3 = Ti.UI.createScrollView({ 
    backgroundColor:'#964',
    layout: 'horizontal',
    width: screenWidth
});
/*end view3*/
 
 
/*scrollableView*/
var view = Ti.UI.createScrollableView({
    views:[view1,view2,view3],
    showPagingControl:true,
    width: '100%',
    height: '100%'
});
/*end scrollableView*/
 
 
/*buttons*/
function makeBtn(btnname){
    return Titanium.UI.createButton({
        width: btnWidth,
        height: btnHeight,
        title: btnname
    });
}
 
view1cont.add(makeBtn(L('string1')));
view1cont.add(makeBtn(L('string2')));
view1cont.add(makeBtn(L('string3')));
view1cont.add(makeBtn(L('string4')));
view1cont.add(makeBtn(L('string5')));
view1cont.add(makeBtn(L('string6')));
view1cont.add(makeBtn(L('string7')));
view1cont.add(makeBtn(L('string8')));
view1cont.add(makeBtn(L('string9')));
view1cont.add(makeBtn(L('string10')));
view1cont.add(makeBtn(L('string11')));
view1cont.add(makeBtn(L('string12')));
view1cont.add(makeBtn(L('string13')));
view1cont.add(makeBtn(L('string14')));
view1cont.add(makeBtn(L('string15')));
view1cont.add(makeBtn(L('string16')));
view1cont.add(makeBtn(L('string17')));
view1cont.add(makeBtn(L('string18')));
view1cont.add(makeBtn(L('string19')));
view1cont.add(makeBtn(L('string20')));
/*end buttons*/
 
window.add(view);
window.open();
strings.xml:
<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <string name="string1">Title</string>
    <string name="string2">Title 2</string>
    <string name="string3">Title 3</string>
    <string name="string4">Title 4</string>
    <string name="string5">Title 5</string>
    <string name="string6">Title 6</string>
    <string name="string7">Title 7</string>
    <string name="string8">Title 8</string>
    <string name="string9">Title 9</string>
    <string name="string10">Title 10</string>
    <string name="string11">Title 11</string>
    <string name="string12">Title 12</string>
    <string name="string13">Title 13</string>
    <string name="string14">Title 14</string>
    <string name="string15">Title 15</string>
    <string name="string16">Title 16</string>
    <string name="string17">Title 17</string>
    <string name="string18">Title 18</string>
    <string name="string19">Title 19</string>
    <string name="string20">Title 20</string>
</resources>

Your Answer

This question has been locked and cannot accept new answers.