My First iOS Application
Welcome to your first application! This aboutMe app will walk you step by step to build a project you can show off to your friends and family! You will use some of the knowledge you’ve gained up to now and learn a few new things as well.
One of the most challenging aspects of your first app is learning how to navigate Xcode. Hopefully, these instructions will allow your first build to be a smooth one.
Students who successfully complete this app should be able to define these keywords:
Object Library
Attributes Inspector
View
ViewController
Label
Constraints
Size Inspector
Superview
IBOutlets
Let’s begin…
Step 1 - Setup
Open Xcode and select the Create a new Xcode project option from the left hand panel
On the next Screen, select Single View App, and press Next.
Finally, name the project AboutMeBasic, make sure that the User Interface is set to Storyboard and press Next to select a file location.
Step 2 - Storyboard (UI)
With the project now created, select the Main.storyboard file in the leftmost menu. An interface with a single blank iPhone screen view should appear in the main panel of Xcode.
Object Library:
In Object Library search for UILabel. Click and drag from a label onto the storyboard View Controller. Next, we will set constraints to hold the label in place on various sizes of iPhone/iPad screens. In your document outline (lefthand panel of the storyboard view), while holding the control key, click and drag from your label to safe area. In the popup menu which appears hold command and select Equal Widths, Center Horizontally in Safe Area, and Top Space to Safe Area.
(If you can’t see the document outline, you may have to toggle the option on at the bottom left of the storyboard window)
With the label selected click on the Size Inspector Icon (Ruler Icon) in the top right corner of the screen. Edit the Equal Width To SafeArea constraint, changing the multiplier to 0.8, and change the constant for Align Top to Safe Area to 40 pts.
Select the Attributes Inspector in the top right of the screen. Here you can adjust the properties of the label including font, size color, etc. Change the font size to 25 and the color to whatever suits you best. Change the text to (Name) (This will simply serve as a placeholder - we will be editing this programmatically soon).
Just as in the previous step, drag out another UILabel from the object library below your first label. Control-drag from the new label to safe area and select the Equal Widths and Center Horizontally in the popup menu. Instead of constraining the Top Space to Safe Area, as on the previous label, we will select the Add New Constraints Button in the bottom right of the screen and add a top height of 24. This will constrain the new label 24 points away from the nearest view in the given direction (in our case this will be the first label). Change the text to (Title) as a placeholder.
Add another label below this one constraining it in the same way as the previous label (equal widths with a 0.8 multiplier, center horizontally and 24 pt from the view above). Change the text to (Age) as a placeholder.
Once everything is constrained, you should have a view identical to the one below:
Bounds Rectangles
If you noticed, I now have blue rectangles around my labels, allowing me to see the true size of objects on my view. If you find this to be a helpful visual tool, you can enable these outlines by going to editor -> Canvas -> Bounds Rectangles
Next, we will drag a UIImageView onto the view controller. Search for Image View in the Object library and drag this onto the screen below the Age label. Control-drag from the image view onto the view controller, and add constraints for Equal Widths and Center Horizontally in Container. Change the multiplier for the equal widths constraint to be 0.4. Select the Add Constraints button in the bottom right of the screen and add a top spacing to the Age Label of 24 pt and an Aspect Ratio. In the Size Inspector edit the Aspect Ratio Constraint to be 1:1.
Finally, drag out one last Label below the image view and add similar constraints to the previous labels (Equal Widths to the safe area with a 0.8 multiplier, centered horizontally and 24 pt below the image view). We’ll also constrain the label to be 24 pt above the bottom of the superview. You may see most of your constraint lines turn red indicating Xcode has sensed an ambiguous layout, simply meaning your screen could be interpreted in various way. To solve this, select the newest label and change its Vertical Hugging Priority to 100 (really anything below 250 will solve the problem). This tells Xcode this label is the object we want to stretch or crush when the screen size changes. In the Attributes inspector, change the label text to “(Bio)”, the text size to 13, and adjust the number of lines to 0 - this will allow the label to run on as many lines of text as needed. At this point, you will have the fully laid out skeleton of the applications UI. Next, we will implement the code for filling this skeleton with your data.
Step 3 - ViewController
Using the assistant editor open both the ViewController.swift next to the Main.storyboard we have been working in.
Shortcut: You can open another file alongside the one you currently have open by holding the option key while clicking on the second file you want to open. i.e. if you have the Main.storyboard file open, you can Option-Click on the ViewController.swift to open it in the assistant editor.
Once you have the screens open side-by-side, control-click and drag from each UILabel on the storyboard onto the ViewController.swift file. Xcode will generate IBOutlets which will allow the code in our ViewController.swift file to communicate with and manipulate the objects within Interface Builder (Storyboards). Name these labels accordingly with the placeholder text we placed in them (e.g. nameLabel).
You will need to drag and drop a photo of yourself to use for the image view from your computer into the Assets.xcassets folder in the file selection menu on the left. You can then call this photo within your code by typing its name, or using the initializer of UIImage(named: "yourPhotosNameHere”).
Create a function called setupAboutMe which takes in no inputs and returns no values. This function will work with our IBOutlets (storyboard bridges) to fill them with your own data. Call each label using the names you assigned to their IBOutlet, then use dot notation to access and set the text property of each label and the image property of the UIImageView. You can then set each of these properties to the appropriate text or image. For example, when Mr. West, a former student, completed this project, his function looked something like this.
func setUpAboutMe(){
nameLabel.text = "Kanye West"
titleLabel.text = "Rapper, Fashion Designer, Philanthropist, and GOAT"
ageLabel.text = "Age: 41"
profileImageView.image = UIImage(named: "KanyeProfilePic")
bioLabel.text = "Bio: As Kanye West would doubtless tell you himself, he is a 21st-century phenomenon — a producer turned rap superstar who has reinvented hip-hop several times over in the course of a stellar career; but whose creative genius is sometimes eclipsed by his talent for putting his entire foot in his own mouth. He has made headlines for his bizarre tweets and his grand pronouncements, his award-show stage invasions, his outré fashion sense and his flashbulb-popping marriage to Kim Kardashian."
}
We can then call this function within the prewritten viewDidLoad function which will be called by Apple’s code when this screen is first loaded. It even handles dark mode for us automatically! At this point, you should have a fully functioning About Me App!
Run and test the program in the simulator by hitting the play icon in the top left corner. Kanye left this picture of his final product. Really great work building your first app! Please compress your project and submit to us.