3 User Interface Programming

7/28/2019 3 User Interface Programming

http://slidepdf.com/reader/full/3-user-interface-programming 1/38

amit.gula)@gmail.com 09/12/11

1

User Interface Programming

Amit Gulati

[email protected]

Basics of iPhone User Interface

2

Status Bar

Main Content

iPhone Applications

} Safari running on the iPhone Simulator

3

Status Bar

Navigation Bar

Tool Bar

Main Content

iPhone Applications

} Game Center application

4

Tab Bar

Status Bar

Main Content




2

Screen

Amit Gulati

[email protected]

Screen

} Pixel Size

6

960

320

3G(S)

640

480

iPhone 4

Screen

} Points

} Scale factor is applied, and used to get pixel dimensions.

7320 7

Points = 480

Pixels = 960

Points = 320

Pixels = 640

Points = 480

Pixels = 480

Points = 320

Pixels = 320

Scale = 1.0 Scale = 2.0

Screen

} Data structures used for defining geometry and dimensions

} CGPoint

} Represents a point in the 2-D coordinate system, i.e. x, y values.

} CGSize

}

Represents dimensions in a 2-D coordinate syste, i.e. width and height values.

8

struct CGPoint {CGFloat x; CGFloat y;

};

struct CGSize {CGFloat width;CGFloat height;

};




3

Screen

} Data structures used for defining geometry and dimensions

} CGRect

} Represent the location and dimensions of a rectangle.

struct CGRect {CGPoint origin;

CGSize size;};

CGPoint origin (x, y)

size.height

size.width

UIScreen

} UIScreen class is used torepresent the iOS device screen.

} Contains the screen bounds rectangleand the application frame.

} Useful in setting the size of window and

sub-views.

} Information about pixel scaling

} For Retina display and iPad.

} External Displays

} By default iOS devices has a single screen

(the main display).

} Device gets multiple screens if an externaldisplay is connected.

Bounds Rectangle

UIScreen

} Getting access to UIScreen objects associated with a device

} Following class methods return UIScreen objects

Returns the UIScreen object representing the main display (screen) of the

device.

Returns an array UIScreen objects representing the displays connected withthe device. UIScreen object at index “0” is the main display.

+ (UIScreen *) mainScreen

+ (NSArray *) screen

UIScreen

} Useful properties of the UIScreen

} Application Frame

} Represents screen space available toapplications.

} Main Screen minus Status bar.

} Property to read Application Frame

Getter returns a CGRect that represents

the application frame.

@property(nonatomic, readonly)CGRect applicationFrame

White portion represents the Application FrameApplication Frame height = 460 points, width = 320 points

Status Bar20 points




4

UIScreen


} Bounds

} Bounding rectangle of the Screen.

} Property to read bounds of screen

Getter return a CGRect that contains the screen bounds.

13

@property(nonatomic, readonly) CGRect bounds

Bounds of a Screen includes the entire size of screen, including the Status Bar

Bounds height = 480 points, width = 320 points

UIScreen


} Scale

} Represents the scale factor to be used for converting from point space topixel space.

Point Space

320

480

Screen Res.

320 x 480

Scale = 1.0

3G /3GS iPhone 4

Screen Res.

640 x 960

Scale = 2.0

UIScreen


} Property to read Scale

Getter returns a floating point scale factor.

@property(nonatomic,readonly) CGFloat scale

Windows and Views

Amit Gulati

[email protected]




5

Window

} iOS Window

} A window represents a geometric space on a screen.

} Do not themselves have any content to draw.

} Essentially a viewport for displaying information within the application.

} Container for application’s visible content.

} Responsibilities of Window

} Coordinate the display of Views.

} Delivery of touch events.

} Facilitate Orientation Changes.

17

Views will bediscussed in

detail.

Window

} iOS Window

} Has no visible features.} Essentially a blank space in which Application View hierarchy is rendered.

} An iOS Application needs at-least one window for drawing content

on screen.} Most applications require only a single window.

} Applications can have multiple windows if required.

} After the window is created, it stays the same and only the views displayed byit change.

¨ When you want to change the dis played content, you change the front most viewsof your window instead.

Most iOS applications follow the single window multiple view paradigm

UIWindow

} UIWindow class represents an iOS Window in the UIKitframework.

} Most iOS applications will have a single instance of UIWindow.

} Single Window, Multiple Views paradigm

} Created when the application starts up (programatically or via XIB file).

} Application Delegate class holds a reference to the UIWindow object.

} Deleted when the application is shutting down.

} Generally a UIWindow object will be created such that it covers theentire screen

} On the iPhone it does not make sense to split the UI into different Windows.

} On iPad there my be multiple Windows for a single screen.

} Generally not sub-classed.

} For most applications instances of UIWindow are used as it is.

} A Window generally covers the size of the Screen.

UIWindow

20

A Window

covering theentire screen

A Window withOrigin = (100, 100)

Bounds = (100, 200)




6

UIWindow

} UIWindow Class Hierarchy

NSObject

UIResponder

UIView

UIWindow

View

} Views are GUI building blocks.

} Pretty much everything that appears on the iPhone’s screen is a view.

} Views reside within windows and act like little canvases that you candraw graphical elements.

} View objects are responsible for

} Drawing Content.

} Handling Multi-touch events.

} Managing the Sub-Views.

} View Hierarchy} Views can contain other Views (sub-views).

} A View can have only a single parent View.

} Hierarchy represents a tree, with a Window or a View object at theroot.

22

View

} SDK provided vs Custom Views

} iOS SDK provides a large set of View objects that can be used to

build View hierchies

} User Interface Widgets (Label, TextField, Button, etc.)

} Scroll View, Table View, Image View, Web View

} Custom Views can also be created and be placed in the View

hierarchy.

} View and Window } View objects are added as sub-views to the Window object.

} A Window may contain

} A single View Hierarchy (if root View covers the entire screen)

} Multiple View Hierarchies

View

} Different Views in an Application – Dropbox Application




7

View

} View Hierarchy

View

Image View Table View

Parent View

Child Views

Table View CellTable View Cell

UIView

} UIView class represents a View in UIKit framework.

} The UIView class implements the basic behaviour used to facilitatedrawing in your applications.

} UIView objects can be used as it is in the View hierarchy

} Creates a blank View which can contain other Views.

} UIView can be sub-classed to create custom Views.

} UIView objects can contain other UIView objects or sub-views, and thusforming a hierarchy of Views (Parent Child relationship),

} Parents are called super-views

} Children called as sub-views.

26

UIView

} UIView Hierarchy

NSObject

UIResponder

UIView

UIImageView

UIWebView

UILabel UIControl

UIButton

UITextField

Other Controls

View Geometry

} Geometry of a View (or Frame)refers to the position and size of

the View.

} Position of the View i.e. Origin isdefined relative to the superviews (orparents) coordinate system.

} Size of the View is defined in points.

} Frame for a View is required wheninitializing a view and is defined usingCGRect data structure.

superview

View1

(75.0, 120.0)

(0.0, 0.0) Width = 300

H e i g h t =

4 0 0

Width = 100Height = 100

struct CGRect {CGPoint origin;

CGSize size;};




8

View Geometry

} Center point of a View refers tothe center of a View relative to

the superviews (or parents)

coordinate system.

} Center point is useful when the Viewneeds to be moved.

} Center point is defined using the

CGPoint data structure

superview

View1

(0.0, 0.0) Width = 300

H e i g h t =

4 0 0

(150.0, 200.0)

struct CGPoint {CGFloat x; CGFloat y;

};

View Coordinate System

} Default Coordinate System for View on iOS.

} When you want to add sub-views to the View or draw something on

the View

View Coordinate System

} Coordinate system (or Bounds) of aView

} Anything that is drawn inside a View has to bespecified relative to the bounds of the View.

} Position of a sub-view added to a View is basedon the bounds of that View (parent view).

} Any graphics that are drawn i.e shapes, imagesare drawn relative to the bounds or Coordinate

System of a View.

} Bounds of a View is defined using theCGRect data structure.

superview

View1

(0.0, 0.0)

Width = 100Height = 100struct CGRect {

CGPoint origin;

CGSize size;};

View Geometry and Coordinate System

32

(0, 0)Super view coordinate system

(30, 25)

(130, 125)

Frame ( (30, 25), (100, 100) )

(0, 0) 100

100

Bound ( (0, 0), (100, 100) )




9

UIWindow and UIView

Amit Gulati

[email protected]

UIWindow

} Creating a UIWindow

} Create a Windows based project template in Xcode

} Easiest way of creating a Window based iOS application.

} Using Interface Builder

} Adding a UIWindow object to the XIB file (MainWindow.xib)

} Programmatically

} Allocating and Initializing the UIWindow object

UIWindow – Creation and Initialization

} Using Window-based application project.

} New Project template selection



} Files generated




10



} Objects added to the MainWindow.xib


} Using XIB file

Steps

} Create UIWindow instance variable in the Application Delegate.

} Create an IBOutlet based property for the UIWindow instance variablein the Application Delegate.

} Using Interface builder, add a Window object to the MainWindow.xib

} Using Interface builder connect the IBOutlet (defined in the ApplicationDelegate) to UIWindow object.

}

Make the UIWindow instance key window and visible.


} Programmatically

Steps

} Initializing a UIWindow using the designated Initializer

Returns an instance of initialized UIWindow object.

aRect, CGRect that defines the position and si ze of rectangle enclosingthe window.

Origin is specified relative to the superviews (parents)coordinate system

- (id) initWithFrame: (CGRect) aRect

UIView

} Creating a UIView

} Create a View based project template in Xcode

} Easiest way of creating a Window based iOS application.

} Using Interface Builder

} Adding a UIView object to the XIB file (MainWindow.xib)

} Programmatically

} Allocating and Initializing the UIView object




11

UIView – Creating and Initialization

} Using View-based application project.

} New Project template selection



} Files generated



} Objects added to MainWindow.xib



} Objects added to ViewBasedProjectViewController.xib




12


} Programatically

} Allocating a UIView

} UIView is allocated using the “alloc” method (just like every other Objective-Cobject).

} Initializing a UIView

} Designated initializer for the UIView class is

- (id)initWithFrame:(CGRect)aRect

aRect, CGRect struct that represents the views frame.

45

CGRect buttonFrame = CGRectMake(25, 50, 100, 25);UIButton* button =[[UIButton alloc] initWithFrame:buttonFrame];

- (id)initWithFrame:(CGRect)aRect


} Programatically

} Suppose we initialize the View using the following frame

CGRect frame = CGRectMake(50, 100, 150, 200);

aView = [[UIView alloc] initWithFrame:frame];

46

UIView - Properties

} Defining Coordinate system of a View

} Bounds of a View defines the coordinates

@property(nonatomic) CGRect bounds

} Example

} To add subview to the View1

Specify the bounds coordinates.

CGPointMake(50.0, 50.0);

CGRectMake(10.0, 10.0, 40.0, 40.0);

superview

View1CGRect viewBounds =

CGRectMake(0.0, 0.0, 100.0,100.0);[view1 setBounds: viewBounds];

(0.0, 0.0)


@property(nonatomic) CGRect bounds

UIView - Properties

} Define Geometry of a View

} Frame property

} Size and origin of the View in thesuperview’s coordinate system.

@property(nonatomic) CGRect frame

} Example

superview

View1

(75.0, 120.0)

(0.0, 0.0) Width = 300

H e i g h t =

4 0 0


CGRect viewFrame =

CGRectMake(75.0, 120.0, 100.0, 100.0);[view1 setFrame: viewFrame];

@property(nonatomic) CGRect frame




13

UIView - Properties

} Define Geometry of a View

} Center property

} Center point of the View in superview’scoordinate system.

@property(nonatomic) CGPointcenter

} Example

superview

View1

(0.0, 0.0) Width = 300

H e i g h t =

4 0 0

(150.0,200.0)CGPoint viewCenter =

CGPointMake(150.0, 200.0);[view1 setCenter: viewCenter];

@property(nonatomic) CGPoint center

UIView - Properties

} A UIView can have only a single super view (parent)

} superview: Property used to get the super view of a View.

@property(nonatomic, readonly) UIView *superview

} A UIView can have multiple sub-views

} subviews : Property used to get access to the sub-views of a Views.

@property(nonatomic, readonly, copy) NSArray *subviews

} Creating a View Hiearchy

} Add a view as a child or sub-view

-(void) addSubView: (UIView*) a View

} Remove a view from the h ierarchy

-(void) removeFromSuperView

50

@property(nonatomic, readonly) UIView *superview

@property(nonatomic, readonly, copy) NSArray *subviews

-(void) addSubView: (UIView*) a View

-(void) removeFromSuperView

Custom View

} Most of the time the View objects provided by the UIKitshould be sufficient to build applications.

} However, there may be times where we would want to create

custom View objects for our applications.

} You can create a custom View by

} Sub-classing the UIView class and Overr iding the “drawRect” method

} Custom drawing in a UIView} Method that is over-ridden in a sub-class of the UIView class

-(void) drawRect : (CGRect) rect

rect, The portion of the view’s bounds that needs to be updated.

-(void) drawRect

Creating a View

} Starting with a Window based project

} Create a new Xcode project and select “Window Based Application”template.

} Name the project “SimpleView”

} Open the “MainWindow.xib” by double clicking on it.

} Open the Interface Builder library window (if not already open) andsearch for the “View object”




14

Creating a View


} Drag the View object onto the Window.

Creating a View


} The Interface Builder document window (for MainWindow.xib) shouldlook like the following.

Creating a View


} Change the properties of the View and add other UI widgets to the Viewobject.

} Save the “MainWindow.xib”.

} Build and Run.

Creating a View

} Starting with a View based project

} Create a new Xcode project and select “View Based Application”

template.

} Name the project “SimpleView1”.

} View in this case is defined in a separate XIB file.

} This View is loaded by the View Controller class

56




15

Creating a Custom View


} Create a new Xcode project and select “Window Based Application”template.

} Name the project “SimpleSquareView”

} Add a new file, select “Objective-C class”, sub-class of “UIView”

} Name the class “SquareView”.



} In the “SquareView.m” file, implement the “initWithFrame” method.

} In the “SquareView.m” file, implement the “drawRect” method.



} Create the SquareView object in the Application Delegate class.



} Create the SquareView object in the Application Delegate class.




16

View Controllers

Amit Gulati

[email protected]

} Communication between the MVC components

Model View Controller Pattern (Recap)

62

Controller

Model View

(int value;)

View Controller

} In the MVC pattern, Controller provides the logic to bridge

application data with the View.

} In iOS, View controller is a special type of Controller that

provides the following capabilities

} Provides the functionality needed to create, display and manage one or

more views.

}

A view controller is the sole owner of its view and any associated sub-views.} Responsible for creating those views and for releasing them at the appropriate times

} Orientation changes,

} Low memory notifications, and

} Smooth transitions between different views.

63

View Controller

} View Controller is represented by the classUIViewController .

} UIViewController is the base class for all View Controllers

defined in the UIKit framework.

} UIViewController is generally never used as it is.

} UIViewController is sub-classed to create Custom View Controller.

} UIViewController class defines the following property which isset to the UIView object that is managed by the View

Controller.@property(nonatomic, retain) UIView *view

64




17

View Controller

} Almost every iOS application has a Custom View Controllerto create, manage Views and synchronize then with data.

} A Custom View Controller usually manages a single View

hierarchy.

} If you have multiple View hierarchies, you should have multiple ViewControllers.

Custom ViewController

(UIViewController)

View

SubView

Application Delegate

Data

SubView

view

ActionMethods

View Controller

} Custom View Controller generally includes the following

} Member variables pointing to objects that contain data (to be

displayed by the View).

} Member variables (IBOutlets) to the View and Subviews that theView Controller must interact with.

} Action methods (IBAction) that are executed as a result of userinteracting with the application User Interface.

} Overridden Methods of the base UIViewController class to handle

View initialization, loading, unloading etc.

} Methods to handle device orientation.

View Load/Unload Handling

} Loading a View} Some part of the application accesses the “view” property of a View

Controller.

} If UIView object pointed to by the “view” property is not in memory,

View Controller calls its “loadView” method.

} loadView method

} If you override the “loadView” method in your View Controller class

¨ Your implementation is responsible for creating the View for the ViewController and setting the “view” property.


} Loading a View } loadView method

} If your custom View Controller does not provide an implementation of “loadView” method

¨ The default implementation of the method will use “nibName” and“nibBundle” property and try to load View defined in the “.nib” file.

¨ If “.nib” file defined by “nibName” property is not found, it will look for“.nib” file that has the same name as the View Controller, and load Viewdefined in that file.

} Finally “viewDidLoad” method is called for any custom loadtime tasks.

loadView method should not be directly called. It is called by the framework.Don’t override loadView method if you want to load View from XIB file




18


} Load a View


} Un-Loading a View

} Application receives a low memory warning.

} View Controllers call “didReceiveMemoryWarning” method.

} “didReceiveMemoryWarning” method

} If you have provided an overridden implementation of the“didReceiveMemoryWarning” method to some custom cleanup, call the superclasses “didReceiveMemoryWarning”.

} Default implementation of “didReceiveMemoryWarning” releases the view if required.

} If the View is unloaded by the View Controller, it calls“viewDidUnload” method.

} Override this method to do custom cleanup, for example: releasing the

IBOutlets.


} Unloading a View

View Visibility Handling

} An application consists of multiple Screens that are managedby multiple View Controllers.

} On the iPhone at a time content of a View hierarchy is visible

to the user.

} Some action might be required when a View is not visible to

the user or becomes visible to the user.

} Example: If the View is not visible to the user, any animations,rendering should be stopped.

} View Controller contains methods that are called when a View

hierarchy associated with the View Controller becomes visibleor hidden.




19


} View becomes Visible} Method that is called right before the View is about to become visible.

- (void) viewWillAppear : (BOOL) animated

animated , YES if the view is being added to the window using an animation.

You can override this method to perform custom tasks associated withpresenting the view, you must call super at some point in yourimplementation.

} Method that is called right after the View becomes visible

- (void) viewDidAppear: (BOOL) animated

animated , YES if the view was added to the window using an animation.You can override this method to perform additional tasks associated withpresenting the view. If you override this method, you must call super at somepoint in your implementation.

- (void) viewWillAppear : (BOOL) animated

- (void) viewDidAppear: (BOOL) animated


} View becomes visible


} View becomes hidden

} Method that is called right before the View is about to be dismissed.

- (void) viewWillDisappear: (BOOL) animated

animated , YES if disappearance of the view is being animated.

You can override this method to perform additional tasks associated withdismissing or hiding the view. If you override this method, you must call superat some point in your implementation.

} Method that is called right after the View has been hidden

- (void) viewDidDisappear: (BOOL) animated

animated , YES if disappearance of the view is being animated.

You can override this method to perform additional tasks associated withdismissing or hiding the view. If you override this method, you must call superat some point in your implementation.

- (void) viewWillDisappear: (BOOL) animated

- (void) viewDidDisappear: (BOOL) animated


} View becomes Hidden




20

View Controller Programatically

} Initializing a View Controller

} Designated Initializer for the UIViewController class

- (id) initWithNibName: (NSString *) nibNamebundle: (NSBundle *) aBundle

nibName, Name of the XIB file (View XIB) to load.

If “nil” is specified, the name of the UIViewController sub-class is

used as the nibName.

aBundle, The bundle in which to search for the nib file.

If “nil” is specified then the XIB file is searched in the main resource bundle.

“view” property for the View Controller is automatically set to the View thatis specified in the XIB fil.

If a file named nibName is not there in the resource bundle then loadView method

is called to allow creating of View object for the View Controller.

77

- (id) initWithNibName: (NSString *) nibNamebundle: (NSBundle *) aBundle

View Controller

} Initializing a View Controller

} If the View for the View Controller is not defined in an XIB file. Use

the “init” method to initialize the View Controller.

-(id) init

} Methods to manage View associated with the View Controller

} Creating the View manually and not from the nib file

-(void) loadView

If you create your views manually, you must override this method and use it

to create your views.

Set the “view” property of the View Controller to point to the View createdin this method.

78

-(void) loadView

-(id) init

View Controllers

} There are two mutually exclusive ways to specify the viewsmanaged by a View Controller

} Manually

} Using a XIB (or nib file)

} Manually creating a View Controller

} Create a sub-class of UIViewController class.

} Pass “nil” into the initWithNibName method for the nib name.

} Override the loadView method and add code that will create the view.

} Set the “view” property of the UIViewController object to the UIViewobject created.

79

Working with View Controllers - Manual

} Create a new “Window Based Application” project.

} Add a new “UIViewController subclass” under the “Cocoa

Touch Class” pane, and name it “MyViewController”.

80




21

Working with View Controllers-Manual

} Add a new Objective-C class that is a sub-class of UIView tothe project.

} Now we have the classes and files added to the project.

} MyView class implementation

81

Working with View Controllers-Manual

} MyView class implementation

82

Working with View Controller-Manual

} MyViewController implementation

83


} MyViewControllerAppDelegate implementation

84




22


} MyViewControllerAppDelegate implementation

85


} main.m implementation

86


} Build & Run

87

z +Right Arrow

Working with View Controller-Using IB

} Create a new “Window based project” for iPhone.

} Name the project MyViewControllerIB.

} Double click on the MainWindow.xib to open theMainWindow.xib window in Interface Builder.

88




23


} Drag a View Controller from the Library Window to theMainWindow.xib window

89


} Add new file to the project

} Select “UIViewController subclass” under the “Cocoa Touchclass” templates.

} Make sure that the “with XIB for user interface” is checked-off.

} Name the file “ViewControllerIB”.

} Two new files will be added to the project

} ViewControllerIB.h

} ViewControllerIB.m

} An empty shell implementation of class ViewControllerIBshould be there in the above listed files.

90


91

Working with View Controller – Using IB

} Add a new XIB file by right clicking on the resources folder inthe Xcode folder view.

} Select”View XIB”, under the “User Interface” template.

} Name the file MyViewIB.xib

92




24

Working with View Controllers – With IB

} Open the MainWindow.xib window by double clicking on theMainWindow.xib in the Xcode folder view.

} Select the View Controller that was added previously.

} Open the “Identity View” and set the class for the ViewController as “ViewControllerIB”;

} Open the “Attributes Inspector” window for the ViewControllerIB, and for the NIB Name drop-down list, select

“MyView”.

} Double-click MyView.xib in Xcode to edit it in InterfaceBuilder.

93


} For the View.xib

} Select the File’s Owner item and in its Identity Inspector window,

select the “ViewControllerIB” as its Class name.

} Control-click and drag the File’s Owner item to the View item.

} Add an image to the Project Resources.

} Add an Image View to the View window and configure theImage View to show the image resource.

94


} Modify the Application Delegate class to add View to theWindow.

} MyViewControllerIBAppDelegate.h

95

Working with View Controllers-with IB

} Modify the Application Delegate class to add View to the

Window.

} MyViewControllerIBAppDelegate.m

96




25

Working with View Controllers-using IB

} In the MainWindow.xib window, Control-click and drag the MyView ControllerIB App Delegate item to the View Controller

item IB and select viewContIB.

97

Device Orientation

Amit Gulati

[email protected]

Introduction

} Following Orientations are supported by iOS

} Portrait

} Portrait Upside Down (Not supported on iPhone)

} Landscape Left

} Landscape Right

} An application can

} Specify the start-up orientation.

} Handle Orientation changes (or remain only in one orientation)

} Not support certain orientations

} Use the same View

} Load a different View, if landscape and portrait modes are very different.

Application Orientation

} Default orientation for an application is Portrait uprightorientation.

} By default application does not handle changes in orientation

of the device

⌘ + Left Arrow




26


} Startup orientation

} Add the following key-value pair to the projects Info.plist file.

} Key

} Values for the key can be one of the following

“Initial Interface Orientation” or UIInterfaceOrientation

Portrait (bottom Home button) or UIInterfaceOrientationPortrait

Portrait (top Home button) or UIInterfaceOrientationPortraitUpsideDown

Landscape (left Home button) or UIInterfaceOrientationLandscapeLeft

Landscape (right Home button) or UIInterfaceOrientationLandscapeRight


} Changing startup orientation

} Making changes to the Info.plist file will make the status bar show up inlandscape mode.

} However the View is still in Portrait mode.


} Changing View Orientation

} Accelerometer in iOS devices makes it possible to determine theorientation of the device.

} Device Rotation notification is trapped by the UIKit framework.

} Framework in conjunction with the Window object gives a chance toView Controller of the currently displayed view to take some action.

} View Controller that is managing the View currently being displayed is

asked if it is OK to rotate the view to the new orientation.} If the View controller responds in YES, View is rotated

} If the View controller responds in NO, View is not rotated and current orientationof the View is maintained.

} By default the View Controller responds with a NO.



} Method in UIViewController that is used to specify View orientationchange.

BOOL, Returns a boolean type.

YES, for each of the orientation type supported.

NO, otherwise.

orient, Current orientation of the device.

} To support Landscape Orientation,

} Implement the above method in the View Controller for the View that you wantto rotate.

} Return YES for all orientations that you want to support.

- (BOOL) shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation) orient




27



} Default implementation of the method in View Controller (iPhoneproject type).

} Default implementation of the method in View Controller (iPad projecttype).

In iPad, applications should support all orientations.



} Supporting Landscape Orientation

} The View has been rotated to Landscape orientation (Right).

View has beenrotated, however

the placement of text is not right


} Autosizing

} When a View orientation changes,most controls stay where they arerelative to the top-left side of thescreen.

} We can change this default behavior,and have the controls behavedifferently when orientation changes.

} “Size tab” in the Inspector Window of Interface Builder is used to change theAutosize behavior of controls.


} Autosizing

} Select the control for which you want to change the Autosize

behavior and bring up the Inspector window.

⌘ + 3




28


} Autosizing

} Grey box symbolizes the control for whichwe want to set properties.

} The solid bar line (outside the grey box),means the distance will not change.

} The dashed bar line (outside the grey box),means distance will change based on newsize available.

} The dashed arrow line (inside grey box),means size in that direction will notchange.

} The solid arrow line (inside the grey box),means size in that direction will changeaccording to the extra space available


} Autosizing

} Changing the Autosizing property


} Autosizing

} After changing the autosizing property of the text.


} Custom actions for Orientation change

} Sometimes you want more fine grain control of how your controls

are aligned when the phone orientation changes.

} View Controller class contains methods that allow some customizedhandling of View while the View is rotating.

} These methods allow us to run some custom code in order to

configure the View or load a new View for different or ientations etc.

- (void) willRotateToInterfaceOrientation: (UIInterfaceOrientation) toInterfaceOrientation

duration: (NSTimeInterval) duration

- (void) didRotateFromInterfaceOrientation:(UIInterfaceOrientation) fromInterfaceOrientation




29


} Custom actions for Orientation change

} Method called right before the View is rotated

} Implement custom code before the view is animated for new orientation.

} Good place to configure the UI controls on the View, swap the View withanother one, stop video playback, animations etc.

toInterfaceOrientation,New Orientation.

duration, Duration of pending animation.

} Method called after the View has been rotated.} Good place to restart video playback, animations etc.

- (void) willRotateToInterfaceOrientation: (UIInterfaceOrientation) toInterfaceOrientation

duration: (NSTimeInterval) duration

- (void) didRotateFromInterfaceOrientation:(UIInterfaceOrientation) fromInterfaceOrientation


} Manual Restructuring of View

} When the user changes the orientation to landscape, the text should

be “Landscape Orientation”.

} Add a UILabel to the View Controller.

} Link the Label object in the Nib file with UILabel in View Controller code.

} Implement the following method in the View Controller.

Device Rotation

Basic UI Controls

Amit Gulati

[email protected]




30

Alerts and Action Sheets

} Both Alerts and Action sheets are used as a feedback mechanism for the user

} Alerts

} Alerts appear as a blue rounded rectangle in the middle of the

screen.

} Alert views are used to display an alert message to the user.

} Alert message consists of a title, a brief message, and one or morebuttons.

} Alerts force users to respond before they are allowed to continueusing their application

117

Alerts and Action Sheets

} Action Sheets

} Action sheets are used to force the user to make a choice between twoor more items.

} Action sheets differ from Alerts because of how they look and arepresented to the user.

} The action sheet comes up from the bottom of the screen and displays aseries of buttons for the user to select from.

} Action sheets require a parent View object.

118

Alerts

} UIAlertViewclass is used to encapsulate an Alert View.

} UIAlertViewclass is a sub-class of the UIView class.

} Method used to initialize an Alert View- (id) initWithTitle: (NSString *)title

message: (NSString *)messagedelegate: (id<UIAlertViewDelegate>)delegate

cancelButtonTitle: (NSString *) cancelButtonTitleotherButtonTitles: (NSString *)otherButtonTitles

title, String used as the title for the alert view.

message, Message is a descriptive text providing more details about thepurpose of the alert view.

delegate, Pointer to an object that conforms to the UIAlertViewDelegateprotocol.

cancelButtonTitle, Title of the cancel button used to dismiss the alert view. 119

- (id) initWithTitle: (NSString *)titlemessage: (NSString *)messagedelegate: (id<UIAlertViewDelegate>)delegate

cancelButtonTitle: (NSString *) cancelButtonTitle

otherButtonTitles: (NSString *)otherButtonTitles

Alerts

} UIAlertViewDelegate is a protocol that contains functionsthat are called by the Alert View in order to notify about Alert

View events.

} Method in UIAlertViewDelegate protocol that notifies thebutton that was clicked by the user.

- (void) alertView: (UIAlertView *)alertView clickedButtonAtIndex: (NSInteger) buttonIndex

alertView, Pointer to the alert view object.

buttonIndex, Index (beginning at 0) of the button on the alert view

that was clicked by the user.

120

- (void) alertView: (UIAlertView *)alertView clickedButtonAtIndex: (NSInteger) buttonIndex




31

Alerts

} Example

121

Action Sheet

} UIActionSheet

} UIActionSheet class is used to encapsulate the Action Sheet.

} UIActionSheet also inherits from the UIView class.

} Method used to initialize UIActionSheet

- (id) initWithTitle : (NSString *)titledelegate:(id<UIActionSheetDelegate>)delegate

cancelButtonTitle: (NSString *)cancelButtonTitledestructiveButtonTitle:(NSString *)destructiveButtonTitle

otherButtonTitles: (NSString *)otherButtonTitles

title, Title of the action sheet.delegate, Pointer to an object that conforms to

UIActionSheetDelegate protocol.

cancelButtonTitle, Title of the cancel button.

destructiveButtonTitle, Title of button displayed in red.

122

- (id) initWithTitle: (NSString *)titledelegate: (id<UIActionSheetDelegate>) delegate

cancelButtonTitle: (NSString *) cancelButtonTitledestructiveButtonTitle: (NSString *) destructiveButtonTitle

otherButtonTitles: (NSString *) otherButtonTitles

Action Sheet

} Example

123

Progress View

} It is always a good idea to provide feedback to the userregarding activities that are happening in your application.

} This is especially true when there are operations that take

time to complete.

} A progress indicator shows the user how much of a task has

been performed and how much is pending.

124




32

Progress View

} UIProgressView

} UIProgressView class is used to encapsulate the progress View.

} Method that is used to initialize a Progress View

- (id)initWithProgressViewStyle: (UIProgressViewStyle) style

style, A constant that specifies the style of the object to be created.

} Example

125

- (id)initWithProgressViewStyle: (UIProgressViewStyle) style

UIProgressView *progressView =[[UIProgressView alloc]

initWithProgressViewStyle:UIProgressViewStyleDefault];

CGRect progressFrame = CGRectMake(10, 100, 300, 25);

[progressView setFrame:progressFrame];

[self.view addSubView:progressView];

Progress View

} Example

126

Common Controls

} Controls are graphical objects used by the user of theapplication to express their objective.

} Cocoa Touch provides a rich array of User Interface controls

like Text Fields, Buttons, Labels, Sliders etc.

} All iOS controls can trigger multiple actions depending on

how they are touched

} User might trigger a different action with a finger swipe across thecontrol than with just a touch or tap.

127

Common Controls

128




33

UIControl Class Basics

} Each of the controls inherits (or is a sub-class) of theUIControl class.

} UIControl class encapsulates the common behavior of the

controls.

} You cannot directly instantiate an object of type UIControl,

but only its concrete sub-classes.

} Some common properties that are useful when programming

using Controls

} enabled : Boolean attribute that represents whether a control isenabled or not.

@property(nonatomic, getter=isEnabled) BOOL enabled;

129

@property(nonatomic, getter=isEnabled) BOOL enabled

UIControl Class Basics

} Some common properties that are useful when programmingusing Controls

} highlighted : Boolean attribute that represents whether a control ishighlighted or not.

@property(nonatomic, getter=isHighlighted) BOOL highlighted;

} state: Bit-mask constants that specify the state of the UIControlobject.

@property(nonatomic, readonly) UIControlState state;

} UIControl States can be one of the following or a combination (bit-mask)¨ UIControlStateNormal UIControlStateSelected

¨ UIControlStateHighlighted UIControlStateReserved

¨ UIControlStateDisabled

130

@property(nonatomic, getter=isHighlighted) BOOL highlighted

@property(nonatomic, readonly) UIControlState state

Target-Action Mechanism

} Merely drawing User controls on the screen will serve nopurpose.

} The User controls must do something as a result of theuser interacting with the controls. i.e. User tapping theButton control etc.

} View Controller objects interact with View and its

contained User controls to make things happen as aresult of user events.

131

Target-Action mechanism

} When a View Controller object is interested in a User Controlevent (button tap), it registers itself to the control.

} To register with a User control we require the following

} A pointer to the object (target) that should receive the message.

} The selector (action) representing the action method.

} The control event we are interested in.

} An object registers with a User control using the followingUIControl method

- (void) addTarget : (id) target action:(SEL)actionforControlEvents:(UIControlEvents) controlEvents

132

- (void) addTarget: (id) targetaction: (SEL) action

forControlEvents:(UIControlEvents) controlEvents




34

Target-Action mechanism (manual)

} Method used to register with a User control- (void) addTarget :(id) target action:(SEL) action


target, the instance registering for this event.

action, The action is a selector that identifies the action message of the target.-(void) action-(void) action: (id)sender -(void) action: (id)sender forEvent: (UIEvent *)event

forControlEvents,The controlEvents is a bit-mask specifying the control eventsthat

trigger the sending of an action message to the target.Some common ones are:UIControlEventValueChanged UIControlEventEditingDidBeginUIControlEventEditingDidEnd UIControlEventTouchDown

133

- (void) addTarget: (id) targetaction: (SEL) action


Common Controls

} Text Field

} Text field is an editing control that allows the user to enter a small

amount of information. } Represented by the UITextField class.

} Some important Properties of Text Field

} text : You can obtain and set the text displayed by the control.

@property(nonatomic, copy) NSString *text;

} textColor : The color of the text inside the control.

@property(nonatomic, retain) UIColor *textColor ;

} background : An image that represents the background of the control.

@property(nonatomic, retain) UIImage *background;

} borderStyle : This property is used to set the border style of the control. @property(nonatomic) UITextBorderStyle borderStyle

134

@property(nonatomic, copy) NSString *text

@property(nonatomic, retain) UIColor *textColor

@property(nonatomic, retain) UIImage *background

@property(nonatomic) UITextBorderStyle borderStyle

Common Controls

} Text Field

} The UITextField class conforms to the UITextInputTraits

protocol which contains properties related to how the keyboard isdisplayed.

} Some Keyboard related properties

} keyboardType : This property controls the style of the keyboard associated

with the text field.

@property(nonatomic) UIKeyboardType keyboardType;Types of Keyboards include :

UIKeyboardTypeDefault. UIKeyboardTypeURL

UIKeyboardTypeAlphabet UIKeyboardTypeNumberPad

UIKeyboardTypeNumbersAndPunctuation UIKeyboardTypePhonePad

135

@property(nonatomic) UIKeyboardType keyboardType

Common Controls

} Text Field

} Some Keyboard related properties

} secureTextEntry: This property is used to signal that the text entered should behidden, eg: replaced by ‘*’. @property(nonatomic, getter=isSecureTextEntry) BOOL secureTextEntry ;

} autocapitalizationType : Determines when the shift key is automatically pressed

to produce capital letters.

@property(nonatomic) UITextAutocapitalizationType autocapitalizationType;

Values for this property include:

¨ UITextAutocapitalizationTypeNone(do not automatically capitalize)

¨ UITextAutocapitalizationTypeWords(capitalize the first character of every word)

¨ UITextAutocapitalizationTypeSentences (capitalize the first character of each sentence)

¨ UITextAutocapitalizationTypeAllCharacters (capitalize all characters automatically)

136

@property(nonatomic, getter=isSecureTextEntry) BOOL secureTextEntry

@property(nonatomic) UITextAutocapitalizationType autocapitalizationType




35

Common Controls

} Text Field

} Example of Keyboard Types

137

Common Controls

} Using Text Fields

} Reading data from text fields

} Declare a UITextField* variable in the @interface section of View Controllerclass.

UITextField *textField;

} Create an Outlet

@property (nonatomic, retain) IBOutlet UITextField *textField;

} Synthesize the property in the @implementation class

@synthesize textField;

} Connect the Outlet to the Text Field in the View, using the Interface Builder.

} To read text from the Text Field, use the “text” property of UITextField class.

NSString *string = textField.text;

138

UITextField *textField;

@property (nonatomic, retain) IBOutlet UITextField *textField;

@synthesize textField;

NSString *string = textField.text;

Common Controls

} Slider} Control used to select a single value from a continuous range of values.

} Represented by the class UISlider .

} Properties needed to set up a slider.

} value : This attribute contains the current value indicated by the slider.

@property(nonatomic) float value;

} minimumValue : Contains the minimum value of the slider control. @property(nonatomic) float minimumValue;

} maximumValue : Contains the maximum value of the slider control. @property(nonatomic) float maximumValue;

} continuous : A Boolean attribute controlling how frequently the slider s endsupdates with its current value to the associated target-action. @property(nonatomic, getter=isContinuous) BOOL continuous;

139

@property(nonatomic) float value

@property(nonatomic) float minimumValue

@property(nonatomic) float maximumValue

@property(nonatomic, getter=isContinuous) BOOL continuous

Common Controls

} Switches

} Control that allows you to present an on/off switch to the user. Thiscontrol is similar to the check box.

} Represented by the UISwitch class.

} Some common properties of switches

} on : This property is used to store the current state of the switch.

@property(nonatomic, getter=isOn) BOOL on;

} Some common functions of UISwitch class} If you have connected the UISwitch to an Outlet in the View Controller, you

can call functions on the UISwitch object.

} setOn : This method allows you to set the switch's s tate.

-(void) setOn: (BOOL) on animated: (BOOL) animated ;

140

@property(nonatomic, getter=isOn) BOOL on

-(void) setOn: (BOOL) on animated: (BOOL) animated




36

Common Controls

} Using Switches

} Target-Action

} Declare an Action method in the @interface section of the View Controllerclass header (.h) file.

-(IBAction)switchChanged : (id) sender ;

} Implement the Action method in the @implementation section of the View

Controller class implementation (.m) file.

} Attach the action method to the Switch control Value Changed event

using the Interface Builder.

} The action method will be called when the switch is changed.

141

Common Controls

} Using Switches

} Outlet

} Declare a UISwitch pointer in the @interface section of the View Controllerclass.

UISwitch *switch;

} Declare an Outlet for the UISwitch

@property (nonatomic, retain) IBOutletUISwitch * switch;

} Synthesize the UISwitch property

@synthesize switch;

} Connect the Outlet to the Slider control in the View using the InterfaceBuilder.

142

Common Controls

} Buttons} Buttons are used to trigger some kind of action when the user taps on

them.

} Button is represented by the UIButton class.

} Following types of Buttons can be created

¨ UIButtonTypeRoundedRect. This style is used to produce a rounded-rectangle button.

¨ UIButtonTypeDetailDisclosure. This style produces a detail disclosurebutton.

¨ UIButtonTypeInfoLight. This style produces an information button that hasa light background.

¨ UIButtonTypeInfoDark. This style produces an information button that hasa dark background.

¨ UIButtonTypeContactAdd. This style produces a contact add button.

143

Picker View

} A Picker View allows the user toselect a value from multiple values

using a wheel type control.

} Each Picker View consists of oneor more components, each

consisting of one or more rows.

} Each component can be spun

independently of the other to

select value.

} A common use of Picker View is to

select a date or time.




37

Picker View

} UIPickerView class is used to encapsulate a Picker View.

} UIPickerView defines the following properties

} dataSource

@property(nonatomic, assign) id<UIPickerViewDataSource> dataSource

The object that is assi gned to the dataSource property must implement theUIPickerDataSource protocol.

dataSource property is used by the UIPickerView control to get informationabout the number of components in a Picker View and number of rows in each

component.

UIPickerViewDataSource protocol has the following method

- (NSInteger) numberOfComponentsInPickerView:(UIPickerView *)pView

- (NSInteger) pickerView: (UIPickerView *) pView numberOfRowsInComponent:(NSInteger) component

@property(nonatomic, assign) id<UIPickerViewDataSource> dataSource

- (NSInteger) numberOfComponentsInPickerView:(UIPickerView *)pView

- (NSInteger) pickerView: (UIPickerView *) pView numberOfRowsInComponent:(NSInteger) component

Picker View


} delegate

@property(nonatomic, assign) id<UIPickerViewDelegate> delegate

The object that is assigned to this property must implement theUIPickerViewDelegate protocol.

delegate property is used for

} Getting the drawing rectangle for rows in each component.

} Provide the content for each component’s row, either as a string or a view.

} Responding to new selections or de-selections.

@property(nonatomic, assign) id<UIPickerViewDelegate> delegate

Picker View


} delegateUIPickerViewDelegate protocol has the following methods

- (CGFloat) pickerView: (UIPickerView *) pickerView rowHeightForComponent:(NSInteger) component

- (CGFloat) pickerView: (UIPickerView *) pickerView widthForComponent: (NSInteger) component

- (NSString *) pickerView: (UIPickerView *) pickerView

titleForRow: (NSInteger) row forComponent:(NSInteger) component

- (void) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) row inComponent: (NSInteger) component

Date Picker View

} SDK also provides pre-configured Picker Views, for exampleDate Picker View.

} Date Picker is used to select date and time.

} UIDatePicker class is used to encapsulate Date Picker.

} Properties of UIDatePicker

} datePickerMode

@property(nonatomic) UIDatePickerMode datePickerMode

Following are the UIDatePickerMode options

UIDatePickerModeTime,

UIDatePickerModeDate,

UIDatePickerModeDateAndTime,

UIDatePickerModeCountDownTimer



Documents

3 User Interface Programming