How can I present a UINavigationController with navigation bar like a popover on iPhone using custom UIViewController transitions introduced in iOS 7?
I accomplished this with a standard UIViewController and transition animator:
http://www.bytolution.com/Screenshot%202013.11.02%2015.25.34.png
When trying the same with UINavigationController instead, this is the result:
http://bytolution.com/Screenshot%202013.11.02%2015.27.10.png
At WWDC session 218 (login required) an Apple engineer made a demo of the exact thing I am trying to achieve:
http://bytolution.com/Screen%20Shot%202013-11-03%20at%2013.50.17.png
Unfortunately I could not find the sample code anywhere.
If you want to take a look at my code visit Github.com/bytolution/Apsiape
Thanks in advance!
I would take a look at WYPopoperController which does what you want on iPhone: https://github.com/nicolaschengdev/WYPopoverController
iPhone does not support the UIPopoverController class and all Modal transitions are full screen. Yet obviously the screen shot you showed exists.
Any view controller can have its view extracted and shown within another view. That is what's been done there. A black view is placed over the background with 30% opacity and the "popover" view is added on top of that. For added effect, a tap gesture recognized can be added to the black masking view to dismiss the popover when the user taps off of it.
I finally figured out how to do it on my own. I refined my Google search and found the trick to be an embedded UINavigationController. This was also useful for custom view controller transitions as it works nicely. You might want to check out this stackoverflow.com question.
If you need the code, it's in my project on GitHub.
Related
I have a SpriteKit game where I want to blur only a part of the screen (the board where the game is played). But at the same time, I want to be able to interact with the other elements (like UIButtons) on the screen. So basically I'm looking for something like a form sheet, but one that blurs what is under it and allows interaction with the main view controller.
So here's my problem. I've tried to:
put the UIVisualEffectView on my main view controller,
present another view controller modally with one of the standard presentation styles and have the UIVisualEffectView in there, or
present another view controller modally OVER full screen / current context and have the UIVisualEffectView in there.
None of these options work for me.
Options 1 and 2 don't actually blur. They produce a solid black box instead. (Although for some reason it blurs when I get a notification or when I pull down Notification Center or pull up Control Center. So I'm facing the same problem as this user.)
Option 3 does blur, but does not allow for interaction with the main view controller.
Does anyone know what else I could try? Or am I not using something correctly?
Unfortunately UIVisualEffectView simply doesn't work well with SpriteKit, even when using SKView. I've tried everything from A to zPositions.
I decided to recreate my UIButtons in the new view controller and present it modally OFS. That way I have access to the beautiful UIVisualEffectView blurring (SKEffectNode blurring isn't pretty at all IMO) and to my buttons. I hope Apple will work on the synergy of their frameworks in future versions of iOS and Swift. Then again, I'm not exactly an expert when it comes to app development, so if there is anything else I could've done I'd love to hear it :-)
I would like to make similar effect that Facebook app has. So I would like to create navigation slide-out effect.
But when I place UIViewController with menu beneath parent UIViewController with content and then I move parent view aside my menu doesnt show up. Everything I can see is black screen. But menu frame is in the right position.
Any sugestion what should I do?
Content view will be separate UIViewControllers.
I was in the same situation than you and finally I used a custom class which is inspired on FaceBook and Wunderlist apps and is really simple to add into the project:
https://github.com/John-Lluch/SWRevealViewController
The child view controller is always above parent view controller's view.
I think the old and the new view controllers should be siblings and use a parent view controller to add them both.
In fact, the child controllers of native UINavigationController are siblings rather than child-parent relationship.
I would urge you not to do this on your own but to use one of the many libraries out there that have been heavily tested by many contributors. One of the good ones is MMDrawerController but there are many others. Take a look at cococontrols for many more examples.
I've previously implemented a similar mechanic to this using custom transitions, which were introduced in iOS7. For example: could present the menu modally, but using a custom transition have it appear from the left and only take up a proportion of the screen.
Using custom interactive transitions will also allow you to use a pan gesture recogniser to drag your main view controller back on top of your menu - like in the Facebook app.
Here's a good tutorial on Custom Transitions: http://www.thinkandbuild.it/ios7-custom-transitions/
It's nice that back to previous page is so easy by swipe gesture in iOS7, Apple has implemented for you already. We like this feature, but how to implement it on iOS6? Any resource can take reference? Such as open source or design solution.
Please share and thanks in advance.
I'd probably be inclined to use UIPageViewController (which is a nice control that offers swiping between view controllers). If you really want to reproduce the UINavigationController iOS 7 UI (swiping from edges rather than anywhere on the page, all of the navigation bar UX, etc.), it might take a little work. But if all you need is a nice simple swiping between view controllers, UIPageViewController might be a good place to start.
See the Page View Controllers section of the View Controller Catalog for iOS.
Currently, I'm using presentPopoverFromRect:inView:permittedArrowDirections:animated: to present my popover. But I'm looking for more fanciful animations (eg. the popover expanding from a particular point) to present the popover.
I've tried searching with keywords ios present popover animation but can't find any useful results. Not sure if I'm using the wrong keywords or it is impossible to present popovers with animations.
When using a UIPopover, there is currently no easy way to present it with a different animation than the one that iOS provides. It would definitely be possible to do a custom animation to present a view, but it would be a very significant amount of extra work as you would have to do everything yourself. Two things you could look at if you really, really need to:
UIView animation. Links: Ray Wenderlich tutorial, Apple documentation (search the page for "animation").
Core Animation custom transitions.
As of iOS 7.0 it is possible to present any view controller so that it does not completely obscure the previous view controller, making it possible to create "fake" popovers. Using the UIViewControllerTransitioningDelegate protocol you can then create any animation you would like.
Here is a good example of how to create a fake popover with a custom animation.
Okay, I am still learning how to program and things are moving along quite well, but I have a question for the group about something that has been plaguing me:
How do I create a pop view where the background can still be seen? I mean, say my iPad view has 5 buttons on it, and I want a small square to pop up over where that button was, asking the user a question - how would i do that? Can I make a modal view with an invisible background? (I don't want a UIAlert BTW - I know that would solve my problem, but I am trying to learn how to do this with my own view)
Can anyone point me in the right direction?
You say "pop view" which makes me think you're describing a popover. Have you read the iPad Programming Guide, specifically, the section "Creating and Presenting a Popover"? It really is required reading in this case.
Are you showing the popover from a bar button? If so, you'll want to use presentPopoverFromBarButtonItem:permittedArrowDirections:animated:. If not, you'll need to identify a CGRect that represents the button (you can use its bounds), and then use presentPopoverFromRect:inView:permittedArrowDirections:animated:.
You do not want to obscure the button with the popover. When you show the popover using the above methods, the framework will take care of positioning the popover on-screen. Use the UIPopoverArrowDirectionAny for directions whenever possible.
If you actually want to show a modal view, you can create whatever view you want and then display it in such a way that the background is not fully obscured. Just set the modalPresentationStyle of the view controller to something like UIModalPresentationPageSheet.
You should create a custom UIView with the dimensions and content that you want to display. Then, you can place the custom UIView on screen by calling something like:
//where 'self' is the view controller currently visible and 'customView' is
//the view which has the question for the user. Don't forget to set the
//frame property on customView so that it knows the correct place to display.
[self.view addSubview:customView];
Hope this helps. Andrew