2. Working with Table Views and Search
Bar
These are confidential sessions - please refrain from streaming, blogging, or taking pictures
Session 14
Vu Tran Lam
IAD-2013
3. • Introduction to table views
• Customizng the table view appearance
• Navigating a data hierarchy with table views
• Table view manipulation
• Introduction to search bar
• Customizing search bar appearance
• Working with search bar in table view
Today’s Topics
5. • A table view presents data in a scrollable list of multiple rows that
may be divided into sections.
• It presents data in a single-column list of multiple rows and is a
means for displaying and editing hierarchical lists of information.
• In normal mode, selecting a message allows the user to read it.
• In editing mode, selecting a message allows the user to delete it
from the inbox.
• Table views provide a simple yet versatile interface for managing
and interacting with collections of data.
Introduction to Table Views
7. • Navigate through hierarchically structured data
• View an indexed list of items
• See detail information and controls in visually distinct groupings
• Interact with a selectable list of options
Purpose
8. • Table views are implemented in the UITableView class
• Individual table cell are implemented in the UITableViewCell class
• Table headers and footers are implemented in the
UITableViewHeaderFooterView class
Implementation
9. • Configure table views in Interface Builder, in the Table View section
of the Attributes Inspector:
Configuration
10. • Content of table views
• Behavior of table views
• Appearance of table views
• Table view styles
Customizing Table Views
11. • To display content, a table view must have a data source.
• The data source mediates between the app’s data model and the
table view. A table view’s data source must conform to the
UITableViewDataSource protocol.
• Each individual table cell can display a variety of content.
• Cells that use the default basic style can display an image and text
label, and detail text label.
Content of Table Views
12. • Table views need a delegate to manages the appearance and
behavior.
• By assigning a view controller as the table view’s delegate and
implementing the UITableViewDelegate methods, you can allow
the delegate to manage selections, configure headers and
footers,delete and reorder cells.
• Table selection style controls the number of cells a user can select at
a given time.
• There are three types of selection available for individual cells in a
table view: single, multiple, or none.
Behavior of Table Views
14. • Plain table views
• Grouped table views
• Standard styles for table view cells
Table View Styles
15. • A table view in the plain (or regular) style displays rows that stretch
across the screen and have a creamy white background.
• A plain table view can have one or more sections, sections can
have one or more rows, and each section can have its own header
or footer title.
Plain View Styles
23. • A grouped table view also displays a list of information, but it
groups related rows in visually distinct sections.
• Each section has rounded corners and by default appears against a
bluish-gray background.
• Each section may have text or an image for its header or footer to
provide some context or summary for the section.
Grouped View Styles
36. • Drag a navigation controller from the library.
• Interface Builder creates a navigation controller and a view
controller, and it creates a relationship between them.
• Display it as the first view controller by selecting the option “Is Initial
View Controller” in the Attributes inspector.
Creating a Table Views Using Storyboard
1
2
3
39. • Create root view controller for navigation object.
• Initializing initWithRootViewController: method (navigation
controller).
• Set navigation controller as root view controller of your window.
Creating Table Views Programmatically
1
2
3
window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
window.rootViewController = navigationController;
[window makeKeyAndVisible];
40. Creating Table Views Programmatically
- (void)applicationDidFinishLaunching:(UIApplication *)application
{
// Create the root view controller for the navigation object
UIViewController *myViewController = [[MyViewController alloc] init];
// Initializing navigation controller using initWithRootViewController: method
navigationController = [[UINavigationController alloc]
initWithRootViewController:myViewController];
!
// Set navigation controller as root view controller of your window
window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
window.rootViewController = navigationController;
[window makeKeyAndVisible];
}
41. • Change table view to editing mode
• Deleting a table view row
• Adding a table view row
Inserting and Deleting Rows and Sections
42. • A Table view goes into editing mode when it receives a
setEditing:animated: message.
• Calling sequence for inserting or deleting rows in a table view
Change Table View to Editing Mode
43. Deleting a Table View Row
• Set the right item of the navigation bar to be standard Edit button
• View controller responding to setEditing:animated:
• Customizing the editing style of rows
• Updating the data-model array and deleting the row
1
2
3
4
44. Deleting a Table View Row
• Set the right item of the navigation bar to be standard Edit button1
self.navigationItem.rightBarButtonItem = self.editButton;
45. Deleting a Table View Row
• Set the right item of the navigation bar to be standard Edit button
• View controller responding to setEditing:animated:
1
2
- (void)setEditing:(BOOL)editing animated:(BOOL)animated
{
[super setEditing:editing animated:animated];
[self.tableView setEditing:editing animated:YES];
if (editing)
{
addButton.enabled = NO;
}
else
{
addButton.enabled = YES;
}
}
46. Deleting a Table View Row
• Set the right item of the navigation bar to be standard Edit button
• View controller responding to setEditing:animated:
• Customizing the editing style of rows
1
2
3
- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView
editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath
{
SimpleEditableListViewController *controller =
(SimpleEditableListViewController *)[[UIApplication
sharedApplication] delegate];
if (indexPath.row == [controller countOfList]-1)
{
return UITableViewCellEditingStyleInsert;
}
else
{
return UITableViewCellEditingStyleDelete;
}
}
47. Deleting a Table View Row
• Set the right item of the navigation bar to be standard Edit button
• View controller responding to setEditing:animated:
• Customizing the editing style of rows
• Updating the data-model array and deleting the row
1
2
3
4
- (void)tableView:(UITableView *)tableView commitEditingStyle:
(UITableViewCellEditingStyle)editingStyle
forRowAtIndexPath:(NSIndexPath *)indexPath
{
// If row is deleted, remove it from the list.
if (editingStyle == UITableViewCellEditingStyleDelete)
{
SimpleEditableListViewController *controller =
(SimpleEditableListViewController *)[[UIApplication
sharedApplication] delegate];
[controller removeObjectFromListAtIndex:indexPath.row];
[tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath]
withRowAnimation:UITableViewRowAnimationFade];
}
}
48. • Adding an Add button to the navigation bar
• Responding to a tap on the Add button
• Adding the new item to the data-model array
Adding a Table View Row
1
2
3
49. Adding a Table View Row
• Adding an Add button to the navigation bar1
UIBarButtonItem addButton = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self
action:@selector(addItemAction:)];
self.navigationItem.rightBarButtonItem = addButton;
50. Adding a Table View Row
• Adding an Add button to the navigation bar
• Responding to a tap on the Add button
1
2
- (void)addItemAction:sender
{
if (itemInputController == nil)
{
itemInputViewController = [[ItemInputViewController alloc] init];
}
UINavigationController *navigationController = [[UINavigationController
alloc] initWithRootViewController:itemInputViewController];
[[self navigationController] presentModalViewController:navigationController
animated:YES];
}
51. Adding a Table View Row
• Adding an Add button to the navigation bar
• Responding to a tap on the Add button
• Adding the new item to the data-model array
1
2
3
- (void)save:sender
{
UITextField *textField = [(EditableTableViewTextField *)[self.tableView
cellForRowAtIndexPath:[NSIndexPath indexPathForRow:0
inSection:0]] textField];
SimpleEditableListViewController *controller =
(SimpleEditableListViewController *)[[UIApplication
sharedApplication] delegate];
NSString *newItem = textField.text;
if (newItem != nil)
{
[controller insertObject:newItem inListAtIndex:[controller countOfList]];
}
[self dismissModalViewControllerAnimated:YES];
}
54. • A search bar provides an interface for text-based searches with a
text box and buttons such as search and cancel.
• A search bar accepts text from users, which can be used as input
for a search (shown here with placeholder text).
• A scope bar, which is available only in conjunction with a search bar
- allows users to define the scope of a search (shown here below a
search bar).
Introduction to Search Bar
55. • Quickly find a value in a large collection
• Create a scope filter
Purpose
56. • Search bars are implemented in the UISearchBar class
• Configure search bars in Interface Builder, in the Search Bar section
of the Attributes Inspector
Implementation and Configuration
57. • You can customize the appearance of a search bar by setting
the properties depicted below:
Customizing Search Bar Appearance
• UISearchBar = Search bar + Scope
58. • Creating a search bar in table view
• Creating a search bar scope
• Displaying the result in table view
Working with Search Bar in Table View
59. • Drag a search bar and search display controller from the library.
• Interface Builder creates a search bar view controller and search
display controllers, and it creates relationships between them.
Creating a Search Bar in Table View
60. • Creating a search bar scope
Creating a Search Bar in Table View
61. • Displaying the result in table view
Creating a Search Bar in Table View
#pragma mark - UISearchDisplayController Delegate Methods
!
- (BOOL)searchDisplayController:(UISearchDisplayController *)controller
shouldReloadTableForSearchScope:(NSInteger)searchOption
{
NSString *searchString = [self.searchDisplayController.searchBar text];
NSString *scope;
if (searchOption > 0)
{
scope = [[Product deviceTypeNames] objectAtIndex:(searchOption - 1)];
}
[self updateFilteredContentForProductName:searchString type:scope];
// Return YES to cause the search result table view to be reloaded
return YES;
}