I want to design app title bar with 3 controls.
- Left Menu Button
- Screen Title
- Right Menu Button
I have tried to achieve this, here is my sample code.
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();
The problem is in the code/logic is, the middle label is not liquid, I want it to be flexible according to the screen resolution. Three controls should be:
- Left Aligned with some left margin
- 80% width of label of the screen with middle text align
- Right aligned menu button with some right margin.