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

1. iOS Application Development

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. • 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. Image Views

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. • 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. • 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. 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. • 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. Scroll Views

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. • 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. • 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. Customizing Appearance of Scroll Views

15. • Content of table views
• Behavior of table views
• Appearance of table views
• Table view styles
Changing the content of Image Views

16. • Creating scroll views using storyboard
• Creating scroll views programmatically
• Configuring scroll view
Creating and Configuring Scroll Views

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. 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. • Configuring content inset
• Configuring scroll indicators
Configuring Scroll Views

20. • Basic zooming using the pinch gestures
• Zooming by tapping
• Scrolling using paging mode
Handling Scroll Views

21. • Supporting pinch zoom gestures
• Zooming programmatically
Basic Zooming Using the Pinch Gestures

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. • 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. • Setting up double-tap gesture recognizer
• Implementing method to recognize double-tap event
Zooming by Tapping

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. 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. • Configuring paging mode
• Configuring subviews of paging scroll view
Scrolling Using Paging Mode

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. 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. Scroll View Demo

31. Scroll View Demo

32. Scroll View Demo

33. Picker Views

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. • 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. • 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. • 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. • 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. Picker View Demo

40. Picker View Demo

41. Picker View Demo

42. Collection Views

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. • 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. • 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. • 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. • Collection view basics.
• Designing data source and delegate.
Working with Collection Views

48. • Collection view is a collaboration of objects
• Layout object controls the visual presentation
Collection View Basics

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. • 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. • 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. • 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. • 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. 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. • 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. 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. Collection View Demo

58. Collection View Demo

59. Collection View Demo

60. Web Views

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. • 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. • 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:@"http://www.apple.com/"]]];

64. Web View Demo

65. Web View Demo

66. Web View Demo

67. UICatalog
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/UIKitUICatalog/index.htm
Scroll View Programming Guide for iOS
https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptual/UIScrollView_pg/Introduction/
Introduction.htmll
Collection View Programming Guide for iOS
https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptual/CollectionViewPGforIOS/
Introduction/Introduction.html
Documentation

68. many thanks
to
lamvt@fpt.com.vn
please
say
Stanford University
https://developer.apple.com
Developer Center
http://www.stanford.edu/class/cs193p
xin
chào

69. Next: Designing Universal Interface which used
for iPad and iPhone