Wie ein Fußzeile Menü nach unten in Appcelerator Titanium andocken?

Question

Wie andocken ich ein Fußzeile Menü auf den unteren Rand des Bildschirms auf Android und iPhone in Appcelerator Titanium? Ich möchte auf der Unterseite des Bildschirms 3 Symbole angezeigt werden.

Answer 1

Ich benutzen Titanium.UI.View und Set unten:. 0, um es an der Unterseite andocken

Answer 2

Ja, wir Ti.UI.Toolbar für diesen. siehe Lassen Sie diesen Beispielcode:

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

Verwenden Sie Titanium.UI.ToolBar dafür.

Answer 4

Wenn Sie mit Appcelerator Alloy Rahmen

Der Code in der XML-Ansicht

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

Der Code in TSS

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

Damit wird der Blick nach unten drücken. Hier ist ein Screenshot.

Nicht mit Alloy? Es ist ähnlich wie in JS zu.

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

Hope Dies ist hilfreich. Dank!

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

es funktioniert auf Android, aber ich immer noch nicht wissen, warum die Schaltfläche kann nicht auf dem iPhone erscheinen

Answer 6

Beachten Sie, dass Toolbars nicht kompatibel sind für Android oder Tablet.

Wenn Sie auf den unteren Rand des Bildschirms zu Settasten möchten, erstellen Sie eine Ansicht, legen Sie es an der Unterseite und dann verteilen Sie die Tasten mit einer relativen Position, unter Berücksichtigung der Bildschirmbreite.

Hier ist ein Beispiel:

    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;

Auf diese ... Sie positionieren die Tasten in der Ansicht.

Die erste Schaltfläche (button1) beginnt in „links: 0“ und hat eine Breite von 30% der Ansicht. Der zweite Knopf (button2) beginnt nach dem ersten Knopf und einen Raum, und so weiter ...

Und die Höhe von ihnen ist das gleiche wie die Ansicht des.