CODEWITHSUNDEEP
iosswiftuitableviewuiviewcontroller
AND4011002849
AND4011002849

Reputation: 2001

How to create a single line view separator in UITableView

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

enter image description here

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

Upvotes: 1

Views: 3379

Answers (3)

Ankit Jayaswal
Ankit Jayaswal

Reputation: 5699

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

  1. 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
  1. 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
  1. 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
}

Upvotes: 3

Jayachandra A
Jayachandra A

Reputation: 1342

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)
    }

Upvotes: 4

Mr.Javed Multani
Mr.Javed Multani

Reputation: 13294

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)

Upvotes: 1

Related Questions