Creating Tableview With Section Indexes

Overview

UILocalizedIndexedCollation is a class that helps to organise data in table views with section index titles in a locale-aware manner. Rather than creating the object directly, a shared instance corresponding to the current locale supported by your application is accessed, with UILocalizedIndexedCollation +currentCollation.

The first task for UILocalizedIndexedCollation is to determine what section index titles to display for the current locale, which can be read from the sectionIndexTitles property.

There are different section index titles for different locale. Like

en_US locale has section titles are : A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z, #
AR_sa locale has section titles are : A, B, C, D, E, F, G, H, I, J, K, L, M, N, O, P, Q, R, S, T, U, V, W, X, Y, Z, آ, ب, ت, ث, ج, ح, خ, د, ذ, ر, ز, س, ش, ص, ض, ط, ظ, ع, غ, ف, ق, ك, ل, م, ن, ه, و, ي, #

To prepare the data for a section index, your view controller creates a indexed-collation object and then, for each model object that is to be indexed, calls section(for:collationStringSelector:). This method determines the section in which each of these objects should appear and returns an integer that identifies the section.

The table-view controller then puts each object in a local array for its section. For each section array, the controller calls the sortedArray(from:collationStringSelector:) method to sort all of the objects in the section. The indexed-collation object is now the data store that the view controller uses to provide section-index data to the table view.

Now, here is a demo project and code :

We have a Model class Contact like as:

In view controller we have a collection of contacts (which will be shown in tableview in alphabetical sections) like as :

In the first part of the demo, we have created a tableview without sections.

Here is the code for TableViewDataSource and TableViewDelegate :
Before implementing tableview datasource, create a tableview cell for contact like below :

Add this code in your ViewController file (Out of ViewContoller class scope)

Now Run your app and see the output screen : it looks like below screenshot

ScreenShot1

Next, for section wise table view, we need to create partition of contacts array in alphabetical sections.

For this we have used the UILocalizedIndexCollation class.
Add bellow line of code in your ViewController

Above extension have a func partitionObjects(_:) , which contain code in 3 parts, each one is describe in code.
This func will return a array of sorted arrays in alphabetical order.

Now we have used this func from ViewController for partition of contacts array in sections.
Add below line of code in ViewController :

In this array, each item contains the array of Contact objects, which is used to bind with tableview.

Now we should need to modify the viewDidLoad func by adding below line of code :

Now viewDidLoad func looks like as below:

Here collation.partitionObjects is used to partition your collection into sections, which needs two parameters, first parameter is a array and second parameter is a Selector.

Parameters:

  1. Array: an array to which you want to partition into sections.
  2. Selector: Selector is used to grouped your collection into sections. (like : name, title, descriptions of the array items’s object)

Make sure you should pass a string property or func (which returns a string) as a Selector.

Another thing which you should need to know is that, the property or func which you have to used as Selector should be @objc type.

In this example, i have used name property of Contact class as Selector. To make the Contact class as objective c type, Contact class should inherited from NSObject class.

I have replaced Contact class with below code:

Now next step, to create the section tableview, we need to bind the tableview datasource with contactsWithSections array.
For this, i have replaced tableview datasource code with below code :

Now run the project and see the output. Here is the screenshot of output screen

ScreenShot2

In above screenshot, you can see the tableview with sections. Each contacts are shown in its proper section titles. But there are some unexpected sections, which does not have any contact items in it.
To remove these empty item sections we need to modify our code once again.

First of all we have to modify the returns type of partitionObjects(_:) func of UILocalizedIndexedCollation extension.
For that i have replaced old partitionObjects(_:) func with below new func :

This new partitionObjects(_:) func returns a Tuple Type like as : ([AnyObject], [String]). This tuple contain two types in it. First type of an array of AnyObject in sections and another one is an array of strings which contains custom section titles for tableview.

Now, we also need to modify the code in viewDidLoad() func.
Before that we also declare a String array variable named as sectionTitles in ViewController class for storing the section tiles for tableview.

and replace below code with

And also replace below code with tableview datasource and delegate

Now Run your project and see the output screen, it looks like as below screenshot:

ScreenShot3

Above code is written in swift 3.0
mm

Vikash Kumar Sr. iOS Developer

Vikash was a Sr. iOS developer at Yudiz Solutions - a leading iOS App development company. Vikash has a love for creativity and enjoys experimenting various techniques in iOS app development.

Comments are closed.

Top