如何将页脚菜单停靠在Appcelerator Titanium的底部?

在Appcelerator Titanium中,如何将页脚菜单停靠在Android和iPhone上的屏幕底部? 我想在屏幕的底部显示3个图标。

我使用了Titanium.UI.View,并设置底部:0使它停靠在底部。

是的,我们使用Ti.UI.Toolbar。 让我们看看这个例子代码:

var space = Titanium.UI.createButton({ systemButton: Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE }); var buttonNextEnd = Titanium.UI.createButton({ title: '>>' }); var buttonNext1Page = Titanium.UI.createButton({ title: '>' }); var buttonPrevEnd = Titanium.UI.createButton({ title: '<<' }); var buttonPrev1Page = Titanium.UI.createButton({ title: '<' }); var toolbarNav = Titanium.UI.createToolbar({ left : 0, bottom: 0, height : 40, width : 320, items: [buttonPrevEnd,space, buttonPrev1Page,space, buttonNext1Page, space,buttonNextEnd] }); win.add(toolbarNav); 

使用Titanium.UI.ToolBar 。

如果你正在使用Appcelerator 合金框架

XML视图中的代码

 <Alloy> <Window title="My Nice Title"> ... ... ... ... ... ... <View class="footer-menu"></View> </Window> </Alloy> 

TSS中的代码

 ".footer-menu": { backgroundColor: 'red', width: '100%', height: 40, bottom: 0 } 

这将把观点推到底。 这是一个截图。

在这里输入图像说明

不使用合金? JS也是类似的。

 // create window var win = Ti.UI.createWindow({ // if anything }); // create view var footer_menu = Ti.UI.createView({ backgroundColor: 'red', width: '100%', height: 40, bottom: 0 }); // add view to window win.add(footer_menu); 

希望这是有帮助的。 谢谢!

 var footer = Ti.UI.createView({ height:25 }); var footerButton = Ti.UI.createLabel({ title:'Add Row', color:'#191', left:125, width:'auto', height:'auto' }); footer.add(footerButton); 

它在Android上工作,但我仍然不知道为什么button不能出现在iPhone上

请记住,工具栏与Android或平板电脑不兼容。

如果要将button设置到屏幕底部,请创build一个视图,将其设置在底部,然后根据屏幕宽度分配相对位置的button。

这是一个例子:

  function FirstWindow() { var self = Ti.UI.createWindow({ background : "black", height : "auto", width : "auto", layout : "vertical" }); teste = Ti.UI.createView({ left : 0, bottom : 0, opacity : .7, backgroundColor : "#3d3d3d", height : 55 }); var button1 = Ti.UI.createButton({ title : "button 1", left : 0, width : Titanium.Platform.displayCaps.platformWidth * 0.3 }); var button2 = Ti.UI.createButton({ title : "button 2", left : Titanium.Platform.displayCaps.platformWidth * 0.33, width : Titanium.Platform.displayCaps.platformWidth * 0.3 }); var button3 = Ti.UI.createButton({ title : "button 3", left : Titanium.Platform.displayCaps.platformWidth * 0.66, width : Titanium.Platform.displayCaps.platformWidth * 0.3 }); view.add(button1); view.add(button2); view.add(button3); self.add(view); return self; } module.exports = FirstWindow; 

这样做…你在视图中定位button。

第一个button(button1)从“left:0”开始,宽度为View的30%。 第二个button(button2)从第一个button加上一个空格开始,依此类推…

它们的高度与视图的高度相同。