Adding Space Between the Cells of a UITableView

Photo by Tim Hüfner on Unsplash

Exordium

What Is Already Set Up

Configuring the Table View

data = [
Review(writer: “Calvin”, receiver: “Rusty Nail Burgers”, reviewText: “Okay burgers. Okay tenant. Would like to see them pay rent on time.”),
Review(writer: “Felix”, receiver: “Rusty Nail Burgers”, reviewText: “Though my brother isn’t a fan of Bob’s cooking, I can’t find a better burger on the wharf.”),
Review(writer: “Teddy”, receiver: “Rusty Nail Burgers”, reviewText: “I’m here everyday. Couldn’t ask for a better hangout spot.”),
Review(writer: “Mickey”, receiver: “Rusty Nail Burgers”, reviewText: “Hey Bob! Thanks for feeding me during that heist. I will definitely be back to visit.”),
Review(writer: “Marshmellow”, receiver: “Rusty Nail Burgers”, reviewText: “Hey Bob.”),
Review(writer: “Rudy”, receiver: “Rusty Nail Burgers”, reviewText: “My dad drops me off here every once in a while. I like to sit in the back corner and enjoy my food.”),
]
reviewTableView.delegate = self
reviewTableView.dataSource = self
func setupView() {
data = [
Review(writer: “Calvin”, receiver: “Rusty Nail Burgers”, reviewText: “Okay burgers. Okay tenant. Would like to see them pay rent on time.”),
Review(writer: “Felix”, receiver: “Rusty Nail Burgers”, reviewText: “Though my brother isn’t a fan of Bob’s cooking, I can’t find a better burger on the wharf.”),
Review(writer: “Teddy”, receiver: “Rusty Nail Burgers”, reviewText: “I’m here everyday. Couldn’t ask for a better hangout spot.”),
Review(writer: “Mickey”, receiver: “Rusty Nail Burgers”, reviewText: “Hey Bob! Thanks for feeding me during that heist. I will definitely be back to visit.”),
Review(writer: “Marshmellow”, receiver: “Rusty Nail Burgers”, reviewText: “Hey Bob.”),
Review(writer: “Rudy”, receiver: “Rusty Nail Burgers”, reviewText: “My dad drops me off here every once in a while. I like to sit in the back corner and enjoy my food.”),
]

restaurantImageViewBackground = RestaurantImageViewBackground()
view.addSubview(restaurantImageViewBackground)

restaurantImageView = UIImageView(image: UIImage(named: “cheese-burger”))
restaurantImageView.translatesAutoresizingMaskIntoConstraints = false
restaurantImageViewBackground.addSubview(restaurantImageView)

restaurantNameLabel = UILabel()
restaurantNameLabel.translatesAutoresizingMaskIntoConstraints = false
restaurantNameLabel.text = “Rusty Nail Burgers”
restaurantNameLabel.font = UIFont.boldSystemFont(ofSize: 28)
restaurantNameLabel.textColor = .black
view.addSubview(restaurantNameLabel)

starStackView = UIStackView()
starStackView.translatesAutoresizingMaskIntoConstraints = false
starStackView.alignment = .center
starStackView.axis = .horizontal
starStackView.spacing = 5

for _ in 0…5 {
let starView = UIImageView(image: UIImage(systemName: “star.fill”))
starView.frame = CGRect(x: 0, y: 0, width: 40, height: 40)
starView.tintColor = .black
starStackView.addArrangedSubview(starView)
}

view.addSubview(starStackView)

reviewTableView = UITableView()
reviewTableView.translatesAutoresizingMaskIntoConstraints = false
reviewTableView.delegate = self
reviewTableView.dataSource = self
view.addSubview(reviewTableView)

applyAutoConstraints()
}
reviewTableView.register(RestaurantReviewCell.self, forCellReuseIdentifier: “reviewCell”)
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
// 1
let cell = tableView.dequeueReusableCell(withIdentifier: “reviewCell”, for: indexPath) as! RestaurantReviewCell

// 2
if let writer = data[indexPath.section].writer {
cell.reviewerLabel.text = “\(writer) said:”
}
if let reviewText = data[indexPath.section].reviewText {
cell.reviewLabel.text = “\(reviewText)”
}

// 3
return cell
}

UI Work with the Table View

func numberOfSections(in tableView: UITableView) -> Int {
return data.count
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 140
}
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
// 1
let headerView = UIView()
// 2
headerView.backgroundColor = view.backgroundColor
// 3
return headerView
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 20
}
extension RestaurantReviewsViewController: UITableViewDelegate {
func numberOfSections(in tableView: UITableView) -> Int {
return data.count
}

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 140
}
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerView = UIView()
headerView.backgroundColor = view.backgroundColor
return headerView
}

func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 20
}
}
extension RestaurantReviewsViewController: UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 1
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: “reviewCell”, for: indexPath) as! RestaurantReviewCell

if let writer = data[indexPath.section].writer {
cell.reviewerLabel.text = “\(writer) said:”
}

if let reviewText = data[indexPath.section].reviewText {
cell.reviewLabel.text = “\(reviewText)”
}

return cell
}
}

Finishing Up

reviewTableView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
reviewTableView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
reviewTableView.backgroundColor = .clear
reviewTableView.allowsSelection = false

Closing Notes

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store