Session 15 - Working with Image, Scroll, Collection, Picker, and Web View


Published on

iOS 7 Programming - Working with Scroll, Picker, Collection, Image, and Web View

Published in: Technology, Art & Photos
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Session 15 - Working with Image, Scroll, Collection, Picker, and Web View

  1. 1. iOS Application Development
  2. 2. Working with Image, Scroll, Picker Collection, and Web View These are confidential sessions - please refrain from streaming, blogging, or taking pictures Session 15 Vu Tran Lam IAD-2013
  3. 3. • Introduction to image view • Working with scroll view • Zooming image with scroll view • Working with collection view • Building photo album using image view and collection view • Introduction to picker view • Displaying date and country list using UIPickerView – UIDatePicker • Introduction to Web view • Building iOS application to view Web and PDF Today’s Topics
  4. 4. Image Views
  5. 5. • An image view displays an image or an animated sequence of images. • An image view lets you efficiently draw an image (such as a JPEG or PNG file) or an animated series of images onscreen, scaling the images automatically to fit within the current size of the view. Introduction to Image Views
  6. 6. • Drag a image view from the library to the view. • Set the image property to choose the image. Creating Image Views Using Storyboard 1 2
  7. 7. • Image views are implemented in the UIImageView class. • Configure image views in Interface Builder, in the Image View section of the Attributes Inspector. • Select an image to display on image view using the Image (image) field in the Attributes Inspector. Implementation and Configuration
  8. 8. Creating Scroll Views Programmatically UIImage *image = [UIImage imageNamed:@"Reload"]; self.imageView.image = image; • You can implemented image views to display image by using the UIImageView class as following:
  9. 9. • You can change the tint colour of UIImageView by using: Changing Tint Colour of Image Views UIImage *image = [UIImage imageNamed:@"Reload"]; image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; self.imageView.image = image;
  10. 10. Scroll Views
  11. 11. • A scroll view allows users to see content that is larger than the scroll view’s boundaries (view content that does not fit on the screen of the device) • When a scroll view first appears (or when users interact with it) vertical or horizontal scroll indicators flash briefly to show users that there is more content they can reveal. Introduction to Scroll Views
  12. 12. • Scroll views are implemented in the UIScrollView class. • Configure scroll views in Interface Builder, in the Scroll View section of the Attributes Inspector. Implementation and Configuration
  13. 13. • ConScroll views need a delegate to handle scrolling, dragging, and zooming. • By assigning a view controller as the scroll view’s delegate and implementing any or all of the UIScrollViewDelegate methods, you can define these behaviors. Behavior of Scroll Views
  14. 14. Customizing Appearance of Scroll Views
  15. 15. • Content of table views • Behavior of table views • Appearance of table views • Table view styles Changing the content of Image Views
  16. 16. • Creating scroll views using storyboard • Creating scroll views programmatically • Configuring scroll view Creating and Configuring Scroll Views
  17. 17. • Drag a scroll view from the library to the view. • Set the contentSize property to the size of the scrollable content. • Add a view that are displayed and scrolled by the scroll view. Creating Scroll Views Using Storyboard 1 2 3
  18. 18. Creating Scroll Views Programmatically - (void)loadView { CGRect fullScreenRect = [[UIScreen mainScreen] applicationFrame]; UIScrollView *scrollView =[[UIScrollView alloc] initWithFrame:fullScreenRect]; scrollView.contentSize = CGSizeMake(320,758); // do any further configuration to the scroll view // add a view, or views, as a subview of the scroll view. // release scrollView as self.view retains it self.view = scrollView; }
  19. 19. • Configuring content inset • Configuring scroll indicators Configuring Scroll Views
  20. 20. • Basic zooming using the pinch gestures • Zooming by tapping • Scrolling using paging mode Handling Scroll Views
  21. 21. • Supporting pinch zoom gestures • Zooming programmatically Basic Zooming Using the Pinch Gestures
  22. 22. • The pinch-in and pinch-out zoom gestures are standard gestures that iOS application users expect to use when zooming in and out. Supporting the Pinch Zoom Gestures • To support zooming, you must set a delegate for your scroll view. The delegate object must conform to the UIScrollViewDelegate protocol. - (UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView { // Return the view that we want to zoom return self.imageView; }
  23. 23. • A scroll view may need to zoom in response to touch events, such as double taps or a pinch gesture. • To allow this, UIScrollView provides implementations of two methods: setZoomScale:animated: and zoomToRect:animated:. Zooming Programmatically - (void)scrollViewTwoFingerTapped:(UITapGestureRecognizer*)recognizer { CGFloat newZoomScale = self.scrollView.zoomScale / 1.5f; newZoomScale = MAX(newZoomScale, self.scrollView.minimumZoomScale); [self.scrollView setZoomScale:newZoomScale animated:YES]; } - (void)viewDidLoad { [super viewDidLoad]; UITapGestureRecognizer *twoFingerTapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scrollViewTwoFingerTapped:)]; twoFingerTapRecognizer.numberOfTapsRequired = 1; twoFingerTapRecognizer.numberOfTouchesRequired = 2; [self.scrollView addGestureRecognizer:twoFingerTapRecognizer]; }
  24. 24. • Setting up double-tap gesture recognizer • Implementing method to recognize double-tap event Zooming by Tapping
  25. 25. Setting Up Double-Tap Gesture Recognizer - (void)viewDidLoad { [super viewDidLoad]; // Set up two gesture recognizers: one for the double-tap to zoom in UITapGestureRecognizer *doubleTapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scrollViewDoubleTapped:)]; doubleTapRecognizer.numberOfTapsRequired = 2; doubleTapRecognizer.numberOfTouchesRequired = 1; [self.scrollView addGestureRecognizer:doubleTapRecognizer]; }
  26. 26. Setting Up Method to Recognize Double-Tap Event - (void)scrollViewDoubleTapped:(UITapGestureRecognizer*)recognizer { // Get the location within the image view where we tapped CGPoint pointInView = [recognizer locationInView:self.imageView]; // Get a zoom scale = 150% specified by the scroll view CGFloat newZoomScale = self.scrollView.zoomScale * 1.5f; newZoomScale = MIN(newZoomScale, self.scrollView.maximumZoomScale); // Figure out the rect we want to zoom to, then zoom to it CGSize scrollViewSize = self.scrollView.bounds.size; CGFloat w = scrollViewSize.width / newZoomScale; CGFloat h = scrollViewSize.height / newZoomScale; CGFloat x = pointInView.x - (w / 2.0f); CGFloat y = pointInView.y - (h / 2.0f); CGRect rectToZoomTo = CGRectMake(x, y, w, h); // Tell the scroll view to zoom in [self.scrollView zoomToRect:rectToZoomTo animated:YES]; }
  27. 27. • Configuring paging mode • Configuring subviews of paging scroll view Scrolling Using Paging Mode
  28. 28. • Configuring a scroll view to support paging mode requires that code be implemented in the scroll view’s controller class. Configuring Paging Mode • Setting the pagingMode property to YES. • The contentSize property of a paging scroll view is set so that it fills the height of the screen and that the width is a multiple of the width of the device screen multiplied by the number of pages to be displayed.
  29. 29. Configuring Subviews of Paging Scroll View - (void)viewDidLoad { [super viewDidLoad]; self.scrollView = [[UIScrollView alloc]initWithFrame:scrollViewRect]; self.scrollView.pagingEnabled = YES; self.scrollView.contentSize = CGSizeMake(scrollViewRect.size.width * 3.0f, scrollViewRect.size.height); [self.view addSubview:self.scrollView]; CGRect imageViewRect = self.view.bounds; ! UIImageView *iPhone5SImageView = [self createImageView:iPhone5SImage frame:imageViewRect]; [self.scrollView addSubview:iPhone5SImageView]; imageViewRect.origin.x += imageViewRect.size.width; UIImageView *iPadAirImageView = [self createImageView:iPadAirImage frame:imageViewRect]; [self.scrollView addSubview:iPadAirImageView]; imageViewRect.origin.x += imageViewRect.size.width; UIImageView *macbookAirImageView = [self createImageView:macbookAirImage frame:imageViewRect]; [self.scrollView addSubview:macbookAirImageView]; }
  30. 30. Scroll View Demo
  31. 31. Scroll View Demo
  32. 32. Scroll View Demo
  33. 33. Picker Views
  34. 34. • A picker view lets the user choose between certain options by spinning a wheel on the screen. • Picker views are well suited for choosing things like dates and times that have a moderate number of discrete options. • Purpose: • Picker views allow users quickly to choose between a set of distinct options Introduction to Picker Views
  35. 35. • Picker views are implemented in the UIPickerView class. • Configure picker views in Interface Builder, in the Picker View section of the Attributes Inspector. • You cannot customize the appearance of picker views. Implementation and Configuration
  36. 36. • Populating a picker requires both a data source and a delegate. • It is not possible to populate a picker in Interface Builder; you must do this programmatically. Creating Content of Picker Views @interface PVDCountryListViewController()<UIPickerViewDelegate, UIPickerViewDataSource> ! // Return the number of 'columns' to display. - (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView { if ([pickerView isEqual:self.countryPickerView]) { return 1; } return 0; }
  37. 37. • Populating a picker requires both a data source and a delegate. • It is not possible to populate a picker in Interface Builder; you must do this programmatically.. Creating Content of Picker Views // Return the # of rows in each component.. - (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent: (NSInteger)component { if ([pickerView isEqual:self.countryPickerView]) { return [self.countryList count]; } return 0; }
  38. 38. • Populating a picker requires both a data source and a delegate. • It is not possible to populate a picker in Interface Builder; you must do this programmatically. Creating Content of Picker Views // Display the content of picker row - (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component { if ([pickerView isEqual:self.countryPickerView]) { return [[self.countryList objectAtIndex:row] objectForKey:@"name"]; } return nil; }
  39. 39. Picker View Demo
  40. 40. Picker View Demo
  41. 41. Picker View Demo
  42. 42. Collection Views
  43. 43. • A collection view displays an ordered collection of data items using standard or custom layouts. • Similar to a table view, a collection view gets data from your custom data source objects and displays it using a combination of cell, layout, and supplementary views. • A collection view can display items in a grid or in a custom layout that you design. • Purpose: • View a catalog of variably sized items, optionally sorted into multiple sections • Add to, rearrange, and edit a collection of items • Choose from a frequently changing display of items Introduction to Collection Views
  44. 44. • Collection views are implemented in UICollectionView class. • Collection view cells are implemented in UICollectionViewCell class. • Collection reusable views are implemented in the UICollectionReusableView class. • Configure collection views in Interface Builder, in the Collection View section of the Attributes Inspector. Implementation and Configuration
  45. 45. • Cells present main content of your collection view. The job of a cell is to present content for a single item from your data source object. • Collection views enforce a strict separation between the data being presented and the visual elements used for presentation. Creating Content of Collection Views Cell Decoration view Supplementary view
  46. 46. • Cell: Represents one data item. • Supplementary view: Represents information related to the data items, such as a section header or footer. • Decoration view: Represents purely decorative content that’s not part of your data, such as a background image. Creating Content of Collection Views
  47. 47. • Collection view basics. • Designing data source and delegate. Working with Collection Views
  48. 48. • Collection view is a collaboration of objects • Layout object controls the visual presentation Collection View Basics
  49. 49. • The design of collection views separates the data being presented from the way that data is arranged and presented onscreen. Its visual presentation is managed by many different objects. Collection View is a Collaboration of Objects
  50. 50. • The layout object is solely responsible for determining the placement and visual styling of items within the collection view. Layout Object Controls the Visual Presentation
  51. 51. • Data source manages the content • Telling the collection view about the content • Inserting, deleting, and moving sections and items Designing Data Source and Delegate
  52. 52. • An efficient data source uses sections and items to help organize its underlying data objects. Data Source Manages the Content Arranging data objects using nested arrays
  53. 53. • The collection view asks your data source to provide this information when any of the following actions occur: • The collection view is displayed for the first time. • You assign a different data source object to the collection view. • You explicitly call the collection view’s reloadData method. • The collection view delegate executes a block using performBatchUpdates:completion: or any of move, insert, delete method. Telling Collection View About the Content
  54. 54. Telling Collection View About the Content - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView*)collectionView { // _data is a class member variable that contains one array per section. return self.dataCount; } ! - (NSInteger)collectionView:(UICollectionView*)collectionView numberOfItemsInSection:(NSInteger)section { NSArray* sectionArray = [self.dataArray objectAtIndex:section]; return [sectionArray count]; }
  55. 55. • To insert, delete, or move a single section or item, follow these steps: 1. Update the data in your data source object. 2. Call the appropriate method of the collection view to insert or delete the section or item. Inserting, Deleting, Moving Sections and Items
  56. 56. Inserting, Deleting, Moving Sections and Items [self.collectionView performBatchUpdates:^{ NSArray* itemPaths = [self.collectionView indexPathsForSelectedItems]; // Delete the items from the data source. [self deleteItemsFromDataSourceAtIndexPaths:itemPaths]; // Now delete the items from the collection view. [self.collectionView deleteItemsAtIndexPaths:tempArray]; ! }completion:nil];
  57. 57. Collection View Demo
  58. 58. Collection View Demo
  59. 59. Collection View Demo
  60. 60. Web Views
  61. 61. • A web view is a region that can display rich HTML content • Purpose: • View web content • View pdf, keynote, number, page file Introduction to Web Views
  62. 62. • Web views are implemented in the UIWebView class. • You cannot customize the appearance of a web view. • Configure web views in Interface Builder, in the Web View section of the Attributes Inspector as following: Implementation and Configuration
  63. 63. • To get your web view to display content, you simply create a UIWebView object, attach it to a window, and send it a request to load web content. Creating Content of Web Views [self.myWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@""]]];
  64. 64. Web View Demo
  65. 65. Web View Demo
  66. 66. Web View Demo
  67. 67. UICatalog Scroll View Programming Guide for iOS Introduction.htmll Collection View Programming Guide for iOS Introduction/Introduction.html Documentation
  68. 68. many thanks to please say Stanford University Developer Center xin chào
  69. 69. Next: Designing Universal Interface which used for iPad and iPhone