How to create a single line view separator in UITableView

Question

How can I create a single line view separator in UITableView like the NavigationDrawer of Android:

I know that in Android it's easy, but I can't find a reference of that for iOS, how is it call on iOS, I just want a single line separator in my menu view, all the videos and tutorials that I can find for iOS shows how to add an expandable menu, which is not what I want, I want just one single line separating two groups of an array of strings. Is that possible on iOS, where can I found a tutorial teaching that?

my code so far:

import UIKit class MenuViewController: UIViewController, UITableViewDelegate, UITableViewDataSource { //Outlets @IBOutlet weak var tableView: UITableView! var menuNameArr = [String]() var iconImage = [UIImage]() override func viewDidLoad() { super.viewDidLoad() tableView.alwaysBounceVertical = false; tableView.separatorStyle = .none menuNameArr = ["Meu Perfil", "Meus Cupons", "Extrato de pontos", "Configurações", "Termos de uso", "Entre em Contato", "Avaliar aplicativo", "Sair"] iconImage = [UIImage(named: "user")!,UIImage(named: "cupons")!, UIImage(named: "extrato")!, UIImage(named: "config")!, UIImage(named: "termos")!, UIImage(named: "contato")!, UIImage(named: "avaliar")!, UIImage(named: "sair")!] self.revealViewController().rearViewRevealWidth = self.view.frame.size.width - 60 } func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return menuNameArr.count } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "MenuTableViewCell") as! MenuTableViewCell cell.imgIcon.image = iconImage[indexPath.row] cell.lblMenuName.text! = menuNameArr[indexPath.row] return cell } func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) { } }

From "Configurações" to "Sair" I want that part of the array to be the second part of the menu

Just add the drawing of the line to your drawing of that cell. — matt
– matt, Commented Mar 21, 2018 at 3:59
Duplicate of stackoverflow.com/questions/20283505/… and many many others — matt
– matt, Commented Mar 21, 2018 at 4:01
Possible duplicate of Hiding UITableViewCell separator for individual cells — Waqas Sultan
– Waqas Sultan, Commented Mar 21, 2018 at 5:08

Jayachandra A · Accepted Answer · 2018-03-21 06:27:41Z

try this

 if indexPath.row == 3{ let separator = UILabel(frame: CGRect(x: 15, y: cell.frame.size.height - 1, width: cell.frame.size.width, height: 1)) separator.backgroundColor = UIColor.red cell.contentView.addSubview(separator) }

Ankit Jayaswal · Accepted Answer · 2018-03-23 10:39:31Z

There are 3 type of doing this, You can choose any one of them based on your requirement and simplest seems to you:

Create a custom separator view at bottom of cell for indexpath.row = 3

cell.imgIcon.image = iconImage[indexPath.row] cell.lblMenuName.text! = menuNameArr[indexPath.row] if indexPath.row == 3 { let separatorView = UIView.init(frame: CGRect(x: 15, y: cell.frame.size.height - 1, width: cell.frame.size.width - 15, height: 1)) separatorView.backgroundColor = .lightGray cell.contentView.addSubview(separatorView) } return cell

Can take a UIView of height "1px" at the bottom of cell at storyboard with clear colour, and assign colour for indexpath.row = 3 in code. But creating a extra view in table cell is not a good idea.

cell.imgIcon.image = iconImage[indexPath.row] cell.lblMenuName.text! = menuNameArr[indexPath.row] if indexPath.row == 3 { cell.sepatatorView.backgroundColor = .lightGray } else { cell.sepatatorView.backgroundColor = .clear } return cell

You can divide your name and icon array into 2 subarrays, You can work with 2 sections, with section height of "1px" and lightGray colour.

Note: With this approach you can even customize your separator, rather than just gray line, you can add a custom view/title there

let menuNameArr = [ ["Meu Perfil", "Meus Cupons", "Extrato de pontos"], ["Configurações", "Termos de uso", "Entre em Contato", "Avaliar aplicativo", "Sair"] ] let iconImage = [ [UIImage(named: "user")!,UIImage(named: "cupons")!, UIImage(named: "extrato")!], [ UIImage(named: "config")!, UIImage(named: "termos")!, UIImage(named: "contato")!, UIImage(named: "avaliar")!, UIImage(named: "sair")!] ]

Update the table view's method accordingly.

func numberOfSections(in tableView: UITableView) -> Int { return 2 } func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat { return 1.0 } func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? { let separatorView = UIView.init(frame: CGRect(x: 15, y: 0, width: tableView.frame.size.width - 15, height: 1)) separatorView.backgroundColor = .lightGray return separatorView } func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return menuNameArr[section].count } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "MenuTableViewCell") as! MenuTableViewCell cell.imgIcon.image = iconImage[indexPath.section][indexPath.row] cell.lblMenuName.text! = menuNameArr[indexPath.section][indexPath.row] return cell }

That's awesome, thank you for your time and explanation, it really helped me!

Mr.Javed Multani · Accepted Answer · 2018-03-21 05:16:41Z

Put Condition for particular indexPath where you have show it else hide it. simple

Custom separator line, put this code in a custom cell that's a subclass of UITableViewCell(or in CellForRow or WillDisplay TableViewDelegates for non custom cell):

let separatorLine = UIImageView.init(frame: CGRect(x: 8, y: 64, width: cell.frame.width - 16, height: 2)) separatorLine.backgroundColor = .blue addSubview(separatorLine)

Thanks, @Mr.Javed but I think you need to explain in brief with else condition because that's might be applied to all indexpath if he doesn't use false condition.

Collectives™ on Stack Overflow

How to create a single line view separator in UITableView

3 Answers 3

Comments

1 Comment

2 Comments

Linked

Hot Network Questions