1

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

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

我真正想要的是

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

这些按钮也是动态宽度。按钮的数量会改变，一些视图有 1 个，另一些有 2 或 3 个。根据操作，按钮的数量可以改变。我需要这个同时支持 iOS 和 android。

4

6 回答 6

2

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);
}
于 2013-09-12T19:34:02.220 回答
1

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

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;
        };
    }
}
于 2013-09-15T14:11:34.797 回答
0

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

<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>
于 2014-12-06T16:30:34.293 回答
0

如果可以放置工具栏，则可以使用“flexspace”按钮，这将创建一个必要的空间来填充其他按钮之间的间隙。这是钛文档中简单工具栏示例的语法：

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)
于 2013-09-12T20:52:55.530 回答
0

嗨兄弟

如果你想在 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%

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

斯巴达克斯谢谢：）

于 2014-11-06T07:49:37.980 回答
0

尝试这个

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);
于 2014-11-04T14:41:43.037 回答