HomeОбразованиеRelated VideosMore From: Mark Moeykens

Custom Section Headers in Table View (Xcode 8, Swift 3)

157 ratings | 27531 views
In this tutorial I will show you how to create custom section headers for your table view. Here's the template I start out with that I mentioned in the video: http://swiftquickstart.blogspot.com/2016/05/basic-tableview-with-sections-template.html To learn how to create custom section headers with the storyboard, refer to my other video here: https://youtu.be/6CX2kJExI_M ✴️ Patreon: https://www.patreon.com/bigmountainstudio Facebook: https://www.facebook.com/bigmountainstudio Code Blog: http://swiftquickstart.blogspot.com/ Twitter: https://twitter.com/bigmtnstudio Want to buy me a coffee or a beer? ☕️ 🍻 🥇 Bitcoin: 1NoyTWYTZZXA6H8djuNp9WKRSJyvjwMFeA 🥈 Ethereum: 0x1CbAa9eaf94a06e60F1c5E9a5ca43DD8A631F89a 🥉 Bitcoin Cash: 1Jr96L7s8AP1cDx1Vy53mvAkXwvC97oVCp
Html code for embedding videos on your blog
Text Comments (23)
Tom Mohr (8 months ago)
This video is the reason I got my section headers to work - I appreciate you!
sai kiran yakkte (1 year ago)
I want to use the firebase data instead of manual section data. Can u please help me out. I get the data from the firestore into cells according to header sections. But the problem is when header item is touched it showing the error.
Adrian Tab (1 year ago)
a little improvement  tableview.numberOfRows(inSection: sender.tag) == 0 {    // add rows } else {   // remove rows }
motivated (1 year ago)
what means section here in sections[section]?
Mark Moeykens (1 year ago)
"section" is one of the parameter values coming into the function. It tells us which section number (index) we are handling. In our case we have 3 sections so the values will be either 0, 1 or 2.
Pudiing's (1 year ago)
You should never do that. You are going against all the way tableView was designed for. Never instantiate a cell or a header/footer, always dequeue from memory.
cometmace (10 months ago)
Exactly what I was thinking, but what's the identifierID of the default section header/footer?
Thanh Nguyễn Chí (1 year ago)
you can make tutorial about custom collectionview layout ? thank for share :))
Samuray Channel (1 year ago)
Good guide! THX!
Mark Moeykens (1 year ago)
You're welcome. :)
sancho (1 year ago)
Hello Mark, I love your videos and they are helping me learn. I just had a question regarding the headers, how do you keep them in place when the user scrolls down instead of floating down with the user? Thanks.
Eduardo Tavares (2 years ago)
what does this line do? var sectionData : [int : [string]] = [:] ? thx
Mark Moeykens (2 years ago)
No problem, Eduardo!
Eduardo Tavares (2 years ago)
Thank you very much Mark..I am really enjoying your videos congratulations man and thank you for sharing with us your knowledge..
Mark Moeykens (2 years ago)
Hi Eduardo. Let me break this down into parts. The [string] is an array of strings. Like an array of names: ["Mark", "Eduardo", "Jose"] Now I might want another array of strings, maybe for countries: ["Canada', "USA", "Mexico"] So now you have two arrays of strings. What if you want to show them both in a table, in their own sections? Say you want to show the names in the first section and the countries in the second section. What I do is put those string arrays ([string]) in a Dictionary. A dictionary is a like an array but holds two values for each entry instead of one. These are called a "key" for the first value and "value" for the second. So that looks like this for example: [0 : "USA"] [1 : "Canada"] [2 : "Mexico"] But for my table view, instead of have a string for the value, I have an array of strings instead. Using our example it looks like this: [0 : ["Mark", "Eduardo", "Jose"]] [1 : ["Canada', "USA", "Mexico"]] This makes it easy for me to display in a table view now. Section 0 has 3 rows and section 1 has 3 rows now. = [:] This is basically assigning an empty value to the dictionary. Does that help?
blake kei (2 years ago)
I wanna change table view section by keyboard every time. Do I make myself clear?
Usama Attique (2 years ago)
Mark i saw it, it really helped and i understood the concept behind but still i am having a little trouble because its not displaying the label on the headers and the first header appears below the first section not above. Here's my code. Please help me out. import UIKit class TableViewController: UITableViewController { var sections = ["Europe", "SouthAmerica", "Asia"] var Europe = ["France", "Spain","Germany", "Italy"] var SouthAmerica = ["Brazil", "Chile", "Columbia"] var Asia = ["Singapore", "Pakistan", "Iran"] var sectionData : [Int : [String]] = [:] override func viewDidLoad() { super.viewDidLoad() sectionData = [0: Europe, 1: SouthAmerica, 2: Asia] } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } // MARK: - Table view data source override func numberOfSections(in tableView: UITableView) -> Int { return sections.count } override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return (sectionData[section]?.count)! } override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) cell.textLabel?.text = sectionData[indexPath.section]![indexPath.row] return cell } override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? { let view = UIView() view.backgroundColor = UIColor.blue let label = UILabel() label.text = sections [section] label.frame = CGRect(x: 0, y: 0, width: 35, height: 35) view.addSubview(label) return view } override func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat { return 45 } }
Mark Moeykens (2 years ago)
Ah man, no problem. Trust me, we have all been there!
Usama Attique (2 years ago)
Haha thank you so much for the help Mark. I can't believe i didn't note such a trivial mistake.
Mark Moeykens (2 years ago)
Hi Usama, your last function should be heightForHeaderInSection, not heightForFooterInSection. :)
Usama Attique (2 years ago)
and the color isn't blue for headers, i am thinking this didn't even get called shouldn't it be?
Vonn Mesina (2 years ago)
Thank you so much! However, is there a way to do this in the storyboard?
Mark Moeykens (2 years ago)
You're welcome, Vonn. And yes, I have a video that will show you how to do this in the storyboard. :) https://youtu.be/6CX2kJExI_M

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.