如何在 Appcelerator Titanium 中将页脚菜单停靠到底部？答案

【问题标题】：How to dock a footer menu to bottom in Appcelerator Titanium?如何在 Appcelerator Titanium 中将页脚菜单停靠到底部？
【发布时间】：2011-04-28 03:09:14
【问题描述】：

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

【问题讨论】：

标签： android ios titanium-mobile titanium-alloy appcelerator-mobile

【解决方案1】：

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

【讨论】：

【解决方案2】：

是的，我们为此使用 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);

【讨论】：

我没有让工具栏在 Android 中工作。文档表明它是 iPhone 独有的功能。

【解决方案3】：

为此使用Titanium.UI.ToolBar。

【讨论】：

【解决方案4】：

如果您使用的是 Appcelerator Alloy Framework

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

希望这会有所帮助。谢谢！

【讨论】：

【解决方案5】：

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上运行，但我仍然不知道为什么按钮不能出现在iphone上

【讨论】：

【解决方案6】：

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

如果您想将按钮设置在屏幕底部，请创建一个 View，将其设置在底部，然后根据屏幕宽度分配相对位置的按钮。

这是一个例子：

    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;

这样做...您将按钮定位在视图中。

第一个按钮 ( button1 ) 从 "left: 0" 开始，宽度为视图的 30%。第二个按钮（ button2 ）在第一个按钮加一个空格之后开始，依此类推...

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

【讨论】：