03 - Basic User Interface Recap


Basic User Interface

In this section, we will go back to iOS Development and using what we have learned in programming, we will begin working on a variety of basic user interface elements.

We will learn how to use UI elements as outlets and interact with them in our code. In specific in this section we will discuss topics such as:


  • GUI Kit

  • Buttons

  • Segmented controls

  • Image views

  • Text fields

  • UI switch

  • Sliders and steppers

  • View controllers

  • Navigation between view controllers

  • Passing data between different view controllers


By the end of this section, you should be easily add a variety of UI elements into your app and trigger functions in the code.


GUI Kit

In this lesson, we will have a look at the GUI Kit and try to familiarize ourselves with various available outlets.

These are the links to the two websites that we talked about in the video:


https://www.behance.net/gallery/54882503/iOS11-GUI-KIT

https://iosdesignkit.io/ios-gui/


Buttons

  • We use Buttons to trigger actions depending on when and where on them a click has landed.

  • We could call functions on actions directly using the assistant editor or we could use the View Controller's connection inspector to do that.

  • For calling actions, we could also use the addTarget method.


Scope of a variable

  • Variables also have a scope which means in which function (or functions) are they available.

  • If a declaration of a variables is inside a body of a function, that variables is said to be local to that function only.

  • If the declaration is outside, that variable is accessible by every function.


Segmented Controls

  • They work like radio buttons that only one of them can be active at any given time.

  • The event to trigger them is the Value Changed.

  • Their segments are ordered from 0 upwards.

  • Their segments can be removed dynamically.

  • Their segments can be inserted dynamically.

  • Similar to buttons, they can be called using addTarget.


Image Views

  • Image Views are the containers that can show us images.

  • Images can be read from a variety of sources. if we use an image that is embedded into our project, we can simply use the


[UIImage imageNamed: @""]


  • We will see other methods of converting NS Data into images in the future.


Text Fields:

  • In this lesson, we will learn to use basic text fields and decorate them.

  • We will also learn how to change the keyboard type on them and fetch values from them.

  • We will quickly discuss getting int values from strings as well.

  • We will also learn how to press a button to get rid of the keyboard.

  • Text Fields also have placeholders.

  • We should clear the text fields once they are used.


In this lesson, we will quickly cover the mechanics of using a UI Switch outlet and changing a value (string) based on that. We will also learn about casting the sender to UI Switch.


UI Sliders

  • Sliders are used to scrub between a minimum and maximum number.

  • Their default value is a float number.

  • You can set them to be triggered only when the scrub is finished and not a continuous trigger.


UI Stepper

  • Stepper are used to increment a value.

  • Their step can be changed.

  • And they can step continuously or one at a time.

  • Steps don't have to be integers.


View Controllers

In this lesson, we will learn how to make a new view controller and how (from interface) go through a segue

View controllers are like a container that hold on to all UI objects for a certain class and they also provide user interactivity.


View Controller Class

In this lesson, we will learn how to add a new view controller class and connect it to our view controller in IB

We will run a test in which a value will appear from view did load

We will discuss both classes and run cycles of view controller in future


Segue

In this lesson, we will learn how to call a segue programmatically and in interface builder.

We will use the segues from buttons to view controllers.

We will also use segues from view controllers to view controllers.

We will talk further about the use of unwind segue. To use unwind segue, you would need a function with IBAction return type and an argument of the type UIStoryBoardSegue in the View Controller you are unwinding back to.

This part is a little confusing. Unwind segues are the only type of functions that you don’t code them in the class of your view controller. Rather you code them on where you want to go back to.


Passing Data Between View Controllers

  • In this lesson, we will learn how to prepare for a segue and pass data between our different view controller

  • To do that, we need to prepare for an upcoming segue using the prepareForSegue built-in function


Recap

In this section, we covered the following topics:

  • Buttons and how to assign functions to them in the storyboard as well as using the addTarget.

  • Segmented controls and how their selectedIndex number helps us

  • Image Views and how we could load images into them and change the content mode.

  • Text Fields and how we could change keyboard on them.

  • Switch and how we could get their isOn state.

  • Sliders and how we could read their value.

  • Steppers and how we could use them to increment or decrement a value.

  • View controllers and how we could use them to categorize our app also assign separate view controller classes to them.

  • We finally touched on segues and passing data between view controllers using prepareForSegue