Question

Can someone help me with this scenario?

*There is a button, which when tapped, slides opens up a UIView, with the tapped button still to its left.

*This button when tapped again, makes the UIView slide back.

Answer 1

What you describe is easy. Let’s call the view that slides in from the right a drawer (“drawerView”). Set up the drawer view as a child view of your view controller’s main view.

Make that “drawer” view a container view. Put everything you want inside it. (Your text view, buttons, etc.) Also put your button inside this view. Connect that button to an action “slideDrawer” in your view controller.

Then make sure “clips subviews” is false, and move the button off the left edge of the drawer view with the left arrow key. In IB it will disappear, but don’t worry. IB doesn’t honor the “clips subviews” flag like your running program will.

Create an outlet to your drawerView and link it up to your code.

Once you have your drawer view looking exactly how you want it, note it’s x coordinate in the “size inspector”. Let’s call that value kVisibleX. Then drag that view to the right until it’s just off-screen. The button won’t be visible in IB, but will be visible just at the edge of the window at run-time. (like you show in your first image)

Note the x coordinate of the drawer view when it’s offscreen. Let’s call that value kOffscreenX.

Add a boolean instance variable “drawerIsShowing” to your view controller.

Now write an IBAction method slideDrawer:

- (IBAction) slideDrawer: (id) sender;

In that method, check drawerIsShowing to see if the drawer is currently visible. If it is, slide it off-screen. If it’s not, slide it on-screen.

- (IBAction) slideDrawer: (id) sender;
{
  CGFloat newX;
  if (drawerIsShowing)
    newX = kOffscreenX;
  else
    newX = kVisibleX;
  [UIView animateWithDuration: .25
  animations: 
  ^{
    CGRect drawerFrame = drawerView.frame;
    drawerFrame.origin.x = newX;
    drawerView.frame = drawerFrame;
  }
drawerIsShowing = !drawerIsShowing;
}