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

Working with Image, Scroll, Picker
Collection, and Web View
These are conﬁdential sessions - please refrain from streaming, blogging, or taking pictures
Session 15
Vu Tran Lam
IAD-2013

• 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

• 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

• 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

• 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

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:

• 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;

• 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

• Scroll views are implemented in the UIScrollView class.
• Conﬁgure scroll views in Interface Builder, in the Scroll View

• 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 deﬁne these behaviors.
Behavior of Scroll Views

Customizing Appearance of Scroll Views

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

• Creating scroll views using storyboard
• Creating scroll views programmatically
• Conﬁguring scroll view
Creating and Conﬁguring Scroll Views

• 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

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;
}

• Configuring content inset
• Configuring scroll indicators
Configuring Scroll Views

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

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

• 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;
}

• 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];
}

• Setting up double-tap gesture recognizer
• Implementing method to recognize double-tap event
Zooming by Tapping

Setting Up Double-Tap Gesture Recognizer
- (void)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];
}

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];
}

• Conﬁguring paging mode
• Conﬁguring subviews of paging scroll view
Scrolling Using Paging Mode

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

Conﬁguring Subviews of Paging Scroll View
- (void)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
[self.scrollView addSubview:iPadAirImageView];
imageViewRect.origin.x += imageViewRect.size.width;
UIImageView *macbookAirImageView = [self createImageView:macbookAirImage
[self.scrollView addSubview:macbookAirImageView];
}

• 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

• Picker views are implemented in the UIPickerView class.
• Conﬁgure picker views in Interface Builder, in the Picker View
• You cannot customize the appearance of picker views.

• 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;
}

do this programmatically..
// Return the # of rows in each component..
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:
(NSInteger)component
{
{
return [self.countryList count];
}
return 0;
}

do this programmatically.
// Display the content of picker row
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row
forComponent:(NSInteger)component
{
{
return [[self.countryList objectAtIndex:row] objectForKey:@"name"];
}
return nil;
}

• 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

• Collection views are implemented in UICollectionView class.
• Collection view cells are implemented in UICollectionViewCell
class.
• Collection reusable views are implemented in the
UICollectionReusableView class.
• Conﬁgure collection views in Interface Builder, in the Collection
View section of the Attributes Inspector.

• 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

• 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

• Collection view basics.
• Designing data source and delegate.
Working with Collection Views

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

• 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

• 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

• Data source manages the content
• Telling the collection view about the content
• Inserting, deleting, and moving sections and items
Designing Data Source and Delegate

• An efﬁcient data source uses sections and items to help organize
its underlying data objects.
Data Source Manages the Content
Arranging data objects using
nested arrays

• 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 ﬁrst 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

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];
}

• 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

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];

• A web view is a region that can display
rich HTML content
• Purpose:
• View web content
• View pdf, keynote, number, page ﬁle
Introduction to Web Views

• Web views are implemented in the UIWebView class.
• You cannot customize the appearance of a web view.
• Conﬁgure web views in Interface Builder, in the Web View
section of the Attributes Inspector as following:

• 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/"]]];

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

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

Next: Designing Universal Interface which used
for iPad and iPhone

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

More Related Content

Viewers also liked (20)

Similar to Session 15 - Working with Image, Scroll, Collection, Picker, and Web View (20)

Recently uploaded (20)

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