Friday, April 10, 2015

Adding a Modal Dialog to a UIViewController in Swift

How would you add a modal to your UI in Swift.

(by Tim Sanders for the Udacity iOS NanoDegree, Lesson 3. 
Finally a credential worth earning!)

This is a simple way to add a modal view to your IOS application. In this simple app I will add a simple dialog to the application.

  1. Create a Single View Application



2. Add application name and other information



3. Select Main-Storyboard, drag a button on to the view. This button will be used to trigger the action to open the modal view.  



4. Add a new Cocoa Touch Class file to the project. Call it ModalViewController and make it a subclass of UIViewController.

5. Open the storyboard and drag a new UIViewController into the canvas. Change its Class to ModalViewController.

  • Set the Background color of the main view to black, 50% opaque

6. Drag a new View into the View Controller

  • Using the Size Inspector, size it to 250 by 250 pixels and center the dialog in the view
  • Using the Attributes inspector change the Background color of this new dialog to white, 95% opaque.
  • In the Identity Inspector change the label of the View to “Modal View”.
(View constraints are left as an exercise)


7. Drag a Button into the Modal View and place it in the upper left corner {x:8 y:8 w:20 h:20 } and label it “X”. 

8. Drag a Button into the Modal View and place it in the lower right corner {x:180 y:200 w:40 h:30 } and label it “OK”. (Button constraints are left as an exercise)

9. Open the Assistant editor to the Modal View Controller and ctrl-drag from the X button to a point inside the class declaration and choose Action and method name “close”. Then ctrl-drag from the OK button to a point inside the class declaration and choose Action and method name “ok”. In both cases the Type is UIButton.



10. For the content of both methods add the following line to dismiss the dialog. 

11. To create a segue to the Modal Dialog of the main View Controller ctrl-drag from the body of the View Controller to the body Modal View Controller and choose a “present modally” segue.



12. Open the Attribute inspector, click on the square icon of the segue and give it the identifier NotifyModally.



13. Open the Assistant editor to the main View Controller and ctrl-drag from the “Button” to a point inside the class declaration and choose Action and method name “invokeModalDialog”, type UIButton.






To keep this short and sweet, much has been left out. Leaving out button and view constraints, button images and dialog content. I leave this to the reader. Below is a shot of the hierarchy.



Adding a modal is as simple as drag and drop. Even the segue method holds no executable code in this example. Actually we have only composed two lines of code to implement dismissal.



For excellent Swift IOS training I recommend Udacity Course "Intro TO iOS App Development with Swift", it is the perfect introduction to iOS application development.
From the course you will learn how to develop various iPhone apps. 
 Kunal Chawla is a superb instructor whose teaching style is quick, non-assuming and relevant from novice to advanced. 

5 comments:

  1. Good job Tim..! Nicely presented.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Excellent tutorial.

    Do you know if there is a way to specify the location of the dialog?

    ReplyDelete
  4. Very Nice Tutorial . Help full . thanku :)

    ReplyDelete