Your SlideShare is downloading. ×
0
CS193P - Lecture 8        iPhone Application Development        Scroll Views & Table ViewsSaturday, January 30, 2010      ...
Saturday, January 30, 2010   2
iPhone SDK 3.2Saturday, January 30, 2010   3
iPhone SDK 3.2       • Support for iPadSaturday, January 30, 2010   3
iPhone SDK 3.2       • Support for iPad       • Beta ReleaseSaturday, January 30, 2010   3
iPhone SDK 3.2       • Support for iPad       • Beta Release              Enrollment in iPhone Developer Standard or Enter...
Announcements        • Paparazzi 1 due next Wednesday (2/3)Saturday, January 30, 2010                       4
Today’s Topics        • Scroll views        • Table views             ■ Displaying data             ■ Controlling appearan...
Scroll ViewsSaturday, January 30, 2010   6
UIScrollView        • For displaying more content than can fit on the screenSaturday, January 30, 2010                    ...
UIScrollView        • For displaying more content than can fit on the screen        • Handles gestures for panning and zoo...
UIScrollView        • For displaying more content than can fit on the screen        • Handles gestures for panning and zoo...
Scrolling ExamplesSaturday, January 30, 2010                        8
Scrolling ExamplesSaturday, January 30, 2010                        8
Scrolling ExamplesSaturday, January 30, 2010                        8
Scrolling ExamplesSaturday, January 30, 2010                        8
Scrolling ExamplesSaturday, January 30, 2010                        8
Scrolling ExamplesSaturday, January 30, 2010                        8
Content SizeSaturday, January 30, 2010   9
Content Size                                       contentSize.width                  contentSize.heightSaturday, January ...
Content Inset                   contentSize.width                                                           contentInset.t...
Content InsetSaturday, January 30, 2010   11
Content InsetSaturday, January 30, 2010   11
Content InsetSaturday, January 30, 2010   12
Content Inset              contentInset.topSaturday, January 30, 2010       12
Content Inset              contentInset.topSaturday, January 30, 2010       13
Content Inset              contentInset.top        contentInset.bottomSaturday, January 30, 2010       13
Scroll Indicator InsetsSaturday, January 30, 2010       14
Scroll Indicator InsetsSaturday, January 30, 2010       14
Scroll Indicator InsetsSaturday, January 30, 2010       14
Scroll Indicator Insets    scrollIndicatorInsets.topSaturday, January 30, 2010       14
Content       OffsetSaturday, January 30, 2010   15
Content       OffsetSaturday, January 30, 2010   15
Content       OffsetSaturday, January 30, 2010   15
contentSize.width                                                                contentInset.top         contentSize.heig...
Saturday, January 30, 2010   17
contentOffset.x               contentOffset.ySaturday, January 30, 2010                     17
Saturday, January 30, 2010   18
Saturday, January 30, 2010   18
contentOffset.x                      (-contentInset.left)           contentOffset.y         (-contentInset.top)Saturday, J...
Using a Scroll ViewSaturday, January 30, 2010    19
Using a Scroll View        • Create with the desired frame             CGRect frame = CGRectMake(0, 0, 200, 200);         ...
Using a Scroll View        • Create with the desired frame             CGRect frame = CGRectMake(0, 0, 200, 200);         ...
Using a Scroll View        • Create with the desired frame             CGRect frame = CGRectMake(0, 0, 200, 200);         ...
Extending Scroll View Behavior        • Applications often want to know about scroll eventsSaturday, January 30, 2010     ...
Extending Scroll View Behavior        • Applications often want to know about scroll events             ■   When the scrol...
Extending Scroll View Behavior        • Applications often want to know about scroll events             ■ When the scroll ...
Extending Scroll View Behavior        • Applications often want to know about scroll events             ■ When the scroll ...
Extending with a Subclass        • Create a subclass        • Override methods to customize behaviorSaturday, January 30, ...
Extending with a Subclass        • Create a subclass        • Override methods to customize behavior        • Issues with ...
Extending with a Subclass        • Create a subclass        • Override methods to customize behavior        • Issues with ...
Extending with a Subclass        • Create a subclass        • Override methods to customize behavior        • Issues with ...
Extending with a Subclass        • Create a subclass        • Override methods to customize behavior        • Issues with ...
Extending with Delegation        • Delegate is a separate object        • Clearly defined points of responsibility        ...
UIScrollView DelegateSaturday, January 30, 2010      23
UIScrollView Delegate          @protocol UIScrollViewDelegate<NSObject>Saturday, January 30, 2010                         ...
UIScrollView Delegate          @protocol UIScrollViewDelegate<NSObject>          @optionalSaturday, January 30, 2010      ...
UIScrollView Delegate          @protocol UIScrollViewDelegate<NSObject>          @optional          // Respond to interest...
UIScrollView Delegate          @protocol UIScrollViewDelegate<NSObject>          @optional          // Respond to interest...
Implementing a DelegateSaturday, January 30, 2010        24
Implementing a Delegate        • Conform to the delegate protocol            @interface MyController : NSObject <UIScrollV...
Implementing a Delegate        • Conform to the delegate protocol            @interface MyController : NSObject <UIScrollV...
Zooming with a Scroll ViewSaturday, January 30, 2010           25
Zooming with a Scroll View        • Set the minimum, maximum, initial zoom scales            scrollView.maximumZoomScale =...
Zooming with a Scroll View        • Set the minimum, maximum, initial zoom scales            scrollView.maximumZoomScale =...
Set Zoom Scale                             - (void)setZoomScale:(float)scale animated:(BOOL);Saturday, January 30, 2010   ...
Set Zoom Scale                             - (void)setZoomScale:(float)scale animated:(BOOL);Saturday, January 30, 2010   ...
Set Zoom Scale                             - (void)setZoomScale:(float)scale animated:(BOOL);Saturday, January 30, 2010   ...
Zoom to Rect                             - (void)zoomToRect:(CGRect)rect animated:(BOOL);Saturday, January 30, 2010       ...
Zoom to Rect                             - (void)zoomToRect:(CGRect)rect animated:(BOOL);Saturday, January 30, 2010       ...
Zoom to Rect                             - (void)zoomToRect:(CGRect)rect animated:(BOOL);Saturday, January 30, 2010       ...
Zoom to Rect                             - (void)zoomToRect:(CGRect)rect animated:(BOOL);Saturday, January 30, 2010       ...
Zoom to Rect                             - (void)zoomToRect:(CGRect)rect animated:(BOOL);Saturday, January 30, 2010       ...
Zoom to Rect                             - (void)zoomToRect:(CGRect)rect animated:(BOOL);Saturday, January 30, 2010       ...
DemoSaturday, January 30, 2010   29
Table ViewsSaturday, January 30, 2010   30
Table Views        • Display lists of content             ■ Single column, multiple rows             ■ Vertical scrolling ...
Table View StylesSaturday, January 30, 2010   32
Table View Styles                    UITableViewStylePlainSaturday, January 30, 2010                  32
Table View Styles                    UITableViewStylePlain   UITableViewStyleGroupedSaturday, January 30, 2010            ...
Table View Anatomy                                  Plain StyleSaturday, January 30, 2010                        33
Table View Anatomy                                    Plain Style                Table HeaderSaturday, January 30, 2010   ...
Table View Anatomy                                     Plain Style                Table Header                 Table Foote...
Table View Anatomy                                      Plain Style                Table Header                       Sect...
Table View Anatomy                                      Plain Style                Table Header                           ...
Table View Anatomy                                      Plain Style                Table Header                           ...
Table View Anatomy                                      Plain Style                Table Header                           ...
Table View Anatomy                                      Plain Style                Table Header                           ...
Table View Anatomy                                     Grouped Style                Table Header                          ...
Using Table Views        • Displaying your data in the table view        • Customizing appearance & behaviorSaturday, Janu...
Displaying Data in a Table ViewSaturday, January 30, 2010                37
A Naïve SolutionSaturday, January 30, 2010   38
A Naïve Solution        • Table views display a list of data, so use an array             [myTableView setList:myListOfStu...
A Naïve Solution        • Table views display a list of data, so use an array             [myTableView setList:myListOfStu...
A Naïve Solution        • Table views display a list of data, so use an array             [myTableView setList:myListOfStu...
A Naïve Solution        • Table views display a list of data, so use an array             [myTableView setList:myListOfStu...
A More Flexible Solution        • Another object provides data to the table view             ■ Not all at once            ...
UITableViewDataSourceSaturday, January 30, 2010      40
UITableViewDataSource        • Provide number of sections and rows           // Optional method, defaults to 1 if not impl...
UITableViewDataSource        • Provide number of sections and rows           // Optional method, defaults to 1 if not impl...
Datasource Message Flow                                                  DatasourceSaturday, January 30, 2010             ...
Datasource Message Flow                                    numberOfSectionsInTableView:                                   ...
Datasource Message Flow                                      numberOfSectionsInTableView:                                 ...
Datasource Message Flow                                                  DatasourceSaturday, January 30, 2010             ...
Datasource Message Flow                                   tableView:numberOfRowsInSection:                                ...
Datasource Message Flow                                      tableView:numberOfRowsInSection:                             ...
Datasource Message Flow                                                  DatasourceSaturday, January 30, 2010             ...
Datasource Message Flow                                   tableView:cellForRowAtIndexPath:                                ...
Datasource Message Flow                                      tableView:cellForRowAtIndexPath:                             ...
NSIndexPath        • Generic class in Foundation        • Path to a specific node in a tree of nested arrays              ...
NSIndexPath        • Generic class in Foundation        • Path to a specific node in a tree of nested arrays              ...
NSIndexPath and Table Views        • Cell location described with an index path             ■   Section index + row indexS...
NSIndexPath and Table Views        • Cell location described with an index path             ■   Section index + row index ...
Single Section Table ViewSaturday, January 30, 2010          46
Single Section Table View        • Return the number of rows           - (NSInteger)tableView:(UITableView *)tableView    ...
Single Section Table View        • Return the number of rows           - (NSInteger)tableView:(UITableView *)tableView    ...
Cell ReuseSaturday, January 30, 2010   47
Cell Reuse        • When asked for a cell, it would be expensive to create a new          cell each time.Saturday, January...
Cell Reuse        • When asked for a cell, it would be expensive to create a new          cell each time.            - (UI...
Cell Reuse        • When asked for a cell, it would be expensive to create a new          cell each time.            - (UI...
Triggering Updates        • When is the datasource asked for its data?Saturday, January 30, 2010                          ...
Triggering Updates        • When is the datasource asked for its data?             ■   When a row becomes visibleSaturday,...
Triggering Updates        • When is the datasource asked for its data?             ■ When a row becomes visible           ...
Section and Row ReloadingSaturday, January 30, 2010         49
Section and Row Reloading       - (void)insertSections:(NSIndexSet *)sections             withRowAnimation:(UITableViewRow...
Section and Row Reloading       - (void)insertSections:(NSIndexSet *)sections             withRowAnimation:(UITableViewRow...
Section and Row Reloading       - (void)insertSections:(NSIndexSet *)sections             withRowAnimation:(UITableViewRow...
Section and Row Reloading       - (void)insertSections:(NSIndexSet *)sections             withRowAnimation:(UITableViewRow...
Section and Row Reloading       - (void)insertSections:(NSIndexSet *)sections             withRowAnimation:(UITableViewRow...
Section and Row Reloading       - (void)insertSections:(NSIndexSet *)sections             withRowAnimation:(UITableViewRow...
Additional Datasource Methods        • Titles for section headers and footers        • Allow editing and reordering cellsS...
Appearance & BehaviorSaturday, January 30, 2010      51
UITableView Delegate        • Customize appearance and behavior        • Keep application logic separate from view        ...
Table View Appearance & BehaviorSaturday, January 30, 2010                 53
Table View Appearance & Behavior        • Customize appearance of table view cell            - (void)tableView:(UITableVie...
Table View Appearance & Behavior        • Customize appearance of table view cell            - (void)tableView:(UITableVie...
Row Selection in Table Views        • In iPhone applications, rows rarely stay selected        • Selecting a row usually t...
Row Selection in Table Views        • In iPhone applications, rows rarely stay selected        • Selecting a row usually t...
Persistent SelectionSaturday, January 30, 2010    55
Persistent SelectionSaturday, January 30, 2010    55
Responding to Selection            // For a navigation hierarchy...            - (void)tableView:(UITableView *)tableView ...
Responding to Selection            // For a navigation hierarchy...            - (void)tableView:(UITableView *)tableView ...
Responding to Selection            // For a navigation hierarchy...            - (void)tableView:(UITableView *)tableView ...
Responding to Selection            // For a navigation hierarchy...            - (void)tableView:(UITableView *)tableView ...
Responding to Selection            // For a navigation hierarchy...            - (void)tableView:(UITableView *)tableView ...
Responding to Selection            // For a navigation hierarchy...            - (void)tableView:(UITableView *)tableView ...
Responding to Selection            // For a navigation hierarchy...            - (void)tableView:(UITableView *)tableView ...
Responding to Selection            // For a navigation hierarchy...            - (void)tableView:(UITableView *)tableView ...
Altering or Disabling Selection            - (NSIndexPath *)tableView:(UITableView *)tableView            willSelectRowAtI...
UITableViewControllerSaturday, January 30, 2010      58
UITableViewControllerSaturday, January 30, 2010      59
UITableViewController        • Convenient starting point for view controller with a table view             ■ Table view is...
UITableViewController        • Convenient starting point for view controller with a table view             ■ Table view is...
Table View CellsSaturday, January 30, 2010   60
Designated InitializerSaturday, January 30, 2010      61
Designated Initializer       - (id)initWithFrame:(CGRect)frame           reuseIdentifier:(NSString *)reuseIdentifier;Satur...
Designated Initializer                ECATED            EPR       - (id)initWithFrame:(CGRect)frame          DreuseIdentif...
Cell StylesSaturday, January 30, 2010   62
Cell Styles                 UITableViewCellStyleDefaultSaturday, January 30, 2010                     62
Cell Styles                 UITableViewCellStyleDefault                 UITableViewCellStyleSubtitleSaturday, January 30, ...
Cell Styles                 UITableViewCellStyleDefault                 UITableViewCellStyleSubtitle                 UITab...
Cell Styles                 UITableViewCellStyleDefault                 UITableViewCellStyleSubtitle                 UITab...
Basic properties        • UITableViewCell has an image view and one or two text labelsSaturday, January 30, 2010          ...
Basic properties        • UITableViewCell has an image view and one or two text labels            cell.imageView.image = [...
Accessory Types        // UITableView delegate method        - (UITableViewCellAccessoryType)tableView:(UITableView *)tabl...
Accessory Types        // UITableView delegate method        - (UITableViewCellAccessoryType)tableView:(UITableView *)tabl...
Accessory Types        // UITableView delegate method        - (UITableViewCellAccessoryType)tableView:(UITableView *)tabl...
Accessory Types        // UITableView delegate method        - (UITableViewCellAccessoryType)tableView:(UITableView *)tabl...
Accessory Types        // UITableView delegate method        - (UITableViewCellAccessoryType)tableView:(UITableView *)tabl...
Customizing the Content View        • For cases where a simple image + text cell doesn’t suffice        • UITableViewCell ...
Customizing the Content View        • For cases where a simple image + text cell doesn’t suffice        • UITableViewCell ...
Saturday, January 30, 2010   66
Saturday, January 30, 2010   66
Questions?Saturday, January 30, 2010   67
Upcoming SlideShare
Loading in...5
×

08 table views

699

Published on

slide 8 in iphone programming course (stanford university)

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
699
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "08 table views"

  1. 1. CS193P - Lecture 8 iPhone Application Development Scroll Views & Table ViewsSaturday, January 30, 2010 1
  2. 2. Saturday, January 30, 2010 2
  3. 3. iPhone SDK 3.2Saturday, January 30, 2010 3
  4. 4. iPhone SDK 3.2 • Support for iPadSaturday, January 30, 2010 3
  5. 5. iPhone SDK 3.2 • Support for iPad • Beta ReleaseSaturday, January 30, 2010 3
  6. 6. iPhone SDK 3.2 • Support for iPad • Beta Release Enrollment in iPhone Developer Standard or Enterprise requiredSaturday, January 30, 2010 3
  7. 7. Announcements • Paparazzi 1 due next Wednesday (2/3)Saturday, January 30, 2010 4
  8. 8. Today’s Topics • Scroll views • Table views ■ Displaying data ■ Controlling appearance & behavior • UITableViewController • Table view cellsSaturday, January 30, 2010 5
  9. 9. Scroll ViewsSaturday, January 30, 2010 6
  10. 10. UIScrollView • For displaying more content than can fit on the screenSaturday, January 30, 2010 7
  11. 11. UIScrollView • For displaying more content than can fit on the screen • Handles gestures for panning and zoomingSaturday, January 30, 2010 7
  12. 12. UIScrollView • For displaying more content than can fit on the screen • Handles gestures for panning and zooming • Noteworthy subclasses: UITableView and UITextViewSaturday, January 30, 2010 7
  13. 13. Scrolling ExamplesSaturday, January 30, 2010 8
  14. 14. Scrolling ExamplesSaturday, January 30, 2010 8
  15. 15. Scrolling ExamplesSaturday, January 30, 2010 8
  16. 16. Scrolling ExamplesSaturday, January 30, 2010 8
  17. 17. Scrolling ExamplesSaturday, January 30, 2010 8
  18. 18. Scrolling ExamplesSaturday, January 30, 2010 8
  19. 19. Content SizeSaturday, January 30, 2010 9
  20. 20. Content Size contentSize.width contentSize.heightSaturday, January 30, 2010 9
  21. 21. Content Inset contentSize.width contentInset.top contentSize.height contentInset.bottomSaturday, January 30, 2010 10
  22. 22. Content InsetSaturday, January 30, 2010 11
  23. 23. Content InsetSaturday, January 30, 2010 11
  24. 24. Content InsetSaturday, January 30, 2010 12
  25. 25. Content Inset contentInset.topSaturday, January 30, 2010 12
  26. 26. Content Inset contentInset.topSaturday, January 30, 2010 13
  27. 27. Content Inset contentInset.top contentInset.bottomSaturday, January 30, 2010 13
  28. 28. Scroll Indicator InsetsSaturday, January 30, 2010 14
  29. 29. Scroll Indicator InsetsSaturday, January 30, 2010 14
  30. 30. Scroll Indicator InsetsSaturday, January 30, 2010 14
  31. 31. Scroll Indicator Insets scrollIndicatorInsets.topSaturday, January 30, 2010 14
  32. 32. Content OffsetSaturday, January 30, 2010 15
  33. 33. Content OffsetSaturday, January 30, 2010 15
  34. 34. Content OffsetSaturday, January 30, 2010 15
  35. 35. contentSize.width contentInset.top contentSize.height contentInset.bottom contentInset.left contentInset.rightSaturday, January 30, 2010 16
  36. 36. Saturday, January 30, 2010 17
  37. 37. contentOffset.x contentOffset.ySaturday, January 30, 2010 17
  38. 38. Saturday, January 30, 2010 18
  39. 39. Saturday, January 30, 2010 18
  40. 40. contentOffset.x (-contentInset.left) contentOffset.y (-contentInset.top)Saturday, January 30, 2010 18
  41. 41. Using a Scroll ViewSaturday, January 30, 2010 19
  42. 42. Using a Scroll View • Create with the desired frame CGRect frame = CGRectMake(0, 0, 200, 200); scrollView = [[UIScrollView alloc] initWithFrame:frame];Saturday, January 30, 2010 19
  43. 43. Using a Scroll View • Create with the desired frame CGRect frame = CGRectMake(0, 0, 200, 200); scrollView = [[UIScrollView alloc] initWithFrame:frame]; • Add subviews (frames may extend beyond scroll view bounds) frame = CGRectMake(0, 0, 500, 500); myImageView = [[UIImageView alloc] initWithFrame:frame]; [scrollView addSubview:myImageView];Saturday, January 30, 2010 19
  44. 44. Using a Scroll View • Create with the desired frame CGRect frame = CGRectMake(0, 0, 200, 200); scrollView = [[UIScrollView alloc] initWithFrame:frame]; • Add subviews (frames may extend beyond scroll view bounds) frame = CGRectMake(0, 0, 500, 500); myImageView = [[UIImageView alloc] initWithFrame:frame]; [scrollView addSubview:myImageView]; • Set the content size scrollView.contentSize = CGSizeMake(500, 500);Saturday, January 30, 2010 19
  45. 45. Extending Scroll View Behavior • Applications often want to know about scroll eventsSaturday, January 30, 2010 20
  46. 46. Extending Scroll View Behavior • Applications often want to know about scroll events ■ When the scroll offset is changedSaturday, January 30, 2010 20
  47. 47. Extending Scroll View Behavior • Applications often want to know about scroll events ■ When the scroll offset is changed ■ When dragging begins & endsSaturday, January 30, 2010 20
  48. 48. Extending Scroll View Behavior • Applications often want to know about scroll events ■ When the scroll offset is changed ■ When dragging begins & ends ■ When deceleration begins & endsSaturday, January 30, 2010 20
  49. 49. Extending with a Subclass • Create a subclass • Override methods to customize behaviorSaturday, January 30, 2010 21
  50. 50. Extending with a Subclass • Create a subclass • Override methods to customize behavior • Issues with this approachSaturday, January 30, 2010 21
  51. 51. 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 classSaturday, January 30, 2010 21
  52. 52. 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 instanceSaturday, January 30, 2010 21
  53. 53. 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 ■ Your code becomes tightly coupled with superclassSaturday, January 30, 2010 21
  54. 54. Extending with Delegation • Delegate is a separate object • Clearly defined points of responsibility ■ Change behavior ■ Customize appearance • Loosely coupled with the object being extendedSaturday, January 30, 2010 22
  55. 55. UIScrollView DelegateSaturday, January 30, 2010 23
  56. 56. UIScrollView Delegate @protocol UIScrollViewDelegate<NSObject>Saturday, January 30, 2010 23
  57. 57. UIScrollView Delegate @protocol UIScrollViewDelegate<NSObject> @optionalSaturday, January 30, 2010 23
  58. 58. UIScrollView Delegate @protocol UIScrollViewDelegate<NSObject> @optional // Respond to interesting events - (void)scrollViewDidScroll:(UIScrollView *)scrollView;Saturday, January 30, 2010 23
  59. 59. UIScrollView Delegate @protocol UIScrollViewDelegate<NSObject> @optional // Respond to interesting events - (void)scrollViewDidScroll:(UIScrollView *)scrollView; ... // Influence behavior - (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView; @endSaturday, January 30, 2010 23
  60. 60. Implementing a DelegateSaturday, January 30, 2010 24
  61. 61. Implementing a Delegate • Conform to the delegate protocol @interface MyController : NSObject <UIScrollViewDelegate>Saturday, January 30, 2010 24
  62. 62. Implementing a Delegate • Conform to the delegate protocol @interface MyController : NSObject <UIScrollViewDelegate> • Implement all required methods and any optional methods - (void)scrollViewDidScroll:(UIScrollView *)scrollView { // Do something in response to the new scroll position if (scrollView.contentOffset ...) { } }Saturday, January 30, 2010 24
  63. 63. Zooming with a Scroll ViewSaturday, January 30, 2010 25
  64. 64. Zooming with a Scroll View • Set the minimum, maximum, initial zoom scales scrollView.maximumZoomScale = 2.0; scrollView.minimumZoomScale = scrollView.size.width / myImage.size.width;Saturday, January 30, 2010 25
  65. 65. Zooming with a Scroll View • Set the minimum, maximum, initial zoom scales scrollView.maximumZoomScale = 2.0; scrollView.minimumZoomScale = scrollView.size.width / myImage.size.width; • Implement delegate method for zooming - (UIView *)viewForZoomingInScrollView:(UIView *)view { return someViewThatWillBeScaled; }Saturday, January 30, 2010 25
  66. 66. Set Zoom Scale - (void)setZoomScale:(float)scale animated:(BOOL);Saturday, January 30, 2010 26
  67. 67. Set Zoom Scale - (void)setZoomScale:(float)scale animated:(BOOL);Saturday, January 30, 2010 26
  68. 68. Set Zoom Scale - (void)setZoomScale:(float)scale animated:(BOOL);Saturday, January 30, 2010 26
  69. 69. Zoom to Rect - (void)zoomToRect:(CGRect)rect animated:(BOOL);Saturday, January 30, 2010 27
  70. 70. Zoom to Rect - (void)zoomToRect:(CGRect)rect animated:(BOOL);Saturday, January 30, 2010 27
  71. 71. Zoom to Rect - (void)zoomToRect:(CGRect)rect animated:(BOOL);Saturday, January 30, 2010 27
  72. 72. Zoom to Rect - (void)zoomToRect:(CGRect)rect animated:(BOOL);Saturday, January 30, 2010 28
  73. 73. Zoom to Rect - (void)zoomToRect:(CGRect)rect animated:(BOOL);Saturday, January 30, 2010 28
  74. 74. Zoom to Rect - (void)zoomToRect:(CGRect)rect animated:(BOOL);Saturday, January 30, 2010 28
  75. 75. DemoSaturday, January 30, 2010 29
  76. 76. Table ViewsSaturday, January 30, 2010 30
  77. 77. Table Views • Display lists of content ■ Single column, multiple rows ■ Vertical scrolling ■ Large data sets • Powerful and ubiquitous in iPhone applicationsSaturday, January 30, 2010 31
  78. 78. Table View StylesSaturday, January 30, 2010 32
  79. 79. Table View Styles UITableViewStylePlainSaturday, January 30, 2010 32
  80. 80. Table View Styles UITableViewStylePlain UITableViewStyleGroupedSaturday, January 30, 2010 32
  81. 81. Table View Anatomy Plain StyleSaturday, January 30, 2010 33
  82. 82. Table View Anatomy Plain Style Table HeaderSaturday, January 30, 2010 33
  83. 83. Table View Anatomy Plain Style Table Header Table FooterSaturday, January 30, 2010 33
  84. 84. Table View Anatomy Plain Style Table Header Section Table FooterSaturday, January 30, 2010 33
  85. 85. Table View Anatomy Plain Style Table Header Section Header Section Table FooterSaturday, January 30, 2010 33
  86. 86. Table View Anatomy Plain Style Table Header Section Header Section Footer Section Table FooterSaturday, January 30, 2010 33
  87. 87. Table View Anatomy Plain Style Table Header Section Header Table Cell Section Footer Section Table FooterSaturday, January 30, 2010 33
  88. 88. Table View Anatomy Plain Style Table Header Section Header Table Cell Section Footer Section Table FooterSaturday, January 30, 2010 34
  89. 89. Table View Anatomy Grouped Style Table Header Section Header Table Cell Section Footer Section Table FooterSaturday, January 30, 2010 35
  90. 90. Using Table Views • Displaying your data in the table view • Customizing appearance & behaviorSaturday, January 30, 2010 36
  91. 91. Displaying Data in a Table ViewSaturday, January 30, 2010 37
  92. 92. A Naïve SolutionSaturday, January 30, 2010 38
  93. 93. A Naïve Solution • Table views display a list of data, so use an array [myTableView setList:myListOfStuff];Saturday, January 30, 2010 38
  94. 94. A Naïve Solution • Table views display a list of data, so use an array [myTableView setList:myListOfStuff]; • Issues with this approachSaturday, January 30, 2010 38
  95. 95. A Naïve Solution • Table views display a list of data, so use an array [myTableView setList:myListOfStuff]; • Issues with this approach ■ All data is loaded upfrontSaturday, January 30, 2010 38
  96. 96. A Naïve Solution • Table views display a list of data, so use an array [myTableView setList:myListOfStuff]; • Issues with this approach ■ All data is loaded upfront ■ All data stays in memorySaturday, January 30, 2010 38
  97. 97. A More Flexible Solution • Another object provides data to the table view ■ Not all at once ■ Just as it’s needed for display • Like a delegate, but purely data-orientedSaturday, January 30, 2010 39
  98. 98. UITableViewDataSourceSaturday, January 30, 2010 40
  99. 99. UITableViewDataSource • Provide number of sections and rows // Optional method, defaults to 1 if not implemented - (NSInteger)numberOfSectionsInTableView:(UITableView *)table; // Required method - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;Saturday, January 30, 2010 40
  100. 100. UITableViewDataSource • Provide number of sections and rows // Optional method, defaults to 1 if not implemented - (NSInteger)numberOfSectionsInTableView:(UITableView *)table; // Required method - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section; • Provide cells for table view as needed // Required method - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;Saturday, January 30, 2010 40
  101. 101. Datasource Message Flow DatasourceSaturday, January 30, 2010 41
  102. 102. Datasource Message Flow numberOfSectionsInTableView: How many sections? DatasourceSaturday, January 30, 2010 41
  103. 103. Datasource Message Flow numberOfSectionsInTableView: Datasource 5Saturday, January 30, 2010 41
  104. 104. Datasource Message Flow DatasourceSaturday, January 30, 2010 42
  105. 105. Datasource Message Flow tableView:numberOfRowsInSection: How many rows in section 0? DatasourceSaturday, January 30, 2010 42
  106. 106. Datasource Message Flow tableView:numberOfRowsInSection: Datasource 1Saturday, January 30, 2010 42
  107. 107. Datasource Message Flow DatasourceSaturday, January 30, 2010 43
  108. 108. Datasource Message Flow tableView:cellForRowAtIndexPath: What to display at section 0, row 0? DatasourceSaturday, January 30, 2010 43
  109. 109. Datasource Message Flow tableView:cellForRowAtIndexPath: Datasource Cell with text “John Appleseed”Saturday, January 30, 2010 43
  110. 110. NSIndexPath • Generic class in Foundation • Path to a specific node in a tree of nested arrays 0 1 2 3 4Saturday, January 30, 2010 44
  111. 111. NSIndexPath • Generic class in Foundation • Path to a specific node in a tree of nested arrays 0 0 0 0 1 1 1 1 2 2 2 2 3 3 3 3 4 4 4 4Saturday, January 30, 2010 44
  112. 112. NSIndexPath and Table Views • Cell location described with an index path ■ Section index + row indexSaturday, January 30, 2010 45
  113. 113. NSIndexPath and Table Views • Cell location described with an index path ■ Section index + row index • Category on NSIndexPath with helper methods @interface NSIndexPath (UITableView) + (NSIndexPath *)indexPathForRow:(NSUInteger)row inSection:(NSUInteger)section; @property(nonatomic,readonly) NSUInteger section; @property(nonatomic,readonly) NSUInteger row; @endSaturday, January 30, 2010 45
  114. 114. Single Section Table ViewSaturday, January 30, 2010 46
  115. 115. Single Section Table View • Return the number of rows - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return [myStrings count]; }Saturday, January 30, 2010 46
  116. 116. Single Section Table View • Return the number of rows - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return [myStrings count]; } • Provide a cell when requested - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell *cell = ...; cell.textLabel.text = [myStrings objectAtIndex:indexPath.row] return [cell autorelease]; }Saturday, January 30, 2010 46
  117. 117. Cell ReuseSaturday, January 30, 2010 47
  118. 118. Cell Reuse • When asked for a cell, it would be expensive to create a new cell each time.Saturday, January 30, 2010 47
  119. 119. Cell Reuse • When asked for a cell, it would be expensive to create a new cell each time. - (UITableViewCell *)dequeueReusableCellWithIdentifier: (NSString *)identifier;Saturday, January 30, 2010 47
  120. 120. Cell Reuse • When asked for a cell, it would be expensive to create a new cell each time. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@“MyIdentifier”]; if (cell == nil) { cell = [[[UITableViewCell alloc] initWithStyle:... reuseIdentifier:@“MyIdenifier”] autorelease]; } cell.text = [myStrings objectAtIndex:indexPath.row] return cell; }Saturday, January 30, 2010 47
  121. 121. Triggering Updates • When is the datasource asked for its data?Saturday, January 30, 2010 48
  122. 122. Triggering Updates • When is the datasource asked for its data? ■ When a row becomes visibleSaturday, January 30, 2010 48
  123. 123. Triggering Updates • When is the datasource asked for its data? ■ When a row becomes visible ■ When an update is explicitly requested by calling -reloadData - (void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; [self.tableView reloadData]; }Saturday, January 30, 2010 48
  124. 124. Section and Row ReloadingSaturday, January 30, 2010 49
  125. 125. Section and Row Reloading - (void)insertSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation;Saturday, January 30, 2010 49
  126. 126. Section and Row Reloading - (void)insertSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation; - (void)deleteSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation;Saturday, January 30, 2010 49
  127. 127. Section and Row Reloading - (void)insertSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation; - (void)deleteSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation; - (void)reloadSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation;Saturday, January 30, 2010 49
  128. 128. Section and Row Reloading - (void)insertSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation; - (void)deleteSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation; - (void)reloadSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation; - (void)insertRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation;Saturday, January 30, 2010 49
  129. 129. Section and Row Reloading - (void)insertSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation; - (void)deleteSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation; - (void)reloadSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation; - (void)insertRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation; - (void)deleteRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation;Saturday, January 30, 2010 49
  130. 130. Section and Row Reloading - (void)insertSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation; - (void)deleteSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation; - (void)reloadSections:(NSIndexSet *)sections withRowAnimation:(UITableViewRowAnimation)animation; - (void)insertRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation; - (void)deleteRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation; - (void)reloadRowsAtIndexPaths:(NSArray *)indexPaths withRowAnimation:(UITableViewRowAnimation)animation;Saturday, January 30, 2010 49
  131. 131. Additional Datasource Methods • Titles for section headers and footers • Allow editing and reordering cellsSaturday, January 30, 2010 50
  132. 132. Appearance & BehaviorSaturday, January 30, 2010 51
  133. 133. UITableView Delegate • Customize appearance and behavior • Keep application logic separate from view • Often the same object as datasourceSaturday, January 30, 2010 52
  134. 134. Table View Appearance & BehaviorSaturday, January 30, 2010 53
  135. 135. Table View Appearance & Behavior • Customize appearance of table view cell - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath;Saturday, January 30, 2010 53
  136. 136. Table View Appearance & Behavior • Customize appearance of table view cell - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath; • Validate and respond to selection changes - (NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath; - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;Saturday, January 30, 2010 53
  137. 137. Row Selection in Table Views • In iPhone applications, rows rarely stay selected • Selecting a row usually triggers an eventSaturday, January 30, 2010 54
  138. 138. Row Selection in Table Views • In iPhone applications, rows rarely stay selected • Selecting a row usually triggers an eventSaturday, January 30, 2010 54
  139. 139. Persistent SelectionSaturday, January 30, 2010 55
  140. 140. Persistent SelectionSaturday, January 30, 2010 55
  141. 141. Responding to Selection // For a navigation hierarchy... - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {Saturday, January 30, 2010 56
  142. 142. Responding to Selection // For a navigation hierarchy... - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { // Get the row and the object it representsSaturday, January 30, 2010 56
  143. 143. Responding to Selection // For a navigation hierarchy... - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { // Get the row and the object it represents NSUInteger row = indexPath.rowSaturday, January 30, 2010 56
  144. 144. Responding to Selection // For a navigation hierarchy... - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { // Get the row and the object it represents NSUInteger row = indexPath.row id objectToDisplay = [myObjects objectAtIndex:row];Saturday, January 30, 2010 56
  145. 145. Responding to Selection // For a navigation hierarchy... - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { // Get the row and the object it represents NSUInteger row = indexPath.row id objectToDisplay = [myObjects objectAtIndex:row]; // Create a new view controller and pass it alongSaturday, January 30, 2010 56
  146. 146. Responding to Selection // For a navigation hierarchy... - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { // Get the row and the object it represents NSUInteger row = indexPath.row id objectToDisplay = [myObjects objectAtIndex:row]; // Create a new view controller and pass it along MyViewController *myViewController = ...;Saturday, January 30, 2010 56
  147. 147. Responding to Selection // For a navigation hierarchy... - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { // Get the row and the object it represents NSUInteger row = indexPath.row id objectToDisplay = [myObjects objectAtIndex:row]; // Create a new view controller and pass it along MyViewController *myViewController = ...; myViewController.object = objectToDisplay;Saturday, January 30, 2010 56
  148. 148. Responding to Selection // For a navigation hierarchy... - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { // Get the row and the object it represents NSUInteger row = indexPath.row id objectToDisplay = [myObjects objectAtIndex:row]; // Create a new view controller and pass it along MyViewController *myViewController = ...; myViewController.object = objectToDisplay; [self.navigationController pushViewController:myViewController animated:YES]; }Saturday, January 30, 2010 56
  149. 149. Altering or Disabling Selection - (NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath { // Don’t allow selecting certain rows? if (indexPath.row == ...) { return nil; } else { return indexPath; } }Saturday, January 30, 2010 57
  150. 150. UITableViewControllerSaturday, January 30, 2010 58
  151. 151. UITableViewControllerSaturday, January 30, 2010 59
  152. 152. UITableViewController • Convenient starting point for view controller with a table view ■ Table view is automatically created ■ Controller is table view’s delegate and datasourceSaturday, January 30, 2010 59
  153. 153. UITableViewController • 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 ■ Deselects rows when user navigates back ■ Flashes scroll indicatorsSaturday, January 30, 2010 59
  154. 154. Table View CellsSaturday, January 30, 2010 60
  155. 155. Designated InitializerSaturday, January 30, 2010 61
  156. 156. Designated Initializer - (id)initWithFrame:(CGRect)frame reuseIdentifier:(NSString *)reuseIdentifier;Saturday, January 30, 2010 61
  157. 157. Designated Initializer ECATED EPR - (id)initWithFrame:(CGRect)frame DreuseIdentifier:(NSString *)reuseIdentifier; - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier;Saturday, January 30, 2010 61
  158. 158. Cell StylesSaturday, January 30, 2010 62
  159. 159. Cell Styles UITableViewCellStyleDefaultSaturday, January 30, 2010 62
  160. 160. Cell Styles UITableViewCellStyleDefault UITableViewCellStyleSubtitleSaturday, January 30, 2010 62
  161. 161. Cell Styles UITableViewCellStyleDefault UITableViewCellStyleSubtitle UITableViewCellStyleValue1Saturday, January 30, 2010 62
  162. 162. Cell Styles UITableViewCellStyleDefault UITableViewCellStyleSubtitle UITableViewCellStyleValue1 UITableViewCellStyleValue2Saturday, January 30, 2010 62
  163. 163. Basic properties • UITableViewCell has an image view and one or two text labelsSaturday, January 30, 2010 63
  164. 164. Basic properties • UITableViewCell has an image view and one or two text labels cell.imageView.image = [UIImage imageNamed:@“vitolidol.png”]; cell.textLabel.text = @“Vitol Idol”; cell.detailTextLabel.text = @“Billy Idol”;Saturday, January 30, 2010 63
  165. 165. Accessory Types // UITableView delegate method - (UITableViewCellAccessoryType)tableView:(UITableView *)table accessoryTypeForRowWithIndexPath:(NSIndexPath *)indexPath;Saturday, January 30, 2010 64
  166. 166. Accessory Types // UITableView delegate method - (UITableViewCellAccessoryType)tableView:(UITableView *)table accessoryTypeForRowWithIndexPath:(NSIndexPath *)indexPath; UITableViewCellAccessoryDisclosureIndicatorSaturday, January 30, 2010 64
  167. 167. Accessory Types // UITableView delegate method - (UITableViewCellAccessoryType)tableView:(UITableView *)table accessoryTypeForRowWithIndexPath:(NSIndexPath *)indexPath; UITableViewCellAccessoryDisclosureIndicator UITableViewCellAccessoryDetailDisclosureButtonSaturday, January 30, 2010 64
  168. 168. Accessory Types // UITableView delegate method - (UITableViewCellAccessoryType)tableView:(UITableView *)table accessoryTypeForRowWithIndexPath:(NSIndexPath *)indexPath; UITableViewCellAccessoryDisclosureIndicator UITableViewCellAccessoryDetailDisclosureButton - (void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath { // Only for the blue disclosure button NSUInteger row = indexPath.row; ... }Saturday, January 30, 2010 64
  169. 169. Accessory Types // UITableView delegate method - (UITableViewCellAccessoryType)tableView:(UITableView *)table accessoryTypeForRowWithIndexPath:(NSIndexPath *)indexPath; UITableViewCellAccessoryDisclosureIndicator UITableViewCellAccessoryDetailDisclosureButton UITableViewCellAccessoryCheckmark - (void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath { // Only for the blue disclosure button NSUInteger row = indexPath.row; ... }Saturday, January 30, 2010 64
  170. 170. Customizing the Content View • For cases where a simple image + text cell doesn’t suffice • UITableViewCell has a content view property ■ Add additional views to the content viewSaturday, January 30, 2010 65
  171. 171. Customizing the Content View • For cases where a simple image + text cell doesn’t suffice • UITableViewCell has a content view property ■ Add additional views to the content view - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell *cell = ...; CGRect frame = cell.contentView.bounds; UILabel *myLabel = [[UILabel alloc] initWithFrame:frame]; myLabel.text = ...; [cell.contentView addSubview:myLabel]; [myLabel release]; }Saturday, January 30, 2010 65
  172. 172. Saturday, January 30, 2010 66
  173. 173. Saturday, January 30, 2010 66
  174. 174. Questions?Saturday, January 30, 2010 67
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×