Question

我想要在视图中水平居中的按钮。有三个，我似乎只能得到：

[button1-button2-button3------------------------------]

我真正想要的是

[--------button1--------button2--------button3--------]

这些按钮也是动态宽度。按钮的数量将更改，某些视图具有1，其他视图具有2或3.根据操作，按钮的数量可以更改。我需要iOS和Android的支持。

Answer 1

尝试使用百分比布局将屏幕拆分为n个不同的列。然后将按钮添加到各自不可见的容器中。

var n = // Your number of buttons horizontal
var container = Ti.UI.createView({width : "100%", layout: "horizontal" });
for(var i=0;i<n;i++) {
   var column = Ti.UI.createView({
        width : (100/n)+"%",
   });
   // Create your button here
   // .....
   // .....

   // Now add it to the column
   column.add(yourNthButton);
   // Now add the column to the container
   container.add(column);
}

Answer 2

如何将布局设置为“水平”的视图中包裹按钮？

var wrapperView = Ti.UI.createView({
    layout     : 'horizontal',
    ...
});

// In a view with horizontal layout,
// the positioning is relative to the preceding element
var buttonOne = Ti.UI.createButton({
   right       : 10, 
   ...
});
wrapperView.add(buttonOne);

未经测试，但试一试！

的更新
好吧，上面的代码本身不会做你想要的。我在这里写了一个更完整的例子。看起来有点笨拙，所以如果有人有更好的解决方案，请告诉我们！

// Create our window var win = Ti.UI.createWindow(); // Our wrapper view var wrapperView = Ti.UI.createView({ width : Ti.UI.FILL, height : 40, top : 0, layout : 'horizontal', }); // Add some test buttons to our wrapper for(var i=0; i<3; i++) { wrapperView.add(Ti.UI.createButton({ title : 'Test ' + i, height : 30, })); } // Add wrapperView to our window and open it win.add(wrapperView); win.open(); // Wait until "size" becomes available win.addEventListener('postlayout', distributeButtons); // Distribute buttons evenly function distributeButtons() { if(wrapperView.children) { // Get the width of the wrapper view var wrapperWidth = wrapperView.size.width; var buttonWidths = 0; var buttonSpacer; var childrenLength = wrapperView.children.length; // Get the button sizes for(var i=0; i<childrenLength; i++) { buttonWidths += wrapperView.children[i].size.width; }; // Calculate the spaces between the buttons buttonSpacer = (wrapperWidth - buttonWidths) / (childrenLength + 2); // Set the buttons left value for(var i=0; i<childrenLength; i++) { wrapperView.children[i].left = buttonSpacer; }; } }

Answer 3

如果您可以放置工具栏，则可以使用“flexspace”按钮，这将创建填充其他按钮之间间隙所需的空间。以下是titanium docs中简单工具栏示例的语法：

var send = Titanium.UI.createButton({
    title: 'Send',
    style: Titanium.UI.iPhone.SystemButtonStyle.DONE,
});

var camera = Titanium.UI.createButton({
    systemButton: Titanium.UI.iPhone.SystemButton.CAMERA,
});

var cancel = Titanium.UI.createButton({
    systemButton: Titanium.UI.iPhone.SystemButton.CANCEL
});

flexSpace = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});

var toolbar = Titanium.UI.iOS.createToolbar({
    items:[send, flexSpace, camera, flexSpace, cancel],
    bottom:0,
    borderTop:true,
    borderBottom:false
}); 
win.add(toolbar)

Answer 4

试试这个

var yourView = Ti.UI.createView({ layout:"horizontal"});


    var buttonsHolder = Ti.UI.createView({ width:"100%" }); 

    // this view will hold the buttons
    var button1 = Ti.UI.createButton({title:"button1 , left:0"}); // the left button
    var button2 = Ti.UI.createButton({title:"button2"}); // the middle button
    var button3 = Ti.UI.createButton({title:"button3",right:0}); // the right button

    buttonsHolder(button1);
    buttonsHolder(button2);
    buttonsHolder(button3);

    yourView.add(buttonsHolder);

Answer 5

Hieyy bro

如果你想在xml中使用钛合金来实现这一点。在这种情况下，您可以使用％。

Container ------------width 100%-----layout horizontal---------
   first child--------left 10%------- width 20%
    second child--------left 10%------- width 20%
   third child--------left 10%------- width 20%-----right 10%

如果您没有得到答案，请告诉我

斯巴达克斯谢谢：）

Answer 6

如果使用Alloy，我建议使用百分比来控制宽度和位置。这是一个将三个小图像置于较大图像下方的示例，也是居中的：

<TableViewRow selectionStyle="Ti.UI.iPhone.TableViewCellSelectionStyle.NONE" backgroundColor="white" layout="vertical">
    <ImageView id="detailsFeaturedImage" top="10"/>
    <View  height="60">
        <View layout="horizontal">
            <View left="25%" width="10%"><ImageView image="images/thumb-up-7@2x.png" onClick="thumb_up" /></View>
            <View left="10%" width="10%"><ImageView image="images/thumb-down-7@2x.png" onClick="thumb_down"/></View>
            <View left="10%" width="10%"><ImageView image="images/flag-7@2x.png" onClick="flag_for_review"/></View>
        </View>
    </View>
</TableViewRow>

水平视图中心按钮

6 个答案: