Uitableviewcell border

Question

I have set of uitableviewcell . I want to apply border color for the following conditions Applying top border color for firstcell And bottom border color for lastcell.

I'm new to swift so I'm not sure whether it is possible.

Answer 1

Add the Extension.
You can add the code below to your ViewController file or create a separate file like me.

CALayer+Extension.swift

import UIKit

extension CALayer {

    func addBorder(edge: UIRectEdge, color: UIColor, thickness: CGFloat) {
        
        let border = CALayer();
        
        switch edge {
        case UIRectEdge.top:
            border.frame = CGRect(x: 0, y: 0, width: self.frame.width, height: thickness)
            break
        case UIRectEdge.bottom:
            border.frame = CGRect(x:0, y:self.frame.height - thickness, width:self.frame.width, height:thickness)
            break
        case UIRectEdge.left:
            border.frame = CGRect(x:0, y:0, width: thickness, height: self.frame.height)
            break
        case UIRectEdge.right:
            border.frame = CGRect(x:self.frame.width - thickness, y: 0, width: thickness, height:self.frame.height)
            break
        default:
            break
        }
        
        border.backgroundColor = color.cgColor;
        
        self.addSublayer(border)
    }
}

TableViewController.swift

import UIKit

class TableViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    @IBOutlet weak var tableView: UITableView!
    let arr = ["a", "b", "c", "d"]
    
    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.delegate = self
        tableView.dataSource = self
        
        tableView.tableFooterView = UIView(frame: .zero)
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return arr.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell") as? TableViewCell else { return UITableViewCell() }
        
        cell.label.text = arr[indexPath.row]
        
        //Setting the border
        if indexPath.row == 0 { //first cell
            cell.layer.addBorder(edge: .top, color: .blue, thickness: 0.5)
            
        }
        
        if indexPath.row == arr.count - 1 { //last cell
            cell.layer.addBorder(edge: .bottom, color: .blue, thickness: 0.5)
        }
        
        return cell
    }
}

If you want to remove the border except the first and last cells, you can change this property to none.

Answer 2

It is possible to do. What you have to do is,

1. Create a custom UITableView cell, style it to how you want it.
2. After styling add 2 UIView's with a height of 1 or any height you want for that matter. Let's name them topSeparator & bottomSeparator for demonstration purposes.
3. Constrain one of the headers to the top of the ContentView of the custom tableview cell, and the other to the bottom.
4. Assuming you are a using Storyboards, connect both topSeparator & bottomSeparator to you custom cell,
5. There after disable both topSeparator & bottomSeparator in the init(frame:) or awakeFromNib() methods depending on whether you are going to do it programmatically or usin Nibs.
6. Add 2 methods as follows to the cell class

// Unhides top s
func showTopSeparator() {
    self.topSeparator.isHidden = false
}

// Unhides bottom separator
func showBottomSeparator() {
    self.bottomSeparator.isHidden = false
}

7. And in the viewcontroller that is going to display the cells, Add a flag to show the separators based on the IndexPath of the cells. See below

func tableView(_ tableView: UITableView, 
  cellForRowAt indexPath: IndexPath) -> UITableViewCell {
      // Dequeueing custom cell
      let cell = self.tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath as IndexPath) as! CustomCell
      
      // Flag to display separators
      if indexPath.row == 0 {
         cell.showTopSeparator()
      else if indexPath.row == data.count - 1 {
         cell.showBottomSeparator()
      }
      return cell

}