1 / 37

Introduction to iOS

Introduction to iOS. UIkit : views and view controllers. Introduction. iOS Framework ( Uikit ) This framework is HUGE We’ll see the basics over the next few weeks. .. …there is a lot to learn!. History. OS is the name of Apple’s platform for mobile applications

aleda
Download Presentation

Introduction to iOS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to iOS UIkit: views and view controllers

  2. Introduction • iOS Framework (Uikit) • This framework is HUGE • We’ll see the basics over the next few weeks... …there is a lot to learn!

  3. History • OS is the name of Apple’s platform for mobile applications • The iPhone was released in the summer of 2007 • According to Wikipedia, it has been updated > 50 times since then, with the most recent update released this past January with version 6.1 • iOSapps can be developed for iPhone, iPod Touch and iPad • iOSis used to run the Apple TV but apps are not currently supported for that platform

  4. Version • We’ll be covering iOS6.0 and Xcode 4.x • The current “official version” is iOS 7.2 and Xcode 5 • Version 6.0 was released on September 19, 2012 • Version 7.0 was released in October 2013 • A major release with over 200 new features • iOS 7 changes the interface quite drastically

  5. iOS platform • The iOS platform is made up of several layers • The bottom layer is the Core OS • OS X Kernel, Mach 3.0, BSD, Sockets, File System, ... • The next layer up is Core Services • Collections, Address Book, SQLite, Networking, Core Location, Threading, Preferences, ...

  6. iOS platform

  7. iOS Platform

  8. Interface Builder • a graphical editor inside of XCode for creating graphical user interfaces (GUIs) • drag and drop interface • Can connect graphical components with properties defined in your source code • Interface Builder stores the user interface widgets that it creates in .xibfiles • .xibstands for “XML Interface Builder” • A .xib file is a text file (but you will never edit it directly) • When a .xib file is copied over to a device, it is converted to a .nib file (NeXT Interface Builder) which is stored in binary format to save space

  9. Interface Builder • Each component in a IB GUI is an instanceof the underlying UIKit classes • When you save a .xib file, you “freeze dry” the objects and store them on the file system • When your app runs, the objects get reconstituted (instantiated) and linked to an object in your running app (called a controller class)

  10. Example 1: hello iOS world! • This example is from Chapter 2 of Beginning iOS 6 Development, Mark, Nutting, LeaMarch, Olsson. • You should read the first 4 chapters over the next two weeks. • You can download the code from the book but I highly recommend that you do the examples yourself! • Chapter 2 contains much about Xcode. It’s a good review.

  11. Step 1 • Start a new project: New®Project • Select iOS®Application®Single View Application

  12. Step 2 NOTE: in Xcode 5, storyboards are no longer optional; you have to use them! • Next fill out options Any name Together, these are used by Xcode to create a bundle identifier (we’ll talk about this later) Used by Xcode to enter a copywrite in each code file Put in front of every class that Xcode creates for us. iPhone or iPad or both (Universal). Choose iPhone. Only check the second option at this time.

  13. Step 3 • Choose a place to save your project. • You do not need to create a git directory.

  14. Step 4 Orientations that your app can use. You can add an icon that will appear on the phone. Two possibilities; put mouse over to see pixel requirements There is an example icon and splash image on the class web page under Reference®Examples Just drag these onto the correct spots You can splash screen image that will appear on startup. Put mouse over to see pixel requirements

  15. Step 4 (cont) The CSViewControll.xib file (the xib part is pronounced “nib”) contains the view classes, i.e., the class that create what you actually see. Two classes are made for you. The first is the app that runs this program. The second is the class that runs the view

  16. Model-View-Controller • Paradigm used by most languages that create GUIs • Model: the classes that hold your application’s data • View: Made up of the windows, controls, and other elements that the user can see and interact with. • Controller: The code that binds together the model and view. It contains the application logic that decides how to handle the user’s inputs. • Note: everything is code! Each component in the view is a class that knows how and where to draw itself.

  17. Step 4 (cont) This is the navigation bar. Gives you several ways to navigate your code. You should never have to change this in simple apps. It loads the view controller class of the main view. These are the other things that your app needs; images, plist, etc. Your project may not look like this. Note the main.m file. Yes, this is C code so there is a “main” function. You should never never have to change this.

  18. Step 4 (where you do something) I’ll explain all the windows in class. See also chapter 2 of the Beginning iOS book. Click on the CSViewController.xib file. This is the main view, i.e., what the user will see. You’re in Interface Builder (IB) now.

  19. Step 5 Scroll through the library and find a Label object. Drag it to the middle of the view. Double click on it and change the text to “Hello World”

  20. With the label box selected, go to the Editor menu and choose Align®Horizontal Center in Container This will ensure that the text box is always constrained to be centered horizontally. Then do Align®Vertical Center in Container Step 6 If the Align options are grayed out, click on the first icon (called the File Inspector) and make sure that the Use Autolayoutcheckbox is checked. You should see blue horizontal and vertical lines. These represent constraints on the component. You can also see the constraints in the dock along with all of the components.

  21. Make sure the label is clicked Click on the 4th icon (the attributes inspector) You’ll see lots of ways to play with the appearance of the label. Change some things. Step 7 4. Next click on the View in the dock and change its background color.

  22. Step 8 Make iPhone 6.0 Simulator is chosen. Click on the run button. You should see something like the next slide.

  23. Hello World!

  24. Interaction • Must create links between the visual and the controller. • Variables and Methods in the controller will be linked to the components in IB • IBOutlet: special term that indicates to Xcode that a variable will be linked to a component. • Use in the .h file. • NEW! Don’t have to declare an instance variable, can just create an outlet by declaring a property: @interface CMPViewController : UIViewController{ } @property (weak,nonatomic) IBOutletUIButton *sayHello; @end

  25. Adding a buttonstep 1 Clic on the CMPViewController.h file Add the two properties and method shown above.

  26. Adding a buttonstep 2 Scroll through the library and find a Rounded Rect Button object. Drag it below the label. Double click on it and change the text to “Say Hello” Then find a Text Field object. Drag it below the label. Double click on it and change the text to “Your Name”

  27. Adding a buttonstep 3 Select the connections inspector button (last one) or choose View®Utilities®Show Connections Inspector Or hit Alt Cmd 6 1. Make sure the text field is selected in the dock. 3. Under the Referencing Outlets click in the circle and drag to File’s Owner A pop-up menu should appear. Choose the name of your IBOutlet property (in the slides this was called theName)

  28. Adding a buttonstep 3 Select the connections inspector button (last one) or choose View®Utilities®Show Connections Inspector Or hit Alt Cmd 6 1. Make sure the text field is selected in the dock. 3. Under the Sent Events click in the circle next to Did End on Exit (first choice) and drag to File’s Owner A pop-up menu should appear. Choose the method textFieldDoneEditing)

  29. Adding a buttonstep 4 Select the connections inspector button (last one) or choose View®Utilities®Show Connections Inspector Or hit Alt Cmd 6 1. Make sure the label field is selected in the dock. 3. Under the Referencing Outlets click in the circle and drag to File’s Owner A pop-up menu should appear. Choose the name of your IBOutlet property (in the slides this was called theLabel)

  30. Step 5 Select the connections inspector button (last one) or choose View®Utilities®Show Connections Inspector Or hit Alt Cmd 6 1. Make sure the button is selected in the dock. 3. Under the Sent Events click in the circle next to Touch Up Inside and drag to File’s Owner A pop-up menu should appear. Choose the name of your IBAction method (in the slides this was called sayHello)

  31. Run your code when you’re done here! Step 6 Clic on the CMPViewController.m file Add the code for the sayHello and textFileDoneEditing methods shown above.

  32. Final App

  33. Adding Style -(IBAction) sayHello: (id)sender{ NSString *myName = theName.text; NSString *baseString = @"Hello, "; NSString *plainText = [baseStringstringByAppendingFormat:@"%@!", myName]; // Now make the text bold NSMutableAttributedString *styledText = [[NSMutableAttributedStringalloc] initWithString:plainText]; NSDictionary *attributes = @{NSFontAttributeName : [UIFontboldSystemFontOfSize:theLabel.font.pointSize]}; NSRangenameRange = [plainTextrangeOfString:myName]; [styledTextsetAttributes:attributesrange:nameRange]; theLabel.attributedText = styledText; } This initializes a dictionary with one entry. The gets the first occurrence and length of the string myName in the string plainText This sets the attributes for a range of the string. Note that nameRangeis not a pointer. That’s because NSRange is a struct not a class!

  34. Closing the keyboard • Have seen how to activate the keyboard • What about touching the background? • Put an event on the background

  35. Step 1 Select the identity inspector button (last one) or choose View®Utilities®Show Identity Inspector Or hit Alt Cmd 3 1. Make sure the view is selected in the dock. Under the Class change to UIControl A UIControl is a subclass of a View class

  36. Step 2 Select the connections inspector button (last one) or choose View®Utilities®Show Connections Inspector Or hit Alt Cmd 6 1. Make sure the view is selected in the dock. 3. Under the Sent Events click in the circle next to Touch Down and drag to File’s Owner A pop-up menu should appear. Choose the name of your IBAction method (in the slides this was called textFieldDoneEditing)

  37. Run your code when you’re done here! Step 6 Clic on the CMPViewController.m file In the textFileDoneEditing method change [sender resignFirstResponder] to [theNameresignFirstRespoinder] as above.

More Related