티타늄 -보기에서 3 개의 컨트롤이있는 제목 표시 줄

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();