So, we figured out that absolutely everything on our app interface is represented by a view, which in essence, is a plain rectangle!
Discovering the variety of UI elements
So, how come we can see such a variety of beautiful shapes on the app screens we use every day?
Those are particular types of views, which are subclasses of UIView and compositions of those subclasses.
For example, a Label, that is represented by the class UILabel is a subclass of UIView. A Button is represented by the class UIButton, and, is also a subclass of UIView. AND it also contains a label subview to represent the button’s title:
As you noticed, the UIButton is not a direct subclass of UIView. Instead, it inherits UIControl class and UIControl, in its turn, inherits UIView. Remember the idea of multilevel inheritance? Well, this is a good example of it.
UIView is a non-interactive element by default. We can implement the code to add interaction support, which would require some coding effort. Buttons, on the other hand, imply interactions by definition (in real world they can be pressed, toggled, etc.). In this case it's useful to create a helper layer that would implement and support these kind of expected interactions.
Swift UIKit framework provides us with variety of beautifully designed components ready for us use, such as: Buttons, Labels, Switches, Sliders, various layout and navigation elements.
Where are they hiding?
We can find the elements provided within our interface in the Object Library on the Utilities panel:
This library presents not only visual elements, but also gestures, navigational, and layout elements.
Here are the most common elements:
We'll be working with many of those in this course. You can see many more elements available in the Xcode. I encourage you to explore them on your own. You can enable List view by toggling the layout icon on the Object Library panel to make the short descriptions visible:
You can also explore more details by clicking on an object in either the list view or the icon view:
As you can see, there's a variety of elements available for us to use. Little by little you'll get familiar with all of them!
Interpreting design visuals
Let's look at our designs for FrameIT. We have 2 screens to implement: Main screen and Image picker.
To start, we need to create 2 screens managed by 2 view controllers. We already have 2 on our storyboard left from our experiments. Let's clear them as we'll be needing different elements to implement the design. To clear all elements, simply select all the elements either on the screen itself or in the tree navigation on the left and click Delete:
Now let's build each of the screens.
Here's our original mock up:
And the components we established in the first chapter:
App title -
Framed image panel - a composition of views:
Colored frame -
Image placeholder or selected image -
Start over button -
Color label -
Color picker - a composition of views - a container and individual color swatches:
Container view -
Color swatches - a set of
Share button -
Let's spot the elements we are going to be using in the Object Library:
To add images that exist in our asset catalogue, we can use a simpler way: dragging them from the media library. Remember, we added our images earlier in this course:
Let's go ahead and add all the elements one by one.
Select the first view controller.
Which view controller is the first exactly?
On the storyboard, the first screen that launches when the storyboard is activated is the one that has an arrow pointing to it. This indicates that it's an 'Initial view controller'. It is also indicated on the Attributes Inspector:
To initiate our design implementation, select the main view of the first screen and change its background to Clouds:
Drag the app name image ("FrameIT-name-tiffany") from the media library:
Set Content mode attribute to 'Scale To Fill':
Size the image to 250x52pt.
Position the app title image in the middle horizontally (use the vertical and horizontal guidelines to center it), 20 pt from the top of the screen:
What's that guideline at the top?
As you can see there's an additional guideline at the top, it appeared exactly at 20pt from the top of the screen, and it is meant to indicate the potential status bar appearance. This makes it easier to position the content under the space that can be occupied by the status bar information.
Next, drag a UIView from Objects Library:
Size the new view to 290x290pt. Position it in the middle horizontally, 20pt under the app title image. Set the background color to our default pick, 'Sunshine' (or any other color of your choice):
This is a tricky one. Remember that we have to move, rotate and scale the image. Which means it will change its appearance on the screen. And we have to make sure it visually still stays within the Color Frame.
To address this, we are going to place it in a container view. And clip bounds of that container view so that when the image goes beyond allocated space for it within the Color Frame, it will still appear intact:
Now, drag a UIView from Object Library as a subview to the colored frame view. Position it in the middle of its super view (use vertical and horizontal guidelines to reference the center). Resize the image to 270x270pt. And, on Attributes Inspector check off the property 'Clip to Bounds'.
Now we can add the image view!
Drag the placeholder image from the Media Library as a subview to the colored frame view. Make it fit the Container View exactly: Position the image at 0, 0 and resize it to 270x270pt. Set Content mode attribute to 'Scale to Fill' and change the background to 'White':
Start Over button
Drag a button onto the screen. This time, make sure it's overlaying the image and colored frame, but is a subview of the main view, not the colored frame or image view. Size it to 50x50pt and position it with the center at the right bottom corner of the colored frame. Make sure the button type is set to 'Custom', Remove the default title (Reads 'Button' by default). Select Image 'FrameIT-startover.png' and set the background color to 'Smoke' :
Drag a label onto the screen under the colored frame view and position it in the middle horizontally and 30pt from the view above. Align the left and right edges with the colored frame and set the height to 30pt. Change the text to 'Sunshine' and the color to 'Smoke'. Set the font to 'Custom', the font family to 'Nunito', and the font size to 30:
Drag an UIView onto the screen 20pt from the label above. Align the left and right edges to the color frame and set the height to 44pt:
Add 5 UIViews, one for each color swatch, as subviews to the Color panel. Size each swatch to 44x44pt and set them 18pt apart from each other. Set respective the background color for each button:
After we've positioned all the swatches, we can go ahead and set the background of Color panel to transparent:
And lastly, drag another button under the Color panel view. Position it 20pt from the bottom of the screen, align the sides with color panel and set the height to 50pt. Set the font to 'Custom', set the font family to 'Nunito', and set the font size to 30. Set the background color to 'Smoke' and the font color to 'Clouds'. Change the title to 'Share':
And finally after all is done, let's test it in simulator - click Run!
One screen down, one to go!
According to our design, image picker will be represented by a special Controller called "Alert Controller" and does not need to be implemented in the storyboard. We'll get to its implementation later in the course.
Design & dimensions mystery
Wait a minute, where do all those measurements come from?
As you may notice, we don't have any measurements specified in our requirements. So, what do you do in such a case? You eyeball it and measure !
Most of the time, the mockups will come in 1x or 2x scale. You can determine that by looking at the picture dimensions.
From there, you can use your favorite visual tool to measure the sizes and spacing. I recommend rounding; if some spacing measures 11pt, make it 10pt.
However, there are common measurements in software that are exceptions and should be left alone, like 1, 2, 4, 8, 16, 24, 32, 36, 38, 40, 42, 44. Keep them as is - don't round!
What should I do with a number like 9?
Pick your favorite - 8 or 10, eyeball - see what fits better.
How can you determine what's common for software products and what can be rounded? Experience. The more designs (and designers) you work with AND the more visual software components you design the more educated of a guess you'll be able to make!
What if requirements are not clear? Does the developer need to clarify them?
Clarifying requirements is always helpful and will definitely make it certain whether a font needs to be 31 or 32 (or if 30 is as good!). I recommend not sweating over it. You will have more points to bring up with designers than particular little dimension uncertainties.
If you are aiming to speak with a designer, collect all similar questions and shoot them all at once. Or generalize your questions, especially if they are very similar. For example:
"I noticed that there are many font sizes appearing throughout designs. They are very similar but not exactly the same. Is the exact size critical to the appearance or can we generalize them and use just a few font sizes instead?"
Believe me, designers will appreciate your being efficient about this matter. Go ahead and analyze the designs, do guess work, and propose solutions.
Now we are ready to move on!
There are many components provided by the UIKit that you can easily use in your interface.
Parameters of an element can be modified using the Attributes Inspector. Each element has different properties that can be modified.
Resizing and positioning of a view can be done in 2 ways:
Dragging the corners or sides of a view
Using Size Inspector to input precise values
Adding the image view can be done by dragging an image from Media Library.