Rakesh
Rakesh

Reputation: 131

How to add spacing in between two custom Table view cells in swift ios?

 func numberOfSections(in tableView: UITableView) -> Int {

    return 1
}


func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

    return leadername.count

}  

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: "leadCell") as! LeaderBoardTableViewCell
    cell.leaderNameLbl.text = leadername[indexPath.row]
    cell.areaLbl.text = areaName[indexPath.row]
    cell.approvalLabel.text = approvalrate[indexPath.row]
    cell.leaderImageView?.image = UIImage(named: leaderImage[indexPath.row])
    cell.backgroundColor = UIColor.white

    //cell.contentView.backgroundColor = transparentColor


            return cell

}

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {


}

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {

    return 85
}

I have checked many solutions but none of them is working for me. i have changed the cell height, tableview height etc. But it's not working for me. How can we achieve this? Please help.

Upvotes: 0

Views: 2622

Answers (2)

Coffee and Waffles
Coffee and Waffles

Reputation: 158

A not-so-official way to do this can be adding a little blank empty UIView at the bottom of the UITableViewCell.

Adding this following code in init() of Custom Table View cell may help:

var blankView = UIView() 
view.backgroundColor = .clear 
addSubview(blankView)
blankView..translatesAutoresizingMaskIntoConstraints = false 
blankView.widthAnchor.constraint(equalTo: widthAnchor).isActive = true 
blankView.heightAnchor.constraint(equalToConstant: 10).isActive = true 

Upvotes: 0

Pankaj K.
Pankaj K.

Reputation: 535

you can achieve this by two way.

1) you can add section for each and every cell and add sectionview in section with clear color so that will display blank space between two cell.

2) by designing the tableview cell in a proper way you can make spaces between two cell.

By the Section footerView :-

func numberOfSections(in tableView: UITableView) -> Int {
    return 5 //yourCellArrayCount;
}
func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {

let view = UIView(frame: CGRect (x:0, y: 0, width:10, height: 10))
    view.backgroundColor = UIColor.clear
    return view
} 

if you want to display spacing by UI design then make your view 10px smaller then your cell containerview and set clear color for your cell containerview.

check this image you will get better idea. enter image description here red color is the main containerview of your cell make it clear color.

Final output of your table would like this enter image description here

New Update

change your tableview methods and place this.

func numberOfSections(in tableView: UITableView) -> Int {
    return 3
}
func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
    return 20
}
func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    let view = UIView(frame:CGRect (x: 0, y: 0, width: 320, height: 20) ) as UIView
    view.backgroundColor = UIColor.red
    return view
}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

    return 1
}  

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

let cell = tableView.dequeueReusableCell(withIdentifier: "leadCell") as! LeaderBoardTableViewCell
cell.leaderNameLbl.text = leadername[indexPath.row]
cell.areaLbl.text = areaName[indexPath.row]
cell.approvalLabel.text = approvalrate[indexPath.row]
cell.leaderImageView?.image = UIImage(named: leaderImage[indexPath.row])
cell.backgroundColor = UIColor.white

//cell.contentView.backgroundColor = transparentColor


        return cell

}

check this and change logic for your data display. I have tested this and it will display red space between two cell. once done you can change red to clear color.

Upvotes: 1

Related Questions