Varying separator colours in UITableView - swift

Question

I have an account page in my app where I would like to have account information displayed above the first section in a tableview, similar to the Apple ID page in the settings.
My question is based around how to structure the view such that there is no separator shown above the profile picture. Or to make it that the information appears to be within the tableview but not within a section.
From reading around it seems either not possible or very difficult to have some separators showing and others not.
In the case of the apple ID page, is that picture, name and email in its own section or a cell that is part of the section beneath it?
The following picture is the closest I have got although that top separator proves difficult to hide.
Apologies for the broad nature of the question, however i think the aim is clear and once a solution is reached I will make the question more specific for future viewers.
Thanks.

Answer 1

Try this
//This will hide seperator for all rows
tableView.separatorStyle = UITableViewCellStyle.None
//For custom seperator
if indexPath.row != 0{
var aView: UIView = UIView()
aView.frame = CGRect(x:0,y:44,width:300,height:1)
aView.backgroundColor = UIColor.redColor()
cell .addSubview(aView)
}

Answer 2

You need to use custom view in your UITableViewCell for that.
1. Set UITableView Separator to none in storyboard.
2. Create a custom UITableViewCell with a UIView in it.
class TableCell: UITableViewCell
{
#IBOutlet weak var separatorView: UIView!
}
3. Set the backgroundColor of separatorView in cellForRowAt according to your requirement.
Example:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
{
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! TableCell
switch indexPath.row
{
case 0:
cell.backgroundColor = .red
case 1:
cell.backgroundColor = .green
case 2:
cell.backgroundColor = .blue
case 3:
cell.backgroundColor = .yellow
default:
cell.backgroundColor = .orange
}
return cell
}
Screenshot:

Answer 3

Thanks Dev and PGDev, I was able to come up with a nice solution that worked well for static cells. I made an extension for UITableViewCell that looks like this.
let separatorColour = UIColor(red: 200/255, green: 200/255, blue: 200/255, alpha: 0.5)
extension UITableViewCell {
func separator(topInset: CGFloat, btmInset: CGFloat, showTop: Bool, showBtm: Bool) {
if showTop {
let topSeparator: UIView = UIView()
topSeparator.frame = CGRect(x: topInset, y: 0, width: frame.width, height: 0.5)
topSeparator.backgroundColor = separatorColour
addSubview(topSeparator)
}
if showBtm {
let btmSeparator: UIView = UIView()
btmSeparator.frame = CGRect(x: btmInset, y: frame.height - 0.5, width: frame.width, height: 0.5)
btmSeparator.backgroundColor = separatorColour
addSubview(btmSeparator)
}
}
func btnSeparator() {
let topSeparator: UIView = UIView()
topSeparator.frame = CGRect(x: 0, y: 0, width: frame.width, height: 0.5)
topSeparator.backgroundColor = separatorColour
addSubview(topSeparator)
let btmSeparator: UIView = UIView()
btmSeparator.frame = CGRect(x: 16, y: frame.height - 0.5, width: frame.width - 32, height: 0.5)
btmSeparator.backgroundColor = separatorColour
addSubview(btmSeparator)
}
}
In the first function separator() you can simply choose the inset for top and bottom separator and whether they are visible or not.
TopCell
So in the case of the cell with the name label shown in the picture above, both top and bottom separators are visible. However because it is supposed to appear as the first cell in the section, it has no top inset and an appropriate bottom inset.
MiddleCell
In the case of the cell with the email label it only has the lower separator (with inset) visible as the cell above has a bottom separator.
BottomCell
For the cell with the password label, it only has the lower separator (without offset) visible as the cell above has a bottom separator.
SpecialCase
The btnSeparator() function was just for the case of the help and support button, where I wanted inset on both sides.
Now to implement this extension, I used a switch statement inside the cellForRowAt function to give each cell the appropriate extension and this is what that looks like:
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = super.tableView(tableView, cellForRowAt: indexPath)
let inset: CGFloat = 16
switch indexPath {
// First Section
case [0,1]:
cell.separator(topInset: 0, btmInset: inset, showTop: true, showBtm: true)
case [0,2]:
cell.separator(topInset: inset, btmInset: inset, showTop: false, showBtm: true)
case [0,3]:
cell.separator(topInset: inset, btmInset: 0, showTop: false, showBtm: true)
// Second Section
case [1,0]:
cell.separator(topInset: 0, btmInset: inset, showTop: true, showBtm: true)
case [1,1]:
cell.separator(topInset: inset, btmInset: inset, showTop: false, showBtm: true)
case [1,2]:
cell.separator(topInset: inset, btmInset: 0, showTop: false, showBtm: true)
// Third Section
case [2,0]:
cell.btnSeparator()
case [2,1]:
cell.separator(topInset: inset, btmInset: 0, showTop: false, showBtm: true)
case [2,3]:
cell.separator(topInset: 0, btmInset: 0, showTop: true, showBtm: true)
default:
print("default")
}
return cell
}
Be sure to set separator to none in the Storyboard or use:
tableView.separatorStyle = UITableViewCellStyle.None