代码之家 › 专栏 › 技术社区 › David Silva Smith

如何在Appcelerator Titanium中将页脚菜单固定到底部?

appcelerator-mobile titanium-alloy titanium-mobile ios android

David Silva Smith · 技术社区 · 15 年前

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

6 回复 | 直到 11 年前

David Silva Smith 15 年前

我用过 Titanium.UI.View 并设置Bottom:0以使其停靠到底部。

anticafe 15 年前

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

ceejayoz 15 年前

使用 Titanium.UI.ToolBar 为此。

Madan Sapkota 11 年前

如果您正在使用appcelerator 合金框架

XML视图中的代码

合金 <window title=“我的好标题”> ……… ……… <view class=“footer menu”></view> &窗/窗; &;合金& GT; < /代码>

TSS中的代码

“.footer menu”:。{
背景色:“红色”,
宽度:“100%”,
身高:40,
底部:0
}
< /代码> 

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




不使用合金?它在JS中也很相似。


创建窗口
var win=ti.ui.createWindow({
如果有的话
(});
//创建视图
var footer_menu=ti.ui.createView({
背景色:“红色”,
宽度:“100%”,
身高:40,
底部:0
(});
//向窗口添加视图
win.add(页脚菜单);
< /代码> 

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


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


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

Wilson 15 年前

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上。

Pedro Laini 12 年前

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

如果要将按钮设置到屏幕底部,请创建一个视图,将其设置在底部,然后根据屏幕宽度将按钮按相对位置分布。

下面是一个例子:

    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;

这样做…您正在视图中定位按钮。

第一个按钮(按钮1)从“Left:0”开始,宽度为视图的30%。第二个按钮(按钮2)从第一个按钮加上空格后开始,依此类推…

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