Adding index list and section headers to translated tableview - swift

Question

How to add section headers and index list to UITableView in this use case?
#IBOutlet var tableView: UITableView!
var detail: Detail? = nil
var list = [tabledata]()
let search = UISearchController(searchResultsController: nil)
override func viewDidLoad() {
super.viewDidLoad()
list = [
tabledata(name:"something".localized, sort:"sort.something".localized, id:"something.html"),
tabledata(name:"somethingelse".localized, sort:"sort.somethingelse".localized, id:"somethingelse.html"),
...
]
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "library", for: indexPath)
var data: tabledata
data = list[indexPath.row]
cell.textLabel!.text = data.name
return cell
}
Now the point is that table data are going to be translated.
Like if the user has set the language to English, sorting is unneeded;but if the language is set to German etc., section headers have to be applied to translated table.
Can someone figure out how to call a section letter from inside the dictionary, like
tabledata(section: "a", name:"anaconda".localized, sort:"sort.anaconda".localized, id:"anaconda.html")
Note that
name: is the actual cell name going to be .localized
sort: has to help characters like á é etc. in cell name to sort properly (avoiding them to show in the end of alphabet)
id: calls the html file location to display in detailViewController ('cause name has to be translated and we want a static text here)
A usual implementation of section headers and index list will result in something like
T // section header
translation // cell names
transmission
...
T // table in
Übersetzung // another language
Getriebe
...
Maybe there could be a function() which will get all the sections from tabledata and assign them to corresponding letters in var sectionletters = ["A", "B", ...] but that's above my beginner-limited knowledge.
What's the correct model for translated tableview?
Thanks for help!

Answer 1

There are a few ways to accomplish this. One of the simplest is to use the delegate functions provided with UITableView.
For organizational purposes I'd start by creating a class to represent sections. Something like this:
class GhostSection {
// a title for this section
var sectionTitle: String
// a list of items for this particular section
var items: [Ghost] = []
init(title: String, items: [Ghost]) {
sectionTitle = title
self.items = items
}
}
Then update the list variable to use the sections instead of a raw list of items:
var tabledata = [GhostSections]()
Ideally I'd create my GhostSection from a json object, but if it must be done manually then something like this would work:
// setup the table data to use GhostSection instances for each section
var tabledata = [
GhostSection(title: "a", items: [Ghost(name:"an".localized, sort:"sort.an".localized, id:"0101")]),
GhostSection(title: "b", items: [Ghost(name:"bc".localized, sort:"sort.bc".localized, id:"0102")]),
GhostSection(title: "c", items: [Ghost(name:"cd".localized, sort:"sort.cd".localized, id:"0103")])
]
I'd have numberOfSections(in tableView: UITableView) return the tabledata count, which would be the count of the total number of sections:
func numberOfSections(in tableView: UITableView) -> Int {
return tabledata.count
}
and the numberOfRowsInSection return the list count for each items array on each GhostSection in your tabledata array:
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return tabledata[section].items.count
}
Then I'd update cellForRow(at indexPath) to return the info for the right cell in that section:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "library", for: indexPath)
// this gets the section data, then gets the item from that section
var data = list[indexPath.section].items[indexPath.row]
cell.textLabel?.text = data.name
return cell
}
I also like to create my headers as reusable nib views, so the ListHeaderView just has a title label in it:
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
// this loads the view from the nib
guard let view = ListHeaderView.fromNib() as? ListHeaderView else {
return nil
}
// get the section object for this current section
let data = tabledata[section]
// and set the title label text here from our section object
view.titleLabel.text = data.sectionTitle
return view
}
// if you want to also have a custom footer you can do that here...
func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
return UIView()
}
// and let the header height be dynamic, or return a set height here...
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return UITableViewAutomaticDimension
}
In case you want to use this approach here's how I implemented the fromNib() function so you can instantiate any view that has an associated .xib file:
public extension UIView {
public static func fromNib() -> UIView? {
let nibName = String(describing: self)
let bundle = Bundle(for: self)
let nib = UINib(nibName: nibName, bundle: bundle)
guard let view = nib.instantiate(withOwner: nil, options: nil).first as? UIView else {
print("Unable to instantiate nib named: \(nibName) in bundle: \(String(describing: bundle)) -- nib: \(String(describing: nib))")
return nil
}
return view
}
}
Also note it's a good idea to get in the habit of using camel case for class/object names with the first letter capitalized IF you want to keep with current conventions. So instead of naming your class ghost get in the habit of doing Ghost. For variables the convention is also camel case but start with a lowercase.

Answer 2

The easiest way is to use sections: one section for each first letter.
First, update your tableView(_:cellForRowAt:) to deal with sections: the first word in a section corresponds to the row value 0.
The section number corresponds to the letter: 0 for A, 1 for B, ...
In your code, you get an old cell correctly, but the way you set the text must be changed. You are doing something like that: cell.textLabel?.text = list[indexPath.row]. But this will not work because with sections, the indexPath.row parameter value is no longer the index of the ghost in your list: your list is a 1-dimension array, but with sections, UIKit uses a two dimensional way to give you the reference to the ghost: the arguments indexPath.row is now the index number of the ghost in the section indexPath.section. So if you have 4 ghost names, in your list, for instance "axx" (section 0, row 0), "ayy" (section 0, row 1), "bxx" (section 1, row 0) and "byy" (section 1, row 1), the values of the arguments to refer to "bxx", for instance, are 1 for indexPath.section and 0 for indexPath.row. With your current line of code, you will set the following text: list[0], so "axx". But it's "bxx" that corresponds to section 1 and row 0.
To get the correct behavior, you may process the whole list of ghosts, extract the ones that correspond to the letter for indexPath.section into another array, and finally get the element of this new array that has an index that equals to indexPath.row.
But as you see, this is a bit more tricky than we would like.
The best way to do all of that, easily, is to change your data source type: use a 2-dimensional array instead of your list that is of type [ghost].
You could for instance use something like:
var myNewDataSource : [String: [ghost]] = [
"A": [ghost1withNameStartingWithA, ghost2withNameStartingWithA, ...],
"B": [ghost1withNameStartingWithB, ghost2withNameStartingWithB, ...],
...
]
This way, everything is simpler.
Now, override this function, to have 26 letters or sections (you may customize this function if you want to display only letters containing at least one word):
override func numberOfSections(in tableView: UITableView) -> Int {
return 26
}
Override and implement correctly this function, to indicate how many words there are in a section, in your dictionary:
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
[ COMPUTE THE NUMBER OF ROWS/WORDS FOR THIS LETTER AND RETURN THE VALUE ]
}
Then return a String with the letter for each section, in order to display this letter in the GUI:
override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
[ RETURN THE LETTER CORRESPONDING TO THE SECTION: "A" for section 0, "B" for section 1, etc. ]
}
Finally, customize your sections, since you seems to want a specific background color and maybe a bold font or another font size, according to your screenshot:
override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
let header = view as! UITableViewHeaderFooterView
header.backgroundView?.backgroundColor = UIColor(red: 253.0/255.0, green: 240.0/255.0, blue: 196.0/255.0, alpha: 1)
header.textLabel?.textColor = .black
header.textLabel?.font = UIFont(name: "Helvetica-Bold", size: 19)
}