CODEWITHSUNDEEP
iosswiftuitableviewcell
Fausto Checa
Fausto Checa

Reputation: 163

how to give separation between TableView cells

I want to get lines of separation between every two table view cells, but not to create extra sections which I do not need.

For example:

enter image description here

Upvotes: 4

Views: 2489

Answers (3)

Enea Dume
Enea Dume

Reputation: 3232

one way to do that is 

// Inside UITableViewCell subclass
    override func layoutSubviews() {
        super.layoutSubviews()

        contentView.frame = UIEdgeInsetsInsetRect(contentView.frame, UIEdgeInsetsMake(10, 10, 10, 10))
    }

or you can change offset from storyboard

Upvotes: 2

rbaldwin
rbaldwin

Reputation: 4858

  1. Create a Custom TableViewCell.
  2. Contain your required views within a vertical StackView.
  3. Add a UIView at the bottom of the StackView and set a height constraint to the size of the whitespace you require (i.e 10px).
  4. Set a constraint for the height of the StackView to your required cell height (i.e. 70px)
  5. Create a reference to the StackView height Constraint
class CustomCell: UITableViewCell {

    @IBOutlet weak var cellLabel: UILabel!
    @IBOutlet weak var bottomSpace: UIView!
    @IBOutlet weak var stackViewHeight: NSLayoutConstraint!

}

enter image description here

In viewDidLoad:

tableView.estimatedRowHeight = UITableViewAutomaticDimension
tableView.separatorStyle = .none

In your cellForRowAtIndexPath:

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

        guard let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell") as? CustomCell else { return UITableViewCell() }

        if indexPath.row % 2 == 0 {
            cell.bottomSpace.isHidden = true
            cell.stackViewHeight.constant = 70.0 //Normal cell height
        } else {
            cell.bottomSpace.isHidden = false
            cell.stackViewHeight.constant = 80.0 //Cell height + whitespace
        }

        cell.cellLabel.text = data[indexPath.row]

        return cell
    }

enter image description here

Upvotes: 4

Abdelahad Darwish
Abdelahad Darwish

Reputation: 6067

you can create custom cell and add line as needed

class CustomCell: UITableViewCell {

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }


    lazy public  var line : UIView  = {
        let view  = UIView.init(frame: CGRect.init(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 0.5))
        view.backgroundColor = .gray
        return view
        }()

    lazy public  var stackLine : UIStackView  = {



        let stackLine = UIStackView.init(arrangedSubviews: [self.line,self.line,self.line,self.line,self.line]) // line as you need
        stackLine.axis = .vertical
        stackLine.distribution = .fill
        stackLine.spacing = 1
        stackLine.alignment = .fill
        return stackLine
        }()


    override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)

        self.contentView.addSubview(stackLine)
        NSLayoutConstraint.activate([
            stackLine.leadingAnchor .constraint(equalTo: self.contentView.leadingAnchor, constant: 0),
            stackLine.trailingAnchor .constraint(equalTo: self.contentView.trailingAnchor, constant: 0),
            stackLine.bottomAnchor .constraint(equalTo: self.contentView.bottomAnchor, constant: 0),
            stackLine.heightAnchor.constraint(equalToConstant: 5 * 0.5 + 1 * 4 ) // say 5 line * height of line + line space * number ofline -1
            ]
        )

    }

}

Upvotes: 0

Related Questions