Comment arrimer un menu de bas de page en bas dans Appcelerator Titanium?

Question

Comment puis-je QUAI un menu de bas de page au bas de l'écran sur Android et iPhone en Appcelerator Titanium? Je veux afficher 3 icônes sur le bas de l'écran.

Answer 1

Titanium.UI.View brelan. 0 pour obtenir à quai au fond

Answer 2

Oui, nous utilisons Ti.UI.Toolbar pour cela. Laissez voir cet exemple de code:

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

Answer 3

Titanium.UI.ToolBar pour cela.

Answer 4

Si vous utilisez Appcelerator Cadre en alliage

Le code dans la vue XML

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

Le code TSS

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

Cela va pousser la vue vers le bas. Voici une capture d'écran.

Ne pas utiliser en alliage? Il est similaire à JS aussi.

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

Espérons que cela est utile. Merci!

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

il fonctionne sur Android, mais je ne sais pas pourquoi encore le bouton ne peut pas apparaître sur iphone

Answer 6

Rappelez-vous que les barres d'outils ne sont pas compatibles pour Android ou tablette.

Si vous voulez des boutons fixés au bas de l'écran, créez une vue, réglez au fond, puis répartir les boutons avec la position relative, compte tenu de la largeur de l'écran.

Voici un exemple:

    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;

Faire cela ... vous positionnez les boutons dans la vue.

Le premier bouton (button1) commence à « gauche: 0 » et a une largeur de 30% de la vue. Le second bouton (button2) commence après le premier bouton plus un espace, et ainsi de suite ...

Et la hauteur d'entre eux est le même que le point de vue de.