Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Similar to IOS Swift language 1st Tutorial
Similar to IOS Swift language 1st Tutorial (20)
More from Hassan A-j
Recently uploaded
Recently uploaded (20)
IOS Swift language 1st Tutorial
- 1. IPhone Application Development Week 1 Muhammad Asif Subhani Assistant Professor
- 2. IPhone Application Development • What is this class all about? Why am I here? • Prerequisites You must be a strong object-oriented programmer. • iOS Overview What’s in iOS?
- 3. 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 Programming The 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!
- 4. 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.
- 5. What’s in iOS? CS193p! Winter 2015 Cocoa Touch Media Core Services Core OS Core OS! OSX Kernel! Mach 3.0! BSD! Socket s! Securit y Power Management ! Keychain Access! Cert ificates! File System! Bonj our What ’s in iOS?
- 10. Welcome to Xcode
- 11. Welcome to Xcode
- 12. Welcome to Xcode
- 13. Welcome to Xcode
- 15. Welcome to Xcode Class Hierarchy
- 16. Welcome to Xcode Search in the Project
- 17. Welcome to Xcode Breakpoints in the Project for Debugging
- 18. Welcome to Xcode Previous Builds.
- 19. Welcome to Xcode This is Controller from where we would control our views
- 20. Welcome to Xcode This is our View where we would design our GUI
- 21. Welcome to Xcode This is our View where we would design our GUI with Drag and Drop not with code.
- 22. Welcome to Xcode Double click on white area will Zoom Out the GUI.
- 23. 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.
- 24. Welcome to Xcode This is utilities area.
- 25. Welcome to Xcode This is Object Library. These things make GUI and consist of lot of objects.
- 26. 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.
- 27. 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.
- 28. 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.
- 29. 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.
- 30. 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.
- 31. 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.
- 32. 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.
- 33. 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.
- 34. 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.
- 35. 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.
- 36. 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.
- 37. 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.
- 38. Let’s make Calculator Now we are in Simulator, its loading now.. This is separate application other than Xcode.
- 39. Let’s make Calculator Now we are in Simulator, it would ask for Proxy setting if used on UMT Network.
- 40. 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%.
- 41. Let’s make Calculator Now we are in Simulator, Now this shows full screen without Scroll on 50% resolution.
- 42. 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???????????
- 43. 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???
- 44. 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.
- 45. 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.
- 46. 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.
- 47. 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.
- 48. 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
- 49. 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.
- 50. 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.
- 51. 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
- 52. 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..
- 53. 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
- 54. Let’s make Calculator You can hide Navigation and Utilities area by pressing these buttons to have this view in xcode.
- 55. Let’s make Calculator We don’t need this code in our Calculator.
- 56. 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.
- 57. 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.
- 58. 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.
- 59. 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.
- 60. 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.
- 61. 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.
- 62. 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 following var display: UILabel!
- 63. Let’s make Calculator Now we would put a Button on our View Screen.
- 64. Let’s make Calculator You can change the size of the button from Size Inspector.
- 65. 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.
- 66. Let’s make Calculator Press Control button then click on Button and then drag mouse into the code then this screen would appear.
- 67. 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.
- 68. Let’s make Calculator This would Ask for the name of the Action “appendDigit” and change the Type to “UIButton”
- 69. Let’s make Calculator This would Ask for the name of the Action “appendDigit” and change the Type to “UIButton”. Press Connect button.
- 70. Let’s make Calculator This is the Syntax of the function definition. func appendDigit(sender: UIButton)
- 71. 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.
- 85. Let’s make Calculator Will Discuss this in Next Class. Thanks