An iOS 9 Multitasking Example
| Previous | Table of Contents | Next |
| A Guide to Multitasking in iOS 9 | Implementing a Page based iOS 9 Application with UIPageViewController |
Learn SwiftUI and take your iOS Development to the Next Level
|
With the basics of multitasking in iOS covered in the previous chapter, this chapter will involve the creation of a simple example application that makes use of multitasking within an app when running on an iPad device. In addition to the use of size classes, the example will also demonstrate how the UIStackView class can be of particular use when implementing multitasking user interface adaptability.
Creating the Multitasking Example Project
The first step in creating the application is to set up a new project. To do so, start the Xcode environment and select the option to create a new project (or select the File -> New -> Project menu option if Xcode is already running or the welcome screen does not appear by default).
Select the Single View Application template, choose the Universal option from the Devices menu, Swift as the language and name the product MultitaskingDemo.
Adding the Image Files
The completed app will include the use of two images which will need to be added to the asset catalog of the project. Both image files are contained within the multitasking_images folder of the sample code download.
Within Xcode, locate and select the Assets.xcassets entry within the Project Navigator panel to load the asset catalog into the main panel. In the left hand panel, Ctrl-click immediately beneath the existing AppIcons entry and select New Image Set from the resulting menu. Double-click on the new image set entry (which will default to the name image) and change the name to Waterfalls.
Open a Finder window, locate the multitasking_images folder from the code sample download (http://www.ebookfrenzy.com/code/iOS9BookSamples.zip) and drag and drop the [email protected] file onto the 2x placeholder within the image asset catalog. This portrait image will be displayed within the app when it is displayed using a regular width size class.
Remaining within the asset catalog and with the Waterfalls image set still selected, display the Attributes Inspector panel and change the Width property from Any to Any & Compact. A second row of image placeholders will now appear within the image set. Drag and drop the [email protected] image file from the Finder window onto the 2x [-*] placeholder within the image set. On completion of these steps the image set within the asset catalog should match that shown in Figure 35-1:
Figure 35-1
Designing the Regular Width Size Class Layout
The baseline user interface layout will be the one used for the regular width size class. In the next section, changes will be made to the layout for the compact width size class.
For the purposes of this example, the layout will be controlled by a UIStackView instance. Begin, therefore, by selecting the Main.storyboard file and dragging and dropping a Horizontal Stack View from the Object Library panel onto the scene canvas. With the Stack View selected, display the Auto Layout Pin menu and set Spacing to nearest neighbor constraints on all four sides of the view with the spacing set to 0 and the Constrain to margins option enabled. Before clicking on the Add 4 Constraints button, set the Update Frames menu to All Frames in Container as illustrated in Figure 35-2:
Figure 35-2
Display the Document Outline panel and select the Stack View entry. Using the Attributes Inspector panel, set the Alignment to Center and the Distribution property to Fill Equally.
Drag an Image object and drop it onto the stack view instance in the storyboard scene canvas. Locate the Text View object within the Object Library panel and drag it to the right hand edge of the Image view within the scene canvas. When a bold blue vertical line appears (referenced by the arrow in Figure 35-3) indicating that the Text View will be placed to the right of the Image view in the stack, drop the Text View to add it to the scene.
Figure 35-3
Learn SwiftUI and take your iOS Development to the Next Level
|
Figure 35-4
Designing the Compact Width Size Class
When the app is displayed in Slide Over and certain Split View configurations, the compact size class will be used to arrange the scene layout. To ensure that the scene appears correctly in these situations, this size class now needs to be designed within the project. With the Main.storyboard file still loaded into Interface Builder, use the size class menu along the bottom edge of the storyboard (Figure 35-5) to change the class to Compact Width | Regular Height:
Figure 35-5
With Interface Builder now displaying the compact width, regular height size class, the stack view needs to be configured to use vertical orientation to accommodate the narrower width available for the subviews.
Select the Stack View object within the Document Outline panel and display the Attributes Inspector panel. When the app is displayed in compact width, the axis orientation of the stack view object needs to change from horizontal to vertical. To configure this, click on the + button located to the left of the Axis setting in the Attributes Inspector and, from the resulting menu, select the Compact Width | Regular Height (current) option:
Figure 35-6
Once selected, a new Axis property setting will be added to the attributes list for the current size class labeled wC hR as highlighted in Figure 35 7. Change the setting for this property to Vertical and note that the orientation of the scene has changed in the storyboard canvas.
Figure 35-7
Repeat these steps to add an Alignment setting for the Compact Width | Regular Height (current) size class set to Fill:
Figure 35-8
Learn SwiftUI and take your iOS Development to the Next Level
|
Figure 35-9
Once selected, display the Attributes Inspector panel, click on the + button to left of the Installed property and select the Compact Width | Regular Height (current) size class. Turn off the check box next to the wC hR Installed option as illustrated in Figure 35-10:
Figure 35-10
Testing the Project in a Multitasking Environment
With the project completed, it is time to test that the layouts associated with the size classes work within the various multitasking modes. Compile and run the app on an iPad model which supports multitasking or a suitable iOS simulator session. Once the app is running, rotate the device into landscape orientation and swipe from the right hand edge of the screen to display the list of apps supporting multitasking and select one so that it launches into Slide Over mode. Tap the narrow white button to the left of the Slide Over panel to switch to Split View mode:
Figure 35-11
Drag the divider to the left so that the two apps share the screen equally. Verify that the compact width layout appears as shown in Figure 35 12 below:
Figure 35-12
Summary
In this chapter we have created an example iOS 9 iPad project which makes use of size classes to display a user interface scene appropriately configured for both compact and regular width categories of size class. Once implemented, the app was able to adopt different layouts when running in various multitasking modes on an iPad.
Learn SwiftUI and take your iOS Development to the Next Level
|
| Previous | Table of Contents | Next |
| A Guide to Multitasking in iOS 9 | Implementing a Page based iOS 9 Application with UIPageViewController |
