How do I make a now playing bar like in media player apps in iOS with XCode?

Question

I am making a media player app. I have UITableViewControllers that are embedded in Navigation Controller. I would like to somehow make a view that would overlay potentially multiple (2?) of these tableviewcontrollers (one that shows the user's playlists, and the next would show the tracks in the playlist), but only at the bottom, like a now playing bar in (e.g.) Spotify's iOS app (as in the left bottom side of this

or as in this

I have tried to drag a Container View into my Navigation controller (in which my TableViewCell is embedded), but it won't let me drop it there.

It looks like I can drag the Container View into my TableView, but then how would it remain there when i navigate between tableviews?

Trying to follow @Rintaro's suggestion, but I'm a little new to XCode. How did you do this? So I made a single view application, i added a container view to the first VC, it's imm drawing it somewhere else in the storyboard, but i can't figure out how to tell that view that it's a navigation controller. also, as soon as i add a second container to the first VC and tried to size it, the first container disappears! It is still listed in the hierarchy on the left, and still has an arrow pointing out of it, but the view controller that was added and was being pointed to is also invisible?!

UPDATE: This works very well, but it has a problem with orientation changes. how can i make this work in both orientations? (I hypothesize that it currently positions the "nowplaying view" off screen when the orientation changes).

Answer 1

Basically, view hierarchy like that is constructed like this:

Using two "Container View" in initial view controller, one for Navigation Controller, one for "Now Playing Bar" view controller.

ADDED:

"Main Container View Controller" would be your own UIViewController subclass. It will have responsibility to show/hide "Now Playing Bar".

---

Workaround for Interface Builder strange behaviors.

You can set Auto Layout constraints like following. Maybe you might want to select the view from the left menu.

Note that, you should uncheck Constrain to margins check box.

Container View for Navigation Controller:

Container View for Now Playing Bar Controller:

And then, Update Frames from the menu:

Answer 2

If you are manually placing any buttons with absolute coordinates, make sure that you update the coordinates of them when the rotation is changed.

Answer 3

Obviously you need to create a custom UIView class, where you will show this menu. And when you will create it, add it to your view just like here:

float y = ROOTVC.view.frame.size.height - 49;
[self setFrame:CGRectMake(0, y, 320, 49)];
[ROOTVC.view addSubview:self];
[ROOTVC.view bringSubviewToFront:self];

Answer 4

I would simply add a nowPlayingView to the appDelegate.window and adjust either:

• The window.rootController.view frame to avoid overlapping the nowPlayingView.

• If window.rootController.view is a UIScrollView, adjust its contentInset.bottom to avoid overlapping the nowPlayingView. You can also use transparency/translucency with this solution.

• Add a dummy toolbar to the controller that will get covered by the nowPlayingView.

If your window.rootController is a UINavigationController, then you have to probably do the above fore each controller you push. The nowPlayingView will stay unchanged on top.