CS193P - Lecture 8 pptx

Trang 1

CS193P - Lecture 8

iPhone Application Development

Trang 3

Announcements

¢ Enrolled students who requested iPod touches can pick them

up after class today

= Need Student ID

Trang 6

UIScrollView

¢ For displaying more content than can fit on the screen ¢ Handles gestures for panning and zooming

Trang 8

Using a Scroll View

¢ Create with the desired frame

CGRect frame = CGRectMake(0, @, 200, 200);

scroLLView = [[UIScrolLView alloc] initWithFrame: frame ];

¢ Add subviews (frames may extend beyond scroll view frame)

frame = CGRectMake(0, 0, 500, 500);

myImageView = [[UIImageView alloc] initWithFrame: frame];

[scroLLView addSubview:myImageView] ;

¢ Set the content size

Trang 9

Frame and Content

Trang 10

Frame and Content

Trang 11

Frame and Content

Trang 12

Demo:

Trang 13

Extending Scroll View Behavior

¢ Applications often want to know about scroll events

= When the scroll offset is changed = When dragging begins & ends

Trang 14

Extending with a Subclass

¢ Create a subclass

¢ Override methods to customize behavior

¢ Issues with this approach

- Application logic and behavior is now part of a View class

= Tedious to write a one-off subclass for every scroll view instance

Trang 15

Extending with Delegation

¢ Delegate is a separate object

¢ Clearly defined points of responsibility

= Change behavior

- Customize appearance

Trang 17

Implementing a Delegate

¢ Conform to the delegate protocol

@interface MyController : NSObject <UIScrolLViewDelegate>

¢ Implement all required methods and any optional methods

Trang 18

Zooming with a Scroll View

¢ Set the minimum, maximum, initial Zoom scales

scroLLView.maximumZoomScale = 2.0;

scroLLView.mrn1rmumZoomScgaLe = scroLLV1ew.s1ze.wtdth /

myImage.size.width;

¢ Implement delegate method for zooming

- (UIView *)viewForZoominginScrollView: CUIView *)view

i

return someViewThatW1LlBeScaled;

Trang 19

Demo:

Trang 21

Table Views

¢ Display lists of content

= Single column, multiple rows = Vertical scrolling

- Large data sets

Trang 22

Table View Styles UITableViewStylePlain AT&T 1:10 AM (an 1 Fingerlings 3 ips, Flight of the Conchords Flyin' Shoes

wae! Friend Opportunity

##y Frontin' On Debra (DJ

Trang 23

Table View Anatomy

Plain Style

9:42 AM

Table Header ———~> | Header

Trang 31

Using Table Views

Trang 33

A Naive Solution

¢ Table views display a list of data, so use an array

[myTablLeView setList:myListOfStuf Ff ];

¢ Issues with this approach

: All data is loaded upfront

Trang 34

A More Flexible Solution

¢ Another object provides data to the table view

= Not all at once

- Just as it’s needed for display

Trang 35

UlTableViewDataSource

¢ Provide number of sections and rows

// Optional method, defaults to 1 if not implemented

- CNSTnteger )numberOfSecttonsTnTabLeView:CUTTabLeView *)tabte; // Required method - CNSTnteger )tabLeV1ew:CUTTabLeView *)tabLeView numberOfRowsInSection: CNSInteger)section; Provide cells for table view as needed // Required method

Trang 40

Carrier

John Appleseed

Kate Bell Anna Haro

Datasource Message Flow

Trang 42

NSIndexPath

¢ Generic class in Foundation

Trang 43

NSIndexPath and Table Views

¢ Cell location described with an index path

= Section index + row index

¢ Category on NSIndexPath with helper methods

@interface NSIndexPath CUITableView)

+ CNSIndexPath *)indexPathForRow: CNSUInteger ) row

tnSection: CNSUInteger )section;

@propertyCnonatomic,readonly) NSUInteger section;

@propertyCnonatomic,readonly) NSUInteger row;

Trang 44

Single Section Table View

¢ Return the number of rows

- CNSTnteger )tabLeV1ew: CUTTabLeView *)tabLeView

numberOfRowsInSection: CNSInteger )section

i

return [myStrings count];

b

¢ Provide a cell when requested

- (UITableViewCeLl *)tableView: CUITabLeView *)tableView cel LForRowAtIndexPath: C(NSIndexPath *)indexPath

{

UITablLeViewCeLL *ceLl = .;

cell.text = LmyStrings objectAtIndex: tndexPath row ]

return [ceLL autorelease];

Trang 45

Cell Reuse

¢ When asked for a cell, it would be expensive to create a new cell each time

- (UITabLeViewCeLL *)tabLeView: CUITabLeView *)tabLeView

i cel LForRowAtIndexPath: C(NSIndexPath *)indexPath

Trang 46

Triggering Updates

¢ When is the datasource asked for its data?

= When a row becomes visible

Trang 47

Additional Datasource Methods

¢ Titles for section headers and footers

Trang 49

UlTableView Delegate

¢ Customize appearance and behavior

Trang 50

Table View Appearance & Behavior

¢ Customize appearance of table view cell

- (vo1id)tabLeView: CUITableView *)tablLeView wilLDispLayCeLL: UITabLeViewCeLL *)celLL forRowAtIndexPath: CNSIndexPath *)indexPath;

¢ Validate and respond to selection changes

- CNSIndexPath *)tablLeView: CUITabLleView *)tableView

willLSelLectRowAtIndexPath: CNSIndexPath *)indexPath;

- (vo1id)tabLeView: CUITableView *)tablLeView

Trang 51

Row Selection in Table Views

¢ In iPhone applications, rows rarely stay selected

¢ Selecting a row usually triggers an event

10:47 PM

All Contacts

Trang 52

Responding to Selection

// For a navigation hierarchy

(void)tabLeView: CUITabLeView *)tableView

didSeLectRowAtIndexPath: CNSIndexPath *)itndexPath

i

// Get the row and the object it represents

NSUInteger row = indexPath row

1d objectToDisplay = [myObjects objectAtIndex: row];

Trang 53

Altering or Disabling Selection

- CNSIndexPath *)tabLeView: CUITableView *)tableView

Trang 55

UlTableViewController

¢ Convenient starting point for view controller with a table view

= Table view is automatically created

- Controller is table view’s delegate and datasource

¢ Takes care of some default behaviors

: Calls -reloadData the first time it appears

Trang 56

Demo:

Trang 58

Basic properties

¢ UlTableViewCell has image and text properties

ceLL.image = [UIImage imageNamed:@“obama.png” |;

cell.text = @“Barack Obama”;

Trang 59

Accessory Types

// UITableView delegate method

- CUTTabLeViewCeLTLAccessoryType)tabLeView: CUTTabLeView *)tabLe

accessorylypeForRowWithIndexPath: CNSIndexPath *)indexPath;

UlTableViewCellAccessoryDisclosurelndicator Barack Obama UlTableViewCellAccessoryDetailDisclosureButton Barack Obama

UlTableViewCellAccessoryCheckmark Barack Obama

- (vo1id)tabLeView: CUITableView *)tabLeView

accessoryButtonT appedForRowWithIndexPath: CNSIndexPath *)indexPath

{

// Only for the blue disclosure button

Trang 60

Customizing the Content View

¢ For cases where a simple image + text cell doesn’t suffice ¢ UlTableViewCell has a content view property

- Add additional views to the content view

- (UITabLeViewCeLL *)tableView: CUITabLleView *)tableView cel LForRowAtIndexPath: CNSIndexPath *)indexPath

{

UITablLeViewCeLL *ceLl = .;

CGRect frame = cell.contentView bounds;

UILabel *myLabel = [[UILabel alloc] initWithFrame: frame];

myLabeL.text = .;

LceLlL.contentView addSubview:myLabel |;

[myLabel release];

Trang 61

Custom Row Heights

¢ Rows in a table view may have variable heights

¢ NSString category in UIStringDrawing.h is very useful for

computing text sizes

- CCGFLoat)tabLeView: CUTTabLeView *)tabLeVtew

heightForRowAtIndexPath: CNSIndexPath *)indexPath

{

NSString *text = .;

UIFont *font = [UIFont systemFontOfSize: ];

CGSize withinSize = CGSizeMakeCtabLeView.width, 1200];

CGSize size = [text sizeWithFont: font

constrainedToS1ze:w1thrnStze

lL1neBreakMode :UTLtneBreakModeWordWrop |;

Trang 63

Presence 2

¢ Due next Tuesday 5/5 at 11:59PM

= Displaying dynamic data with table views

Trang 64

Demo: