custom navbar which can move down

You must Login before you can answer or comment on any questions.

Hi,

i want a custom navbar (with 3 buttons) which can move down to show more information : https://dl.dropbox.com/u/84505667/bar.png i hide the default navbar and used a view within i put right button, another button in the middle but how can i put the back button like the default back button ?

my second question i how to move down the bar to display album information like you see in this image : https://dl.dropbox.com/u/84505667/bar2.png

thanks for help.

2 Answers

All that looks like is a window that is pushed up above the screen. Create a window and position it so that only the bottom of the window is visible. The buttons you'll have to handle yourself. ie: back will make the window close, etc. To make the view move down, just animate the position of the window so that all the information is visible.

Whatever you do, don't try to use a navbar to make that happen, it looks like a custom window component, so you'll have to build it out piece by piece.

— answered 9 months ago by Anthony Decena
answer permalink
6 Comments

  • i dont understand you very well. you say that i will have two windows. one is visible and the other not ?

    thanks

    — commented 9 months ago by Djamel ZAHAL

  • Yes. Its just like placing one view over another and moving the front view up and down over the back view to display it.

    — commented 9 months ago by Anthony Decena

  • Aaron may be right, but its hard to tell from the screenshots. Regardless, this is how I would do it

    All you have to do is click on the 'Info' label at the top to show/hide the window.

    var win = Ti.UI.createWindow({
    backgroundColor:'#dfdfdf',
    title:'Main Win',
    navBarHidden:false
});
 
var lbl = Ti.UI.createLabel({
    text:'Background Window'
});
win.add(lbl);
 
// create the info window so that only the bottom is visible.
var infowin = Ti.UI.createWindow({
    backgroundColor:'#000',
    height:480,
    bottom:436
});
// Add a label/button/image/etc to the bottom of the visible view.
var infolbl = Ti.UI.createLabel({
    text:'Info',
    color:'#fff',
    bottom:0
});
// When the label is clicked, animate the view to display.
var isShowing = false;
infolbl.addEventListener('click', function() {
    if (isShowing) {
        infowin.animate({
            bottom:436
        });
        isShowing = false;
    } else {
        infowin.animate({
            bottom:80
        });
        isShowing = true;
    }
});
 
var infotxt = Ti.UI.createLabel({
    text:'This is more information about the background window. Click "Info" again to hide.',
    color:'#fff'
});
infowin.add(infotxt);
infowin.add(infolbl);
 
// wait until the main window is open before opening the info window. 
// this will allow you to populate the window with the required info.
win.addEventListener('open', function() { 
    infowin.open();
});
 
win.open();

    — commented 9 months ago by Anthony Decena

  • Show 3 more comments

no, there is one very long window.

when you initially display the window, you position the window such that the fake navigation bar is at the top of the viewable area.

as the user drags the navigation bar, you adjust the top value of the window to display more content

— answered 9 months ago by Aaron Saunders
answer permalink
7 Comments

  • do you advise me to use touchstart and touchend to move the view ?

    thanks

    — commented 9 months ago by Djamel ZAHAL

  • yeah i would give that a try... BUT FYI i have never done anything exactly like what you are trying

    — commented 9 months ago by Aaron Saunders

  • very long window ? in the example above. i see two windows created. but how implement the back button if it is not in the first window opened before ?

    thanks

    — commented 9 months ago by Djamel ZAHAL

  • Show 4 more comments

Your Answer

Think you can help? Login to answer this question!