javascript原生移动云编程14 - 如何隐藏和定制屏幕上部的导航条

用javascript在码实的云平台上，可以在云里编写原生的移动应用。每个页面顶部平台会自动配备一个系统导航条，对学习编程确实很方便，但是实际应用中，码农需要定制自己导航条，有时甚至不需要导航条。本教程介绍了如何隐藏和显示系统导航条，如何移除导航条，如何退回到前一个页面。代码控制非常简单，用到平台SDK的几个调用：

setTitle - 设置页面标题
setLeftNavButton - 设置右上角的按钮
setRightNavButton - 设置右上角的按钮

hideNavigation - 临时隐藏导航条

showNavigation - 显示导航条

removeNavigation - 移除系统导航条，系统导航条不再显示

close - 关闭本页面，退回到前一个页面

注意，隐藏或移除导航条之后，别忘了自己做个关闭页面退回的按钮，否则苹果手机的用户就遭殃了，无法退出页面。下面的代码全面介绍了这些控制的使用。其中showBar和hideBar介绍了如何做出一个自己定制的导航条。

/**
*隐藏导航条，定制导航条
* 功能一：隐藏现有默认导航条，定制现有导航条的左侧按钮、标题、右侧按钮方式。
* 功能二：自定义导航条
**/

Class.create(Mash5.Widget, {
newNav : undefined,
initialize : function (config, params) {
var _self = this , page = this.getCurrentPage(), context = this.getContext();
var container = Ti.UI.createView({
width : Ti.UI.FILL,
height : Ti.UI.FILL,
backgroundColor : '#eee'
});
//设置当前页面标题
page.setTitle('标题A');
//设置当前页面有按钮样式
page.setRightNavButton({
style: Mash5.UI.NavigationButtonStyle.ADD,
listener: function() {
alert('默认右侧按钮事件。');
}
});
//隐藏默认导航条
var hideBtn = Mash5.UI.createButton({
width: '120dip',
height: '40dip',
top: '150dip',
borderRadius: dipToPx(21),
font: {fontSize: '14dip'},
color: '#fff',
title: '隐藏默认导航条',
bubbleParent: false,
style: Mash5.UI.ButtonStyle.GREEN,
});
container.add(hideBtn);
hideBtn.addEventListener('click',function(e){
if(hideBtn.title === '隐藏默认导航条'){
hideBtn.title = '显示默认导航条';
page.hideNavigation();//隐藏默认导航条
}else if(hideBtn.title === '显示默认导航条'){
hideBtn.title = '隐藏默认导航条';
page.showNavigation();//显示默认导航条
}
});
//移除默认导航条
var removeBtn = Mash5.UI.createButton({
width: '120dip',
height: '40dip',
top: '200dip',
borderRadius: dipToPx(21),
font: {fontSize: '14dip'},
color: '#fff',
title: '移除默认导航条',
bubbleParent: false,
style: Mash5.UI.ButtonStyle.GRAY,
});
container.add(removeBtn);
removeBtn.addEventListener('click',function(e){
alert('移除默认导航条后，无法再显示。');
page.removeNavigation();//移除默认导航条
hideBtn.touchEnabled = false;
hideBtn.hide();
});
//显示定制导航条
var showBtn = Mash5.UI.createButton({
width: '120dip',
height: '40dip',
top: '250dip',
borderRadius: dipToPx(21),
font: {fontSize: '14dip'},
color: '#fff',
title: '显示定制导航条',
bubbleParent: false,
style: Mash5.UI.ButtonStyle.BLUE,
});
container.add(showBtn);
showBtn.addEventListener('click',function(e){
if(showBtn.title === '隐藏定制导航条'){
showBtn.title = '显示定制导航条';
_self.hideBar();
}else if(showBtn.title === '显示定制导航条'){
showBtn.title = '隐藏定制导航条';
_self.showBar(container);
}
});

this.setContentView(container);
},
showBar : function(container){
var _self = this , page = this.getCurrentPage(), context = this.getContext();
if(!this.newNav){
var nav = Ti.UI.createView({
width : '100%',
height : Ti.UI.SIZE,
top : 0,
backgroundColor: 'gray'
});
container.add(nav);
this.newNav = nav;
nav.add(Ti.UI.createLabel({
color : '#404040',
text : '定制标题',
bottom : '12dip',
font : {
fontSize : '18dip',
fontFamily : 'Helvetica Neue'
},
}));
var nav_left = Ti.UI.createView({
width : '35dip',
height : '35dip',
bottom : '5dip',
left : 0,
clickOpacity : 0.6
});
nav_left.add(Ti.UI.createLabel({
color : '#fff',
text : '退回',
height : '35dip',
clickOpacity : 0.6,
top: 0,
font : {
fontSize : '25dip',
},
}));
nav_left.addEventListener('click', function() {
page.close();//关闭页面
});
nav.add(nav_left);
var nav_right = Ti.UI.createView({
width : '35dip',
height : '35dip',
bottom : '5dip',
right : 0
});
nav.add(nav_right);
nav_right.add(Ti.UI.createLabel({
color : '#fff',
text : '右键',
height : '35dip',
clickOpacity : 0.6,
top: 0,
font : {
fontSize : '25dip',
},
}));
nav_right.addEventListener('click', function() {
alert('右侧按钮');
});
}else{
this.newNav.height = Ti.UI.SIZE;
this.newNav.show();
}
},
hideBar : function(){
if(this.newNav){
this.newNav.height = 0;
this.newNav.hide();
}
}
})