CIS 55 –

iOS Programming
Manish Goel
 Lecture Objectives

• Adding Sections and Index List to UITableView

• For quick scrolling in large sets of data – define table data in sections and give each
section a specific header – similar to creating a UICollectionView from a
UITableView
• Customizing the App using code only – no storyboard attribute changes
• Sorting the data a into a dictionary

• Using Unwind Segues to Add Data

 Table Sections and Index Lists
(code and pics - courtesy Simon Ng)

• Create a plain Table View app like before

• Collect your data and pics

• Implement the usual methods

• numberOfSectionsInTableView
• numberOfRowsInSection
• cellForRowAtIndexPath

• For the Sections and Index, other methods needed

• titleForHeaderInSection
• sectionIndexTitlesForTableView
• sectionForSectionIndexTitle
Delete the default view controller and file
Add a navigation controller with
associated table view controller
A simple table view project
Add your images – match names to data values in code
Add the code file for the TVC
Add your images – match names to data values in code
Change the name of the TVC
and set the identity class
Create our Animals array in an unsorted fashion.
Create an array for Section Titles and an Animals Dictionary.
Through the use of our
dictionary variables, we will
sort our data array like
above in memory into a
sorted dictionary like below.
To create the dictionary:

• Find the first letter in a data

value
• If the letter value happens to
be in the dictionary, append
the data to that section of
the dictionary, otherwise
create a new section and
append there
• Repeat the process for all
data elements
• Finally, sort the sub-arrays in
the dictionary

• Update the viewDidLoad to

ensure dictionary is created
before view is presented
1. The table will have multiple sections – one for each letter where data is available –numberOfSections in
tableView needs to be updated accordingly.
2. Similarly, the number of rows in each section will be different, so check each sections data to update
numberOfRowsInSection.
3. To show titles for each section, titleForHeaderInSection needs to be implemented
Since our image filenames
are not in corresponding
array like before, but the
filenames match the data
values (with ‘_’ instead of
space), programmatically
figure out which file
corresponds to which data
value and use it in the
cellForRowAtIndexPath

Finally, implement the

sectionIndexTitlesForTableView
to show titles which can be
clicked to directly go to section
An index list is there but only for
sections that have data – inconsistent
app behavior. To fix:
- Define an array for all possible
section titles
- Update sectionIndexTitles for
tableView to use this array to
display index titles
- Override
sectionForSectionIndexTitle to
allow going to sections having
data only
To customize the header sections, implement
heightForHeaderInSection and willDisplayHeaderView to allow
for custom fonts or images
 Lecture Objectives

• Adding Sections and Index List to UITableView

• Using Unwind Segues to Add Data

• Segue from the main view to a secondary view
• Transfer data back from the secondary view as a source instead of destination
In our TVC, need to
add code to receive
unwind Segue action
from the add view
Ctrl-click-drag from the
Cancel button to the Exit
of VC and select
unwindCancelWithSegue
Ctrl-click-drag from the
Save button to the Exit of
VC and select
unwindSaveWithSegue
Give the unwindCancel
segue an identifier
Give the unwindSave
segue an identifier also
Create two variables to
receive your data from
the outlets in the prepare
for segue of the
addAnimalVC
In the TVC, change the
type of animal array to
var to be able to get new
data from addAnimalVC
In our TVC:
- Nothing to do in ‘unwindCancel’
- In ‘unwindSave’, receive the
animal name (animal file is
added to Assets already) and
append it to both the data array
and dictionary