Stanford CS193p. Developing Applications for ios. Fall Stanford CS193p. Fall 2011

Similar documents
ios Mobile Development

Assignment III: Graphing Calculator

Mobile Application Development

ios Development Lecture 3 Controllers of View Controllers Ing. Simone Cirani

View Controller Lifecycle

Views. A view (i.e. UIView subclass) represents a rectangular area Defines a coordinate space

Assignment III: Graphing Calculator

View Controller Advancements for ios8

Assignment III: Graphing Calculator

ios Mobile Development

Assignment III: Graphing Calculator

Stanford CS193p. Developing Applications for ios. Winter CS193p! Winter 2015

Stanford CS193p. Developing Applications for ios. Spring CS193p. Spring 2016

Stanford CS193p. Developing Applications for ios. Winter CS193p. Winter 2017

Developing Applications for ios

Stanford CS193p. Developing Applications for ios. Spring Stanford CS193p. Spring 2012

Lecture 8 Demo Code: Cassini Multithreading

Object-Oriented Programming in Objective-C

Introductory ios Development

Stanford CS193p. Developing Applications for ios. Fall Stanford CS193p. Fall 2011

Advanced ios. CSCI 4448/5448: Object-Oriented Analysis & Design Lecture 20 11/01/2012

Computer Science 251. iphone Application Development. Autorotation, Popover Controllers, Modal Controllers

My First iphone App (for Xcode version 6.4)

User Experience: Windows & Views

Developing Applications for ios

S A M P L E C H A P T E R

ios 9 SDK Development

Stanford CS193p. Developing Applications for ios. Fall CS193p. Fall

ios DeCal : Lecture 2 Structure of ios Applications: MVC and Auto Layout

Structuring an App Copyright 2013 Apple Inc. All Rights Reserved.

Assignment II: Foundation Calculator

Learn to make desktop LE

Stanford CS193p. Developing Applications for ios. Spring CS193p. Spring 2016

1 Build Your First App. The way to get started is to quit talking and begin doing. Walt Disney

CSC 581: Mobile App Development Spring 2018

Stanford CS193p. Developing Applications for ios. Fall CS193p. Fall

lecture 10 UI/UX and Programmatic Design cs : spring 2018

Praktikum Entwicklung von Mediensystemen mit

PowerPoint 2003 for Windows Version Technology Workshop: Basic PowerPoint Animation for Music Presentations

CSE 438: Mobile Application Development Lab 2: Virtual Pet App

Building GUIs with UIKit. Kevin Cathey

Designing iphone Applications

A Mad Libs app that you will navigate through 3 UIViewControllers to add text that will be shown in a story on the fourth UIViewController.

Stanford CS193p. Developing Applications for ios Fall Stanford CS193p. Fall 2013

CS193P - Lecture 7. iphone Application Development. Navigation & Tab Bar Controllers

MVC & Onwards. CS 442: Mobile App Development Michael Saelee

Announcements. Today s Topics

ITP 342 Mobile App Dev. Interface Fun

Stanford CS193p. Developing Applications for ios. Winter CS193p. Winter 2017

ITP 342 Mobile App Dev. Connections

Registering for the Apple Developer Program

CSC 581: Mobile App Development Spring 2019

Assignment II: Calculator Brain

My First iphone App. 1. Tutorial Overview

ios Core Data Example Application

Stanford CS193p. Developing Applications for ios. Fall CS193p. Fall

News- ipad: ios(swift) Application

Navigation and Segues

ITP 342 Mobile App Dev. Interface Builder in Xcode

ios 101 Hands-On Challenges

Objective-C. Deck.m. Deck.h. Let s look at another class. This one represents a deck of cards. #import <Foundation/Foundation.h> #import "Deck.

OVERVIEW. Why learn ios programming? Share first-hand experience. Identify platform differences. Identify similarities with.net

ECDL Module 6 REFERENCE MANUAL

Objective-C. Stanford CS193p Fall 2013

Storyboards and Controllers on OS X

Why Model-View-Controller?

Stanford CS193p. Developing Applications for ios. Fall CS193p. Fall

Designer Reference 1

Praktikum Entwicklung von Mediensystemen mit

InDesign Part II. Create a Library by selecting File, New, Library. Save the library with a unique file name.

Introduction to WatchKit. CS193W - Spring Lecture 1

Introduction to Access 97/2000

Stanford CS193p. Developing Applications for ios. Winter CS193p! Winter 2015

Assignment I: Concentration

FACULTY AND STAFF COMPUTER FOOTHILL-DE ANZA. Office Graphics

Unit 21 - Creating a Navigation Bar in Macromedia Fireworks

SketchUp Tool Basics

ITP 342 Mobile App Dev. Web View

What's new in ios 5?

Using Microsoft Word. Paragraph Formatting. Displaying Hidden Characters

S A M P L E C H A P T E R

Creating a Template in WordPerfect

On the Web sun.com/aboutsun/comm_invest STAROFFICE 8 DRAW

Microsoft Excel 2007 Lesson 7: Charts and Comments

Rev. C 11/09/2010 Downers Grove Public Library Page 1 of 41

Stanford CS193p. Developing Applications for ios. Winter CS193p! Winter 2015

Lesson 1: Hello ios! 1

Excel Basics Rice Digital Media Commons Guide Written for Microsoft Excel 2010 Windows Edition by Eric Miller

Stanford CS193p. Developing Applications for ios. Fall CS193p. Fall

Mac OS X and ios operating systems. Lab 1 Introduction to Mac OS X and ios app development. Gdańsk 2015 Tomasz Idzi

ITP 342 Mobile App Dev. Connections

Customizing DAZ Studio

2. Sign the document with either your finger or a stylus. 3. Save and the signed PDF document to the desired party.

Guide - The limitations in screen layout using the Item Placement Tool

HKUST. CSIT 6910A Report. iband - Musical Instrument App on Mobile Devices. Student: QIAN Li. Supervisor: Prof. David Rossiter

Basic Concepts 1. For this workshop, select Template

GradeConnect.com. User Manual

ITP 342 Mobile App Dev. Table Views

SlickEdit Gadgets. SlickEdit Gadgets

Stanford CS193p. Developing Applications for ios. Winter CS193p. Winter 2017

Transcription:

Developing Applications for ios

Today UI Element of the Week UIToolbar ipad Split View Popover Universal (iphone + ipad) Application Demo Friday Section AVFoundation framework - Capturing and manipulating images.

UIToolbar Standard toolbar UI. Collection of UIBarButtonItems Just drag a UIToolbar out into your view (usually at the top or bottom of it). Then drag UIBarButtonItems into the toolbar and wire up outlets/actions to/from them. Has a default steel UI, but can be customized using bar style, background image, et. al. Custom toolbar with a background image which is a.png of a yellow square.

UIToolbar UINavigationController s To olbar One also appears at the bottom of a UINavigationController if its toolbarhidden @property = NO (then you set each UIViewController s toolbaritems @property to control which buttons (toolbaritems is an NSArray of UIBarButtonItems) Default value of toolbarhidden is YES. Switch to turn on Toolbar in Navigation Controller in Xcode Navigation Controller Toolbar PsychologistViewController s toolbaritems array contains a UIBarButtonSystemItemCamera.

UIToolbar UINavigationController s To olbar One also appears at the bottom of a UINavigationController if its toolbarhidden @property = NO (then you set each UIViewController s toolbaritems @property to control which buttons (toolbaritems is an NSArray of UIBarButtonItems) Default value of toolbarhidden is YES. Switch to turn on Toolbar in Navigation Controller in Xcode Navigation Controller Toolbar Click Here PsychologistViewController s toolbaritems array contains a UIBarButtonSystemItemCamera.

UIToolbar Switch to turn on Toolbar in Navigation Controller in Xcode UINavigationController s To olbar One also appears at the bottom of a UINavigationController if its toolbarhidden @property = NO (then you set each UIViewController s toolbaritems @property to control which buttons (toolbaritems is an NSArray of UIBarButtonItems) Default value of toolbarhidden is YES. HappinessViewController s toolbaritems array contains a Bordered button with the title Hello.

UIToolbar Switch to turn on Toolbar in Navigation Controller in Xcode UINavigationController s To olbar One also appears at the bottom of a UINavigationController if its toolbarhidden @property = NO (then you set each UIViewController s toolbaritems @property to control which buttons (toolbaritems is an NSArray of UIBarButtonItems) Default value of toolbarhidden is YES. Click Back HappinessViewController s toolbaritems array contains a Bordered button with the title Hello.

UIToolbar Switch to turn on Toolbar in Navigation Controller in Xcode UINavigationController s To olbar One also appears at the bottom of a UINavigationController if its toolbarhidden @property = NO (then you set each UIViewController s toolbaritems @property to control which buttons (toolbaritems is an NSArray of UIBarButtonItems) Default value of toolbarhidden is YES. Camera is back.

UIToolbar UIBarButtonItem Usually dragged out in Xcode, but can be created with various alloc/init methods. Target/Action like UIButton Bordered or Plain Title or Image (or Custom View) or use Built-in System Items: Fixed and Flexible Space Items All these buttons are System Items except Item in the middle. Centering with Flexible Spaces Using Flexible Space to Center an Item with other buttons left and right Using Flexible Space to Right Align Plain Style Bordered Style

UISplitViewController

UISplitViewController Just drag one out into an ipad Storyboard (only) If you don t see a Split View Controller in the Object Library, your storyboard is not ipad-style. You select which style of storyboard you have when you first create it (via New File... menu item). Split view is a base UI element only It only makes sense for the Split View to be the initial view controller of your application. You would (probably) never embed one in another view controller. You would only ever have one split view controller in your application. Setting/Getting the two view controllers Both view controllers are almost always set with ctrl-drag in Xcode. @property (nonatomic, copy) NSArray *viewcontrollers; // 0 is left (master), 1 is right (detail) It doesn t really make sense for this array to have anything but 2 UIViewControllers in it. Note that this is not a readonly @property. But also note that it forces you to set/get the both at the same time. It is copy so that you don t pass a mutable array and then try to modify it afterwards.

UISplitViewController Setting the Split View s delegate @property You must do this. Otherwise, the left side will be inaccessible in portrait mode. You usually do this in UIViewController method viewdidload (we ll talk about this method later). Either the master or the detail view controller may be the delegate depending on the situation. Three different options for how to deal with rotation... The delegate controls the split view s visual appearance @property (nonatomic, assign) id <UISplitViewControllerDelegate> delegate; The right side is always visible in a split view (we call it the detail view of the split view). The split view s delegate is asked about when the left side (the master ) should be on screen. When the left side is not on screen, you are responsible for displaying a UIBarButtonItem to show it (you will be provided with a UIBarButtonItem to use in as an argument to the delegate method). Notice assign pointer type. Should probably be weak. assign means weak without auto-zeroing. This means you can get a dangling pointer (though, in practice, this is unlikely in this case).

UISplitViewController Always hide left side behind a bar button - (BOOL)splitViewController:(UISplitViewController *)sender shouldhideviewcontroller:(uiviewcontroller *)master inorientation:(uiinterfaceorientation)orientation { } return YES; // always hide it

UISplitViewController Never hide left side behind a bar button - (BOOL)splitViewController:(UISplitViewController *)sender shouldhideviewcontroller:(uiviewcontroller *)master inorientation:(uiinterfaceorientation)orientation { } return NO; // never hide it

UISplitViewController Hide it in portrait orientation only - (BOOL)splitViewController:(UISplitViewController *)sender shouldhideviewcontroller:(uiviewcontroller *)master inorientation:(uiinterfaceorientation)orientation { return UIInterfaceOrientationIsPortrait(orientation); }

UISplitViewController If you forget to set the delegate, you ll get this... No button to bring up the left side in a popover!

UISplitViewControllerDelegate Handling the bar button item... This gets called in your delegate when the master gets hidden. - (void)splitviewcontroller:(uisplitviewcontroller *)sender { } willhideviewcontroller:(uiviewcontroller *)master withbarbuttonitem:(uibarbuttonitem *)barbuttonitem forpopovercontroller:(uipopovercontroller *)popover barbuttonitem.title = @ Master ; // use a better word than Master! // setsplitviewbarbuttonitem: must put the bar button somewhere on screen // probably in a UIToolbar or a UINavigationBar [detailviewcontroller setsplitviewbarbuttonitem:barbuttonitem]; You have to implement this. See? You are being provided the bar button item. You just need to put it on screen somewhere.

UISplitViewControllerDelegate When it is time for the bar button to go away... - (void)splitviewcontroller:(uisplitviewcontroller *)sender { } willshowviewcontroller:(uiviewcontroller *)master invalidatingbarbuttonitem:(uibarbuttonitem *)barbuttonitem // removesplitviewbarbuttonitem: must remove the bar button from its toolbar [detailviewcontroller removesplitviewbarbuttonitem:nil];

UISplitViewControllerDelegate Typical setsplitviewbarbutton: method Example of using a UIToolbar to show the bar button item. This both adds and removes because it stores the old bar button in a property (so setsplitviewbarbuttonitem:nil removes the existing one). - (void)setsplitviewbarbuttonitem:(uibarbuttonitem *)barbuttonitem { } UIToolbar *toolbar = [self toolbar]; // might be outlet or calculated NSMutableArray *toolbaritems = [toolbar.items mutablecopy]; if (_splitviewbarbuttonitem) [toolbaritems removeobject:_splitviewbarbuttonitem]; // put the bar button on the left of our existing toolbar if (barbuttonitem) [toolbaritems insertobject:barbuttonitem atindex:0]; toolbar.items = toolbaritems; _splitviewbarbuttonitem = barbuttonitem;

UISplitViewController So how does the detail get updated when master changes? Target/Action or Segue Target/Action Example (code in the master view controller): - (IBAction)doit { } id detailviewcontroller = [[self.splitviewcontroller viewcontrollers] lastobject]; [detailviewcontroller setsomeproperty:...]; Segue for split view entirely replaces the detail view controller Remember, segues always instantiate a view controller (split view stops strongly pointing to old one). Can Replace either side, but much more common to replace the right side (since it s the detail ). Be careful! You might Replace the toolbar that you put the split view bar button into! Need to be sure to put it back into the newly instantiated view controller before it goes on screen.

UISplitViewController (Somewhat) general bar button replacement on Replace segue Implement delegate in the master: call setsplitviewbarbuttonitem: in detail from delegate methods. Then transfer the bar button in prepareforsegue:sender: (along with updating the new detail VC). - (id)splitviewdetailwithbarbuttonitem { id detail = [self.splitviewcontroller.viewcontrollers lastobject]; if ([detail respondstoselector:@selector(setsplitviewbarbuttonitem:)] && [detail respondstoselector:@selector(splitviewbarbuttonitem)]) { } return nil; } - (void)transfersplitviewbarbuttonitemtoviewcontroller:(id)destinationviewcontroller { UIBarButtonItem *splitviewbarbuttonitem = [[self splitviewdetailwithbarbuttonitem] splitviewbarbuttonitem]; [[self splitviewdetailwithbarbuttonitem] setsplitviewbarbuttonitem:nil]; if (splitviewbarbuttonitem) [destinationviewcontroller setsplitviewbarbuttonitem:splitviewbarbuttonitem]; } - (void)prepareforsegue:(uistoryboardsegue *)segue sender:(id)sender { if ([segue.identifier isequaltostring:@"myreplacesegue"]) { [self transfersplitviewbarbuttonitemtoviewcontroller:segue.destinationviewcontroller]; [segue.destinationviewcontroller setsomeproperty:self.datatotransfertodetail]; } }

Popover Not a UIViewController, but displays one inside a rectangle @property (nonatomic, strong) UIViewController *contentviewcontroller; Also you can animate the changing of a popover that s already on screen with: - (void)setcontentviewcontroller:(uiviewcontroller *)vc animated:(bool)animated; Usually the above property is ctrl-dragged in Xcode This creates a Popover segue. In your prepareforsegue:sender: method, the arg will be iskindof:uistoryboardpopoversegue. The UIStoryboardPopoverSegue has a - (UIPopoverController *)popovercontroller @property. You can alloc/initwithcontentviewcontroller: one too Not very common, but not a bad thing. Segues are nicer because segues are essentially documentation of your UI in storyboards. Visible? You can tell whether a popover is currently visible with - (BOOL)popoverVisible;

Popover But you can also present a popover from code Popover has a little arrow that points to what (rectangle or button) brought it up. - (void)presentpopoverfromrect:(cgrect)arect or inview:(uiview *)view permittedarrowdirections:(uipopoverarrowdirection)direction animated:(bool)flag; or - (void)presentpopoverfrombarbuttonitem:(uibarbuttonitem *)barbuttonitem permittedarrowdirections:(uipopoverarrowdirection)direction animated:(bool)flag; Don t forget to keep a strong pointer to the popover controller! - (IBAction)presentPopover { UIPopoverController *pop = [[UIPopoverController alloc] initwithviewcontroller:vc]; [pop presentpopoverfrombarbuttonitem:item permittedarrowdirections:...]; } // BAD! no strong pointer to the popover controller! presenting it is not enough!

Popover Dismissing a popover automatically Dismissed automatically if the user clicks outside of the popover. Unless the user clicks in one of the views set by this UIPopoverController property: @property (nonatomic, copy) NSArray *passthroughviews; Dismissing a popover from your code - (void)dismisspopoveranimated:(bool)animated; You would call this when some interaction inside your popover s view controller results in dismissal. For example, the user presses OK or otherwise chooses something. Usually the object that put the popover up (the one that segued to it) dismisses it. How? Delegation. The view controller inside the popover sends a delegate method when it s done. So very often view controllers inside a popover have a settable delegate method in their API. Popover has delegate which gets notified on dismissal - (void)popovercontrollerdiddismisspopover:(uipopovercontroller *)sender; Only sent if the user dismisses the popover by clicking elsewhere (not programmatic dismissals).

Popover Size Three ways for a popover s size to be determined... Setting the size in Xcode Inspect a view controller. Now whenever this view controller appears in a popover, it ll be that size. Set contentsizeforviewinpopover in the content VC controller @property (nonatomic) CGSize contentsizeforviewinpopover; Or you could override it to calculate the size on the fly. Set the size by sending a message to the popover controller - (void)setpopovercontentsize:(cgsize)size animated:(bool)animated; This last one is pretty non-object-oriented. Presumably a view controller is more likely to know it s natural size than some other object.

Universal Applications A Universal application that will run on iphone or ipad Single binary image. How to create one In an existing ios 5 iphone project, select the project in the Navigator (on the left in Xcode) Change the Devices pull down under the Summary tab to be Universal. Then, lower down in that window, choose the storyboard for each platform. An ipad storyboard must be created as an ipad storyboard from the start (no conversion).

Universal Applications How do I figure out am I on an ipad? BOOL ipad = (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad); This is not a first-resort. You might well want to use other conditionals before using this. E.g., checking self.splitviewcontroller in your Controller to see if you re in a split view. We ll see some examples of other things to check on the next slide.

Universal Applications Code conditional on whether you re on screen Because there is room for more view controllers to be on screen at the same time on the ipad. E.g. left and right split view versus views that appear one at a time via navigation controller. A simple way to do that is to check a UIView s window property. If nil, then it s off screen. For example, this code snippet might appear in a UIViewController somewhere... if (self.view.window)... How big is the current screen? CGRect screenbounds = [[UIScreen mainscreen] bounds]; // in points Probably wouldn t want to check an exact size here, but maybe a threshold? What is the resolution of the view I m drawing in? Use UIView s @property (CGFloat) contentscalefactor.

Demo ipad Psychologist Two storyboards: one for iphone/ipod Touch, one for ipad. Share the MVC code (but different segues and layout in the two storyboards). UISplitViewController Watch for... A little bit more examples of struts and springs at the start (before we do ipad work). How we create a new storyboard and update our project settings to use both storyboards. Two different ways to update the right-hand side of a split view (target/action and Replace segue). How to control when split view hides the left-hand side of a split view behind a bar button.

Coming Up Homework You know everything you need to know now to do assignment 3! Next Lecture View Controller Lifecycle Scroll View, Image View, Web View Perhaps Tab Bar Controller, etc. Friday AVFoundation framework - Capturing and manipulating images.