Dynamic Drawer

A few days ago I posted a tutorial for making a very simple drawer effect.
http://taiic.com/tutorials/creating-a-drawer

Tony at tAIR.info posted a more complex version of a drawer effect.
http://www.tair.info/faq/how-to-s/drawer-slider-bottom

Today, we worked together to bring you this excellent dynamic slider. The greatest thing about it, is that it’s actually very simple to create.

This was created on an HTC EVO 4G so if you load up the app on anther device, the screen may not fit correctly. You’ll probably need to adjust the code to fit the needed screen size.

Here are the components you’ll need in the designer.

  • Uncheck Scrollable on Screen1 properties
  • Label – Empty Text in properties and set background color to none
  • Canvas – Set the background image to the tab portion of the drawer. Set Width to fill parent and leave height Automatic
  • Canvas – Set the background image to the drawer background. Set width to fill parent and Height to 50 pixels
    • ImageSprite – We used a button image
    • ImageSprite – We used a button image
    • You can choose any image you want and you can program them to do something. If you’re doing a photo app, you can have the drawer come up with images. Maybe use a random list selection to show different images every time. Most apps use drawers for additional options and settings, but there is really no limitation to what you can use it for
  • Clock – Uncheck TimerEnabled in properties and set TimerInterval to 1
  • Clock – Uncheck TimerEnabled in properties and set TimerInterval to 1

dynamicdrawer1

Once you have the UI setup, go to the Blocks Editor and setup the dragged event for the canvas with the image of the “tab” as well as the timers to handle the dragging for the open and close events.

dynamicdrawer2

Here’s how it works
By the way, in my tutorial I have the tab portion of the drawer in canvas 2 because I added it after adding canvas 1 and placed it above. So don’t pay to much attention to the number. The idea is that 1 canvas (the one that handles the dragged event) is on top with a tab image and the canvas with the drawer background is below.

Ok, when you start dragging the tab Canvas2.Dragged will check 4 if then-do tests. If you are dragging up it will get a true result for the first test which compares the startY1 position to the prevY1 position, to see if it’s greater. It should always be great while you are dragging UP. As long as this is true, it will keep enabling the clock1 timer. When this happens Clock1.Timer will fire and execute the if then-do test. This test checks to see if the height of canvas1 (the drawer) is less then 475 pixels, and as long as this is true it will keep decreasing the label height by 30 pixels while increasing the canvas1 height by 30 pixels, every millisecond. Once this is done, the timer will stop. The timer will also stop if the event for clock2 becomes true back in the canvas2.dragged event. The same thing will happen when we drag down, just in reverse. The canvas height will no decrease by 30 pixels and the label height will increase by 30 pixels every millisecond.

Because we are using a canvas for the drawer, you can add ImageSprites for buttons and they will appear together with the drawer. Just as we did in this tutorial.

Try this out and see if you can find some cool uses for it.

You may also like...

  • very helpfull if you want to add some settings in the bottom of the screen.
    can you upload the source code.the video is in very low resolution.

    thanks

  • gabe

    I can’t do it.Could you give me more info about the canvas background images etc.
    I did it what you did and It doesn’t work.

  • Hey guys. I have the source on my download (http://taiic.com/downloads/) page. Look for “DrawerSliderDragger_v2.zip”, towards the bottom.