In the previous exercise you used segues to pass string values (text). In this lesson we will demonstrate how data passed by segues can be used so that one only view controller will be able to show a series of different pictures based on whichever button was clicked.
- To begin create a new single view application project named PictureSegue and save it into your 4310 folder.
- Download segue.zip from free.mynmi.net, unzip the folder and drag all 8 of the images into Assets.xcassets.
- Open Main.storyboard and drag four buttons onto the view controller.
- Add the thumb images (as in beachThumb) to each of the four buttons. If the frame of a button is larger than the actual image, resize it to fit the image. When you are done, arrange the buttons similarly to the outline below.
- Before we go any further those buttons will need constraints because they will NEVER look right on a smaller, phone-sized, screen until we do. To see a fuzzy youtube recording of how to use the pin menu to set the proper constraints for the button on the upper left, click here. We will spend a lot of time on constraints because they are a critical part of IOS development. For now, the main point is to
- set the width and height of each button/image
- constrain it to either the left or right side and
- constrain it to the object above or to the bottom margin
- Set constraints for all 4 buttons. Each one should be tied to the side that it is nearest and to the object just above, or to the bottom margin. Once you have set constraints you can click on a given object to see a visual representation of the constraints. You can also see, and delete or edit, the constraints for a given object by clicking on the size inspector (see the HUGE screen capture below where the butterfly button is highlighted).
- Test it out on both and iphone 6s and a 6s plus. Chances are it looks better on the 6s plus while the buttons may overlap on the 6s. Try deleting the constraints, resizing the buttons to make them a bit smaller, and then reset the constraints. You may also want to experiment a bit to see what changes when you set a constraint on one of the buttons near the bottom to the bottom margin, versus constraining it to the button above it. The nature of the game with constraints seems to be compromise. It is possible to get exactly the look that you want for any given platform, but it can be challenging to make even a simple set of buttons behave well on multiple screens.
- Once you have the buttons adequately constrained, drag a new view controller onto the stage.
- Just as in the previous exercise, you will need to create a new swift file based on the UIViewController class, and associate it with the view controller object that you just added to the stage. Luckily this task is easier to accomplish than it is to describe 🙂 .
Right-click in the project navigator sidebar, as shown at right, and click New File. Select Cocoa Touch Class and click next. Change the name to displayPix, making sure that the language is Swift (as shown below) and click Next yet again.
Save the file which will appear in the project navigator sidebar as displayPix.swift. Place it inside of the segueDemo folder, as shown at right, if it's not already there. The project will work either way, but it's nice to stay organized.
- Next, click on the view controller icon of the new View Controller that you added to the stage a couple of steps back. Click the identity inspector and select the displayPix class that you just created. (shown below)
Congratulations. You have just associated the view controller object with its new class and are ready to do some light coding!
- Click on the first view controller, the one with the four buttons. If you are lucky you will already see the assistant editor on the right side and it will display the Viewcontroller.swift file as shown below.
if not, click on the menu shown below and select Assistant Editors on Right. Once ViewController.swift is open, your first task is to create two new variables named clickedPic and whichImg, inside of the viewcontroller class, as shown here.
Before we go any further it's worth mentioning that you will see several comments that are indicated by // or by
/* followed by text. You can ignore those comments or delete them. Your call, but you do not need them at this point and some people find them to be distracting.
- Our next job (whew) is to add an action from one of the buttons to viewcontroller.swift. This action will associate one of pictures that you dragged in a while back to the clickedPic variable that you just created. Click here for a video demonstration of that process. When you finish, your code should match the screen capture below.
Repeat this process with each of the 3 remaining buttons. Your final code should match the screen capture at right. By the way, if at some point you forget the names of the pictures, you can click Assets.xcassets to refresh your memory. The only caveat is that you will not be able to see the .jpg file suffix. Even so, the full name with suffix must be added to the variable.
- Now let's switch to the displayPix view controller, drag an Image View object onto the stage and resize it to fit the whole space as shown below.
Next, we need to associate the image view to displayPix.swift via something known as an 'outlet.' The purpose of an outlet is to allow you to perform actions on an object that has been placed on the view controller. Click here for a video of this process. When you finish, the code should display as follows:
@IBOutlet weak var showImage: UIImageView!
You have now created an outlet with a variable named showImage that is associated with the imageView on the stage. Soon we will use this relationship between the imageview and its variable to dynamically display images.
- Add one additional variable named picChosen as follows:
We will use the picChosen variable to receive information from the view controller with the four buttons. Almost there! Return to the original view controller with the four buttons.
- You are about to create something called a segue which you will use to pass information from this view controller to the displayPix view controller. This is kind of hard to explain but easier than it looks.
Just below the didReceiveMemoryWarning function (as shown a few lines below), start typing prepareForSegue. As you do so, lots of intimidating code should magically appear along with two brackets that indicate where you should enter code. Next, enter the code shown below as in
let passedPic = segue.destinationViewController as! displayPix and passedPic.picChosen = clickedPic
Once again, some of this code will magically write itself! When you are finished your code should match the code shown in the screen capture below.
- Two things left to do. One is to add navigation and you already know how. Control drag from each of the four buttons to the displayPix view controller to create the links. Next, drag a button onto the displayPix view controller and use it to link back to the navigation View Controller. You can put the button wherever you want to but it needs to be visible. It would also be possible to cover the entire view controller with an invisible button. You're the designer, so your call.
- Thing two. Return to the displayPix view controller and add the two lines of code shown below to the viewDidLoad function.
As you might surmise, the ViewDidLoad function has the job of making things happen after the view controller loads. In this case, you are setting a constant named chosenImage to become a UIImage object that gets image names from the picChosen variable that you created earlier. Next, you are telling the showImage outlet tied to the imageView on stage to display chosenImage. Test it.
- Once everything is working, spend some time trying to make the images display properly on multiple devices by experimenting with constraints.