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 пикселей, иш?): 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();