Join Steven Lipton for an in-depth discussion in this video Using popovers, part of iOS Development Tips Weekly.
- [Instructor] When displaying modal views on an iPad, you're supposed to use a popover. However, popover's present a few challenges compared to other views. Let's look at how to set up a popover correctly. Download the exercise file and open it up. A popover is a view controller presented as a special type of modal. I've set this exercise up with a root controller with two buttons for apple pie and pecan pie and a small bar button item on the bottom for a toolbar. Now, I've got this apple pie image over here.
To set it up in the storyboard is real easy. You just do a control drag from the apple pie, just like you would any other controller. And for your action segue you're gonna check present as popover. And that's pretty much it. You'll see that the image changes to a popover. You can go ahead and run that. I'm gonna do it on a 9.7 inch iPad Pro. And when that appears I can click the apple pie. I get a popover. To dismiss a popover you just click outside the popover.
So that's all good and fine. I'll stop the app. Now let's go ahead and try this in a programmatic version. And you can follow most of what I'm gonna do for storyboards in the prepare for segue what I'm gonna just do here in the programmatic version. So go to the view controller code here, and I'm gonna get rid of that thing on the bottom. And I've set you up a whole bunch of actions already so you can go ahead and do this. And I'm gonna go to the pecan pie one here. Select pecan pie, and I'm gonna start by getting my view controller so that's let vc equal PieViewController.
And in the PieViewController I have an image view, and I'm just gonna set the image there. Vc imageView.image and I'm gonna use an image literal because you'll find in the assets I already have those all set up. So this is pecan, and there's my pecan pie. And then under that I'm gonna set the modal presentation style. So that's gonna be vc modalPresentationStyle, and you set that to a popover.
For most modal presentations you do something pretty similar to this, and then you'd also do this, present. And then you'd put your view controller, which in our case is vc, animated is true, completion is nil. That's all the same for most modal controllers. The difference in popovers is the next line. You have to anchor the popover to some other view. And in order to do that you do vc, and on vc there's a property called the popover presentation controller, and inside of that there is a series of properties as well, and we're gonna use the one called sourceView, you'll see that there's also one called sourceRect which you can do the same thing with a cg rect that I'm gonna do with a sourceView.
And that says that there is a rect somewhere, a view somewhere, that I'm going to anchor this to. So just like the apple popped up right next to the apple button, this will do it to the pecan button. And so I'm gonna use sender here. So I can do it to the sender, to the pecan button, and we're ready to run. So go ahead and run that.
I can click pecan pie and there's my pecan pie. Nice and easy. Go ahead and stop that. There's one more thing that can happen and that's gonna happen up here where I set up the pumpkin pie. This source view doesn't exist on a bar button item. You have to use different code for that. So I'm gonna copy this code here. Most of this is the same. I'm gonna change this to a pumpkin. So we've got pumpkin pie. And the change here is over here in sourceView.
So instead of sourceView I'm gonna use barButtonItem. And for barButtonItems that will get the anchor for the popover. Okay, and hit return. We'll send that to sender because sender is our bar button. Go ahead and run that. Click on the pumpkin pie in the corner and that works fine. Now I'm gonna show you one more thing that's a problem here. And I already have my simulators all set up, so I'm gonna go pick up this iPhone 8 Plus, and over here in products I'm gonna take the popover app and throw it in here so I can launch this.
And I want you to see something that's interesting. When I go ahead and hit pecan pie here, I get the pecan pie, and I get it as a full modal. When you have a class size that's compact on the width like you do have it on an iPhone, in that case this presents as a modal not as a popover like it does over here. So you have to control for that possibility. Go ahead and stop the app. I set some stuff up here to help you out. Head over to the PieViewController. Now I set up a button for you already.
And as this has to do with class sizes I've also set up a property to transfer the trade collection. And what we're gonna do is go down here to viewDidLoad, and you'll see that I've been hiding the button from you over here, and I'm gonna change this to false. So I'm gonna stop hiding the button. And underneath it I'm gonna make a condition that if we're in regular width, regular height for the size classes, which would be an iPad, I'm gonna hide the button.
And otherwise, it's gonna be available for use. So we're gonna do this just simply as if sourceTraitCollection.horizontalSizeClass equals regular and sourceTraitCollection.verticalSizeClass, and we need this for the iPhone 8 Plus and I'll show you why in a second. .regular. Then doneButton isHidden equals true.
Because I don't want that doneButton to show up on a popover, that's bad style. So I wanna hide it in the case where I've got this regular regular, and it'll show up on all the other cases. Now head over to the view controller. In the pumpkin pie action I'm gonna add one more thing just under the image here, vc SourceTraitCollection equals traitCollection. And this way I'll transfer the TraitCollection all my size class information to the destination, and then the destination which we just set up can use it.
And I'll take that same line and put it down here. Very good. Go ahead and run that. If you click pecan pie on the iPad, no big deal. If I pick up the simulator, drag it over here to run it on the iPhone 8 and run it. If I click pecan pie this time I get the image but I also get a doneButton so I can get rid of it.
And the same thing with the pumpkin pie. Now do one more thing that I want to point out here. I'll do a command left arrow to rotate the phone. This is a Plus phone. On Plus phones this is a regular width. So if I had only used width it would act the same way as the iPad. I did the height here as well because this excludes this situation. So I do get the doneButton. It has a different modal but it does have the doneButton.
With all this you can set up popovers to do your modal controllers on iPad and iPhone, and let the system decide how to present.