Titanium - 设计标题栏，在视图中包含三个控件

Question

我想设计带有3个控件的应用标题栏。

1. 左侧菜单按钮
2. 屏幕标题
3. 右侧菜单按钮



我试图实现这一点，这是我的示例代码。

var win = Ti.UI.createWindow({
    navBarHidden : true,
    orientationModes : [Ti.UI.PORTRAIT]
});

var bb1 = Ti.UI.createView({
    top : 0,
    height : 40,
    left : 0,
    width : Titanium.Platform.displayCaps.platformWidth,
    backgroundColor : '#35a63c'
});

var TopbarChieldContainer = Ti.UI.createView({
    layout : 'horizontal',
    width : Titanium.Platform.displayCaps.platformWidth,
});

var TopbarLeftView = Ti.UI.createView({
    width : "7%",
    left : 5,
});

var TopbarRightView = Ti.UI.createView({
    width : "7%",
    right : 5
});

var leftImage_topbar = Ti.UI.createImageView({
    image : "../../images/SideMenuIcon.png",
});
TopbarLeftView.add(leftImage_topbar);

var screenTitle_topbar = Titanium.UI.createLabel({
    text : ScreenTitle,
    font : {
        fontSize : 14,
    },
    textAlign : Ti.UI.TEXT_ALIGNMENT_CENTER,
    color : '#FFF',
    width : "52%"
});

TopbarRightView.add(RightButton);

TopbarChieldContainer.add(TopbarLeftView);
TopbarChieldContainer.add(screenTitle_topbar);
TopbarChieldContainer.add(TopbarRightView);

bb1.add(TopbarChieldContainer);
win.add(bb1);
win.open();

问题在于代码/逻辑是，中间标签不是液体，我希望它根据屏幕分辨率灵活。 三个控件应该是：

1. 左对齐左边距
2. 屏幕标签宽度的80％，中间文字对齐
3. 右对齐菜单按钮，右边距。

Answer 1

使用相对定位，并删除布局：水平。静态调整左右按钮的大小（40像素，ish？）：left: 5, width: 40和right: 5, width: 40。然后相对于它们定位标题标签：left: 45, right: 45。默认情况下，它的宽度占据左右之间的空间。因此，如果设备处于横向状态，它将占用所有空间，减去90像素。当你自动重新定位时它会调整大小。

var win = Ti.UI.createWindow({
    navBarHidden : true,
    orientationModes : [Ti.UI.PORTRAIT]
});

var bb1 = Ti.UI.createView({
    top : 0,
    height : 40,
    left : 0,
    backgroundColor : '#35a63c'
});

var TopbarChieldContainer = Ti.UI.createView();

var TopbarLeftView = Ti.UI.createView({
    width : CHANGE_TO_WIDTH_OF_LEFT_IMAGE,
    left : 5,
});

var TopbarRightView = Ti.UI.createView({
    width : CHANGE_TO_WIDTH_OF_RIGHT_IMAGE,
    right : 5
});

var leftImage_topbar = Ti.UI.createImageView({
    image : "../../images/SideMenuIcon.png",
});
TopbarLeftView.add(leftImage_topbar);

var screenTitle_topbar = Titanium.UI.createLabel({
    text : ScreenTitle,
    font : {
        fontSize : 14,
    },
    textAlign : Ti.UI.TEXT_ALIGNMENT_CENTER,
    color : '#FFF',
    left: CHANGE_TO_WIDTH_OF_LEFT_IMAGE_PLUS_FIVE,
    right: CHANGE_TO_WIDTH_OF_RIGHT_IMAGE_PLUS_FIVE
});

TopbarRightView.add(RightButton);

TopbarChieldContainer.add(TopbarLeftView);
TopbarChieldContainer.add(screenTitle_topbar);
TopbarChieldContainer.add(TopbarRightView);

bb1.add(TopbarChieldContainer);
win.add(bb1);
win.open();