IOS Swift language 1st Tutorial

IPhone Application DevelopmentWeek 1

Muhammad Asif SubhaniAssistant Professor

IPhone Application Development

• What is this class all about? Why am I here?

• PrerequisitesYou must be a strong object-oriented programmer.

• iOS Overview What’s in iOS?

What will I learn in this course? • How to build cool apps

Easy to build even very complex applications.Result lives in your pocket or backpack!Very easy to distribute your application through the AppStore. Vibrant development community.

• Real-life Object-Oriented ProgrammingThe heart of Cocoa Touch is 100% object-oriented.

• Application of MVC design model.• Many computer science concepts applied in a commercial

development platform: Databases, Graphics, Multimedia, Multithreading, Animation, Networking, and much, much more!

Prerequisites• Prior Coursework

Object-Oriented Programming experience mandatory. Structured Programming and Data Structure.

• You should know well the meaning of these terms ... Class (description/template for an object)Instance (manifestation of a class)Message (sent to object to make it act) Method (code invoked by a Message)Instance Variable (object-specific storage)Superclass/Subclass (Inheritance)If you are not very comfortable with all of these, this is probably not the class for you!

• Programming Experience This is an upper-level CS course. If you have never written a program where you had to design and implement more than a handful of classes, this will be a big step up in difficulty for you.

What’s in iOS?

What’s in iOS?

What’s in iOS?

What’s in iOS?

What’s in iOS?

Welcome to Xcode

Welcome to Xcode

Welcome to Xcode

Welcome to Xcode

Welcome to Xcode

Navigator

Welcome to Xcode

Class Hierarchy

Welcome to Xcode

Search in the Project

Welcome to Xcode

Breakpoints in the Project for Debugging

Welcome to Xcode

Previous Builds.

Welcome to Xcode

This is Controller from where we would control our views

Welcome to Xcode

This is our View where we would design our GUI

Welcome to Xcode

This is our View where we would design our GUI with Drag and Drop not with code.

Welcome to Xcode

Double click on white area will Zoom Out the GUI.

Welcome to Xcode

In complex projects, we will have many of such square areas to design different screens and applications switch from one screen to another screen.This area would be like big map.

Welcome to Xcode

This is utilities area.

Welcome to Xcode

This is Object Library. These things make GUI and consist of lot of objects.

Let’s make Calculator

To make the Result area of Calculator, we need a Label whose text would be updated with the result when we perform addition, subtraction, multiplication and Other mathematical functions.We shall drag and drop that Label on our View area.

Let’s make Calculator

To make the Result area of Calculator, we need a Label, These Blue lines help me aligning the placement of Label or other GUI elements on the View Area.

Let’s make Calculator

To make the Result area of Calculator, we need a Label, These boxes show that this Label is selected. You can change the size of Label by clicking and dragging side of the box.

Let’s make Calculator

To make the Result area of Calculator, we need a Label, These boxes show that this Label is selected. You can change the size of Label by clicking and dragging side of the box.

Let’s make Calculator

To make the Result area of Calculator, we need a Label, You can change the text Label by double clicking on Label.

Let’s make Calculator

To make the Result area of Calculator, we need a Label, You have changed the Text Label to 0 by double clicking on Label.

Let’s make Calculator

To make the Result area of Calculator, we need a Label, Click on Attributes Inspector. Then you can change the text alignment of 0 to Right Align.

Let’s make Calculator

To make the Result area of Calculator, we need a Label, Click on Attributes Inspector. Then you can change the Font Size of 0 to 32.

Let’s make Calculator

To make the Result area of Calculator, we need a Label, Click on Lower side of the Label Box to increase the height of the Label.

Let’s make Calculator

To make the Result area of Calculator, we need a Label, Click on Lower side of the Label Box to increase the height of the Label.

Let’s make Calculator

Let’s Run this Application. You can Run Application on any iOS device attached to Your computer.Or Run the Application on any Simulator listed below.I don’t have any device currently attached Therefore it would Run in Iphone 6s Plus simulator as shown selected in the image.

Let’s make Calculator

Let’s Run this Application. You can Run Application by Clicking on Play Button.The application would Run in Iphone 6s Plus Simulator as shown.

Let’s make Calculator

Now we are in Simulator, its loading now..This is separate application other than Xcode.

Let’s make Calculator

Now we are in Simulator, it would ask for Proxy setting if used on UMT Network.

Let’s make Calculator

Now we are in Simulator, it would not show full screen because my System resolution is lower as compared to Iphone 6s Plus. So we can scale down resolution to 50%.

Let’s make Calculator

Now we are in Simulator, Now this shows full screen without Scroll on 50% resolution.

Let’s make Calculator

Now we are in Simulator, This would be the display on Non-Proxy network.

But this is just White Screen Why???????????

Let’s make Calculator

This Label is present there but this is Off screen. See its width.Its Square. No iOS device is Square.They are Rectangle in shape each one has different size and shape.Then why we design in Square???

Let’s make Calculator

We design everything in Square and then give Rules called Constraints to everything inside square that define what happen to them when they Squished down horizontally or vertically.

Let’s make Calculator

Now let us give some Rules to this label. That this should know what to do when this Label squished down in any direction for any device.

Let’s make Calculator

Now let us give some Rules to this label. iOS wants us to use the whole width available so we would pin the right edge of Label Rectangle to the Square right edge.So they will be always pinned to each other.

Let’s make Calculator

Now let us give some Rules to this label. How we would pin right edges together?Step 1: First Press control button then click and drag from right edge of Label to Square edge as shown in figure.

Let’s make Calculator

Now let us give some Rules to this label. How we would pin right edges together?Step 2: When you would release the mouse click. It would show the little black box that asks which constraints to choose from the list of constraints

Let’s make Calculator

Now let us give some Rules to this label. How we would pin right edges together?This would result after step 2 is completed.

Let’s make Calculator

Now let us give some Rules to this label. How we would pin left edges together?Same 2 step process is repeated here for left edges.

Let’s make Calculator

Now let us give some Rules to this label. How we would pin top edges together?Same 2 step process is repeated

Let’s make Calculator

Now let us give some Rules to this label. How we would pin all edges together?This would be result when we pin right, left and top. But we didn’t pin bottom..

Let’s make Calculator

Now let us give some Rules to this label. How we would pin top edges together?Same 2 step process is repeated

Let’s make Calculator

You can hide Navigation and Utilities area by pressing these buttons to have this view in xcode.

Let’s make Calculator

We don’t need this code in our Calculator.

Let’s make Calculator

This is the Basic Class Declaration code in Swift. This class ViewController is being inhereted from its Superclass UIViewController class. Swift has single inheritance. Means one class can inheret from only one class.Don’t inheret from any class if you don’t want to.

Let’s make Calculator

We are inheriting from UIViewController so that we can get all the mechanisms of controlling UI through this class in our own ViewController class.

We can inheret indirectly from UIViewController as well by inhereting from a class that inherets from UIView Controller.

Let’s make Calculator

Our own ViewController class has a very generic name when you would make your own application then you would have a lot of these classes and Views so choose a better name like CalculatorViewController that looks more relevant to your application or any better name.

Let’s make Calculator

To connect this UI with the code. We need to make Instance Variable (Property) so that we can update the value of Label whenever we want by changing the value of that Instance variable.

Lets connect UI with ViewController. First we would press Control button and click on Label and drag it into our class code.

Let’s make Calculator

By releasing it would ask what kind of connection you want to make, We choose Outlet connection.Outlet connection is a instance Variable that points to this Label in UI.

Lets name it first.

Let’s make Calculator

Lets name it first. We have named it display.

This would automatically understand that its type is UILabel because we made it by dragging it from Label to our class.

Let’s make Calculator

This has made an @IBOutlet weak var display: UILabel!

Purpose of @IBOutlet is to make a coonection between UILabel and your code as shown in gutter.

Weak is for the purpose of Automatic reference counting (ARC)

Actual Syntax to create a Property or Instance variable is followingvar display: UILabel!

Let’s make Calculator

Now we would put a Button on our View Screen.

Let’s make Calculator

You can change the size of the button from Size Inspector.

Let’s make Calculator

We have changed the Button Text to 7 increased its size and Font size of text on the button and would connect this button to UI the same way we did to our Label.

Let’s make Calculator

Press Control button then click on Button and then drag mouse into the code then this screen would appear.

Let’s make Calculator

When you would release mouse and Control button. This screen would appear with little box that would ask what would you want to connect.

This time we don’t want IBOutlet, we want Action so we would select Action from top drop down menu item.

Let’s make Calculator

This would Ask for the name of the Action “appendDigit” and change the Type to “UIButton”

Let’s make Calculator

This would Ask for the name of the Action “appendDigit” and change the Type to “UIButton”.

Press Connect button.

Let’s make Calculator

This is the Syntax of the function definition.

func appendDigit(sender: UIButton)

Let’s make Calculator

If function has return type then its is written after argument paraenthesis after arrow sign. As shown in the figure it is returning the Double.

func appendDigit(sender: UIButton, display: UILabel) -> Double.

Let’s make Calculator

Let’s make Calculator

Let’s make Calculator

Let’s make Calculator

Let’s make Calculator

Let’s make Calculator

Let’s make Calculator

Let’s make Calculator

Let’s make Calculator

?

Let’s make Calculator

Let’s make Calculator

Let’s make Calculator

Let’s make Calculator

Let’s make Calculator

Will Discuss this in Next Class.

Thanks