[Resolved] Looking to make a drawer (interface)

tenth · August 14, 2012, 8:10pm

So I want to make a drawer that the user can slide out from one side of the screen by either dragging it or pressing a button. In that drawer I want a scrollable list of items, probably buttons, that the user can drag into the main part of the screen. The list of buttons doesn’t seem like such a problem, but I don’t see an easy way to make the drawer. I could probably work it out but it seems like a common interface feature, so I was wondering if there was a widget or some code for it somewhere already written that someone could point me towards. I’ve looked, but I haven’t found anything that’s really suitable.

Picture it like the Android pull down menu for notices, except it doesn’t cover the whole screen. Or maybe something like the TabBar, except it’s retractable. [import]uid: 106115 topic_id: 29853 reply_id: 329853[/import]

peach_pellen · August 14, 2012, 10:14pm

No widget I can think of would be particularly well suited to this - most likely you’d make the drawer manually and have it and the list of objects in it in the same group then allow it to be dragged on the x/y. [import]uid: 52491 topic_id: 29853 reply_id: 119715[/import]

roaminggamer · August 16, 2012, 6:53pm

tenth,

Please see this video: http://www.youtube.com/watch?v=Hj6UfzyxALM

Is this what you’re thinking about making? If so, it is pretty easy to do.

I made this sample as follows:

Create display group:

local theDrawer = display.newGroup()

Add background, buttons, etc. to the new group (warning this code is from SSK a free project I’m currently putting together for the Corona community; but I think you’ll get the idea.):

 local trayImage = display.newImageRect( theDrawer, imagesDir .. "felt.png", 110,   
 screenHeight)   
 trayImage.alpha = 0.3  
 trayImage.x = 55  
 trayImage.y = centerY  
  
 buttons:presetPush( theDrawer, "blueButton", screenLeft+100, centerY,   
 20, screenHeight, "", onDrawerButton )  
 tmpButton.alpha = 0.25  
  
 buttons:presetPush( theDrawer, "yellowButton", screenLeft+45, 50,   
 60, 60, "A", onDrawerButton, {textSize = 36 } )  
 buttons:presetPush( theDrawer, "orangeButton", screenLeft+45, 120,  
 60, 60, "B", onDrawerButton, {textSize = 36 } )  
 buttons:presetPush( theDrawer, "redButton", screenLeft+45, 190,   
 60, 60, "C", onDrawerButton, {textSize = 36 } )

Start the tray in the ‘slid off the screen position’

 theDrawer.x = -90  
 theDrawer.isOpen = false

Later, when a button is pressed, transition the tray on or off the screen:

onDrawerButton = function ( event )   
 if(event.phase ~= "ended") then return false end  
  
 if(theDrawer.isOpen) then  
 transition.to( theDrawer, {x = -90, time = 200} )  
 theDrawer.isOpen = false  
 else  
 transition.to( theDrawer, {x = 0, time = 200} )  
 theDrawer.isOpen = true  
 end  
  
 return true   
end

Please note: There are many ways to detect the need for a transition, but you did mention button presses so I used that as my sample.

I hope this helps. [import]uid: 110228 topic_id: 29853 reply_id: 119992[/import]

tenth · August 16, 2012, 11:52pm

That is precisely what I was looking for, thank you very much. I hotly anticipate the SSK as well, that looks like it will be very useful.

And thanks to peach pellen also - I recall you helped me with a previous question and I didn’t thank you properly. [import]uid: 106115 topic_id: 29853 reply_id: 120036[/import]

peach_pellen · August 20, 2012, 8:10pm

A little later than I’d like to reply but wanted to say thank you, most appreciated.

Happy to see this get solved; great stuff @emaurina!

Peach [import]uid: 52491 topic_id: 29853 reply_id: 120417[/import]

peach_pellen · August 14, 2012, 10:14pm