Sunday, September 25, 2022
HomeiOS DevelopmentA Newbie's Information to Presentation Controllers in iOS 8

A Newbie’s Information to Presentation Controllers in iOS 8


Earlier than the introduction of iOS 8 and particularly, Adaptive UI, everytime you wished to show presentation sheets in a common app, you needed to make platform checks to confirm whether or not the gadget the app was operating on was an iPhone or an iPad to determine whether or not to current the sheet as a popover or to push a view onto the display.

iOS 8 introduces presentation controllers which make the above pointless. Now you may write a single code path in your presentation, that works on all gadgets, adapting itself to the gadget measurement and orientation. You do that by specifying a most popular presentation fashion when presenting a view controller, for instance a popover, after which in accordance with the scale class of your gadget, the OS will both current the view controller in that fashion or change to another fashion, for instance a popover being offered as full display on compact-width sizes.

On this article we’ll begin off by taking a look at UIAlertController which replaces UIAlertView and UIActionSheet to current data to the consumer. We’ll then have a look at UIPopoverPresentationController which allows us to create adaptive presentation controllers with out writing platform particular code. We’ll end off by taking a look at how one can create your personal customized presentation controllers. We have coated UIAlertController right here on Appcoda earlier than, so be at liberty to skip that half for those who want to.

To observe alongside, obtain the starter challenge. Should you run it, you’ll be offered with a desk view with an inventory of things that correspond with the assorted levels of this tutorial.

presentation controllers demo

UIAlertController

In iOS 8, UIAlertController changed UIAlertView and UIActionSheet as a means of presenting temporary data to the consumer. UIAlertController is an enchancment over the earlier two lessons in that: it’s adaptive (on an iPad, an motion sheet fashion alert will current itself in a popover), you may simply change between an motion sheet fashion and alert view fashion and you’ll simply reply to button faucets through the use of closures (beforehand you needed to implement delegate strategies). Alert views are offered modally within the middle of their presenting view controller whereas motion sheets are anchored to the underside of the display. Alerts assist each buttons and textual content fields, whereas motion sheets solely assist buttons.

In contrast to the earlier two lessons, UIAlertController is a subclass of UIViewController. Which means alerts now have the configurable performance supplied with view controller shows.

To see UIAlertController in motion, open AlertViewController.swift and modify the showAlertWasTapped() operate with the next.

The above instantiates an alert controller with a title, message, and specifies Alert because the fashion of how the controller will seem. After which creates two actions and provides them to the alert controller. Each actions have a handler which will get referred to as when the respective buttons are tapped.

Run the app and choose the primary row on the desk view (named Alert). Faucet the Present Alert button on the element view and it’s best to see an alert field. It appears to be like the identical on iPhone and iPad.

image01

Earlier than UIAlertController, altering from an alert to an motion sheet required quite a lot of code rewriting, however now you solely have to alter the enumerated kind from UIAlertControllerStyle.Alert to UIAlertControllerStyle.ActionSheet when initializing the alert controller. Make the beneath modifications.

Run the app. On an iPhone, the alert will now seem as an motion sheet on the backside of the display. Working on an iPad presents an issue although. The app crashes whenever you faucet the Present Alert button.

To repair this, add the next to showAlertWasTapped() proper earlier than the decision to presentViewController().

On an iPad, the alert controller presents itself inside a popover controller due to this fact it is advisable to instruct the alert controller on the place to level the popover arrow. You direct the popover the place to level by setting the sourceView to the view containing the popover and the sourceRect to the rectangle contained in the sourceView the place the popover ought to level. The above two statements direct the popover to level to the button tapped. Now the alert ought to work high-quality on the iPad.

image02

UIPopoverPresentationController

Alerts are nice for displaying temporary data to the consumer, however aren’t the very best when you have got quite a lot of knowledge to current. For this, a popover presentation controller shall be extra appropriate.

Should you have a look at the storyboard file you will note a view controller within the View Controller Scene that has its storyboard ID set to PopoverViewController. We’ll current this view controller as a modal view controller on compact-width screens and as a popover on regular-width screens.

To do that, open PopoverViewController.swift and modify actionWasTapped() operate as proven. This methodology known as when the bar button merchandise within the view controller is tapped.

The above code first hundreds the view controller from the storyboard, then units its modal presentation fashion to Popover – it will make the view controller seem as a popover on regular-width screens. Subsequent we get the view controller’s popoverPresentationController property and set its barButtonItem property. This specifies the bar button merchandise on which to anchor the popover. When offered, the popover’s arrow factors to the desired merchandise. Alternatively, chances are you’ll specify the anchor location for the popover utilizing the sourceView and sourceRect properties like we did within the earlier instance. It’s also possible to configure different properties similar to permittedArrowDirections, which configures the instructions the popover can level to. Throughout presentation, the popover presentation controller tries to respect your preferences however might use a unique arrow route if it can not in any other case lay out the popover. The default worth of this property is UIPopoverArrowDirection.Any. Right here we’ll depart it at its default, so there isn’t any must set the property.

Run the app within the iPad simulator; you’ll see the view controller displayed in a popover.

image03

Run it on the iPhone and the view controller shall be offered modally.

image04

You’ll discover that there isn’t any means of dismissing the view controller on compact-width gadgets. To allow this, we’ll show the view controller in a navigation controller on compact-width gadgets. To do that, we’ll set the view controller because the delegate of the UIPopoverPresentationController, and implement two delegate strategies – adaptivePresentationStyleForPresentationController() and presentationController(_:viewControllerForAdaptivePresentationStyle).

Change the category definition of PopoverViewController as proven.

Add the next to actionWasTapped() earlier than the decision to presentViewController().

Add the next features to the category.

adaptivePresentationStyleForPresentationController() known as when the app presents a view controller on a compact-width gadget. We implement this to let the OS know the presentation fashion to make use of. Right here we inform the OS to current the view controller as a full display view controller on compact-width gadgets.

presentationController(_:viewControllerForAdaptivePresentationStyle) known as when a view controller is offered in a unique presentation fashion than initially configured. We set our view controller to have a Popover presentation fashion, however we’ve got simply specified that on compact-width gadgets, it needs to be offered in full display fashion. On this operate, you may return a modified view controller to make use of when the fashion change happens. Right here we wrap the view controller in a navigation controller and add a Completed button to the navigation bar. The final methodology is the handler for the button faucets. It merely dismisses the view controller.

Run the app. On the iPhone, you will note the modified view controller that now has a navigation bar with a button to dismiss the view. On the iPad, the view controller shows with out the navigation controller because it doesn’t use the total display show.

image05

If you’d like the iPhone to show a Popover similar to the iPad, then it’s merely a matter of adjusting the return assertion in adaptivePresentationStyleForPresentationController() to the next.

Working on the iPhone ought to provide the following.

image06

Customized Shows

We’ve checked out methods to show data to the consumer utilizing the alerts and popover presentation controllers. These are nice, however you would possibly need to current your view controllers with a customized look and animation. We’ll look how to do that subsequent by making a customized presentation that’s much like the instance that Apple offered throughout final 12 months’s WWDC. You’ll be able to watch the video right here to study extra about presentation controllers.

Earlier than we get began, lets have a look at some ideas on presentation controllers which we’ll use.

We’ll subclass UIPresentationController (which was launched in iOS 8) to offer view and transition administration for gifted view controllers. Shows normally include three main elements: the offered view controller, presenting view controller and the chrome. Taking a look at a typical presentation beneath, you may see these views. For apps shipped by Apple, the chrome is normally a gray semi-transparent view, however you have got the liberty to fashion it nevertheless you need.

image07

UIPresentationController holds references to the offered and presenting view controllers and it will possibly handle varied features of how the view controller is offered onscreen just like the animations used, chrome customization, response to trait modifications, e.t.c.

Should you run the app and choose Customized Presentation from the desk, you’ll be offered with a view with a picture and a button on the backside proper nook of the display. We’re going to create a presentation that may present the consumer some data when that button is tapped.

image08

The button is already wired to an motion methodology within the class CustomPresentationViewController. The motion is called infoButtonWasTapped(). Additionally, for those who have a look at the code recordsdata within the Challenge Navigator, you’ll discover a file named ExampleViewController. The view controller shall be used to create the presentation view. It’s a typical view controller and so there shall be no must cowl creating it on this tutorial.

To get began, create a category named ExamplePresentationController. Make it a subclass of UIPresentationController. Change the category declaration as proven in order that it adopts the UIAdaptivePresentationControllerDelegate protocol.

UIAdaptivePresentationControllerDelegate protocol will permits us to specify the adaptive presentation fashion to make use of when presenting this controller.

Add the next to the category.

We create a darkish view – chromeView – and set its alpha to 0 so it received’t be initially seen. We then add a gesture recognizer to the chromeView that may dismiss the offered view controller when the chrome is tapped.

Subsequent add the next to the category.

The above creates the body rectangle that shall be assigned to the offered view. sizeForChildContentContainer() returns the scale of the desired little one view controller’s content material. Right here we set it to be a 3rd of the display.

Subsequent add the next to the category.

We override presentationTransitionWillBegin() above during which we set the chrome’s body and add it to the container view. We then examine the worth of the offered view controller’s transition coordinator. The transition coordinator is chargeable for animating the presentation and dismissal of the content material. If the coordinator isn’t nil, we use animateAlongsideTransition() to specify extra animations for use alongside the presentation animation. In our case, we animate the alpha to 1.0.

Subsequent add the next to the category.

Within the above code, we do the alternative of what we did in presentationTransitionWillBegin() i.e. we animate the alpha of the chrome again to 0.

Add the next to the file.

This units the frames of the chrome and offered views to the bounds of the container view. If this isn’t executed then they received’t resize if the gadget is rotated.

Subsequent add the next to the file.

This determines whether or not the presentation will cowl the total display.

Add the next to the category.

The above signifies that the offered view ought to cowl the total display. We will both return .OverFullScreen or .FullScreen. The distinction between the 2 is that with .OverFullScreen if the offered view controller’s view doesn’t cowl the underlying content material, then the views beneath the offered view controller shall be seen.

That’s it for the presentation controller. Now to create the controller which can carry out customized animated transitions between view controllers.

Create a category referred to as ExampleAnimatedTransitioning. Make it a subclass of NSObject. Change its declaration as proven.

UIViewControllerAnimatedTransitioning protocol performs the customized animations for transitioning between view controllers.

Add the next to the category.

isPresentation shall be used to find out if the presentation animation is presenting (versus dismissing). transitionDuration() returns the length in seconds of the transition animation.

Add the next to the category.

Within the above code, we get the from and to view controllers from the UIViewControllerContextTransitioning object. We then get the respective views of those view controllers. Subsequent we get the container view and if the presentation animation is presenting, we add the to view to the container view.

We then determine on which view controller to animate based mostly on whether or not the transition is a presentation or dismissal. We then decide the beginning and finish positions of the view. Then within the animation, we transfer the view to the ultimate place. This may animate the view from proper to left throughout a presentation and vice versa throughout dismissal. If the transition is a dismissal, we take away the view. Then we full the transition by calling transitionContext.completeTransition().

Now for the ultimate class.

Add one other class and title it ExampleTransitioningDelegate. Make it a subclass of NSObject. Change its declaration as proven.

Add the next features to the category.

The primary operate returns a presentation controller that manages the presentation of a view controller. We return an occasion of the ExamplePresentationController we created. The second operate returns an animator object that shall be used when a view controller is being offered, and the third operate returns the animation controller for use in dismissing the view controller.

The ultimate step earlier than we will run the app and see the presentation is wiring up the button in CustomPresentationViewController. Open the CustomPresentationViewController.swift file and add the next to the category.

Subsequent modify infoButtonWasTapped() as proven.

The above assigns ExampleTransitioningDelegate because the view controller’s transitioning delegate. Then we create an occasion of ExampleViewController which can present the content material to show. We then current this view controller.

You’ll be able to lastly run the app to check all of the code added. You must see the next when the data button on the backside of the display is pressed.

edit02
edit03

That brings us to the tip of this tutorial. To study extra about modifications made to presentation controllers in iOS8 make sure to watch this WWDC video.

For reference, you may obtain the entire Xcode challenge right here.



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments