CODEWITHSUNDEEP
iosxcodemenu
Phil Scarf
Phil Scarf

Reputation: 171

iOS Retractable Menu

I am currently developing an app that contains a music player. As of now it has a play, pause, & a select song button that shows the current song playing. Right now, the player is always on the screen. I want to make it so theres a button in the middle of the page so that when users click that, the whole media player with the play, pause, and select song button/icon will appear. When they click on that middle button again it shall hide those icons.

If anybody could point me in the right direction whether it be tutorials already out, or other discussions (I could not find any ones really) that would be awesome!

NOTE: I'm not trying to make the popover menu that facebook uses. This menu/audio player will expand/retract horizontally over the current view

Thank you in advance!!!!

Upvotes: 0

Views: 717

Answers (2)

CocoaEv
CocoaEv

Reputation: 2984

I'm not exactly sure what visual effect your looking for, but I think you already said it - just hide them.

You can do that a couple of ways.

One simple way is just to put those elements inside of their own view. Use a storyboard or xib file. Put your buttons and controls you want to hide show in a view.

Then create a reference in your view controller to that view. call it controlsView.

 @property (strong,nonatomic) IBOutlet UIView *controlsView;

Make sure you connect that view.

Then when the button is pushed, just hide that entire view:

 self.controlsView.hidden = YES;

When pushed again, show it:

 self.controlsView.hidden = NO;

If you want a bit smoother look and feel, wrap it in an animation like this:

  //to hide
  [UIView animateWithDuration:2 animations:^{
       [self.controlsView setAlpha:0];
  } completion {
       self.controlsView.hidden = YES;
  }];

  //to show
  self.controlsView.alpha = 0;
  self.controlsView.hidden = NO;
  [UIView animateWithDuration:2 animations:^{
       [self.controlsView setAlpha:1.0];
  } completion {

  }];

hope that helps

Upvotes: 0

Bill Patterson
Bill Patterson

Reputation: 2558

Sounds like you need to look into the .hidden property of view objects (allows you to make views visible/not-visible), and possibly the ability to move views around on the screen with the .frame property (setting location, height/width).

Without some more detailed information about the effect you're trying to achieve, it's difficult to say more than that. If you use interface builder to set up the view/UI-objects you want to display, you can simply set the base view to hidden in interface builder and then when the user clicks your button set .hidden=NO for that view.

Note: to be able to show/hide everything as a unit like this, I'm assuming that you use a single UIView object in interface builder as the container (sized and placed where you want it) and then add your controller buttons as sub-objects inside that single view. This allows you to show/hide everything by just setting .hidden property for the containing view.

Upvotes: 1

Related Questions