• 10 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 7/4/19

Explore UI components

Log in or subscribe for free to enjoy all this course has to offer!

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:

UI elements are subclasses of UIView
UI elements are subclasses of UIView

What's UIControl? :euh:

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.

Exploring UIKit

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? :euh:

We can find the elements provided within our interface in the Object Library on the Utilities panel:

Xcode Object Library
Xcode Object Library

This library presents not only visual elements, but also gestures, navigational, and layout elements.

Here are the most common elements:

Common controls in Object Library
Common controls in Object Library

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:

Object Library list view
Object Library list view

You can also explore more details by clicking on an object in either the list view or the icon view:

List/Icon view details
List/Icon view details

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! :zorro:

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:

Select elements on a screen
Select elements on a screen

Now let's build each of the screens.

Main screen

Here's our original mock up:

FrameIT - Main screen
FrameIT - Main screen

And the components we established in the first chapter:

  • App title -  UIImageView

  • Framed image panel - a composition of views:

    • Colored frame -  UIView

    • Image placeholder or selected image -  UIImageView 

    • Start over button  -  UIButton

  • Color label -  UILabel

  • Color picker  - a composition of views - a container and individual color swatches:

    • Container view -  UIView

    • Color swatches - a set of  UIButton  elements

  • Share button -  UIButton

Let's spot the elements we are going to be using in the Object Library:

FrameIT elements: UILabel, UIButton, UIImageView, UIView.
FrameIT elements: UILabel, UIButton, UIImageView, UIview.

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:

Media Library
Media Library

Let's go ahead and add all the elements one by one.

Getting started

Select the first view controller.

Which view controller is the first exactly? o_O

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:

Initial ViewController of a storyboard
Initial ViewController of a storyboard

To initiate our design implementation, select the main view of the first screen and change its background to Clouds:

 

App Title

Drag the app name image ("FrameIT-name-tiffany") from the media library:

Drag Image from Media Library
Drag Image from 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:

Position element using guidelines
Position element using guidelines

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.

Colored frame

Next, drag a UIView from Objects Library:

Drag element from Object Library
Drag element from Object 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):

Add collard frame view
Add colored frame view
Placeholder Image

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:

Image with vs. without a containing view
Image with vs. without a container view

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'.

Add placeholder image container view
Add placeholder image container view

Now we can add the image view! :zorro:

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':

Add placeholder image
Add placeholder image
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' : 

Startover button
Add Startover button
Color label

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:

Add color label
Add color label
Color panel

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 color panel
Add color panel
Color swatches

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:

Add color swatches
Add color swatches

After we've positioned all the swatches, we can go ahead and set the background of Color panel to transparent:

Change color panel background
Change color panel background
Share button

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':

Add Share button
Add Share button

And finally after all is done, let's test it in simulator - click Run!

FrameIT is taking shape!
FrameIT is taking shape!

One screen down, one to go! :zorro:

Image Picker

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 :ninja:!

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. :zorro:

Now we are ready to move on!

Let's Recap!

  • 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.

Example of certificate of achievement
Example of certificate of achievement