CODEWITHSUNDEEP
iosswiftuitableview
Soumya Mahunt
Soumya Mahunt

Reputation: 2762

Customize separator per cell in UITableView

I am showing list of items in a UITableView in which only the first row will have separator and the rest of the rows won't have any separators. For the rest of the cell I added:

cell.separatorInset = UIEdgeInsets(top: 0, left: cell.bounds.size.width, bottom: 0, right: 0)

which should remove separators all the rows except first row. But when the app is launched all the cells except the first cell loaded have partial separators like this: partial separators on first launch on scrolling when the bottom rows are loaded the don't have this issue: no separators in bottom rest rows when I scroll all the first loaded rows out of screen and the scroll back to them all the partial separators are gone: reloading first-loaded rows removes separators I can't seem to find a fix for this issue. Is there any other way I can make the separators disappear by setting their color same as background color?? My xcode version is 11.7 and swift language version 5.

Update 1

As requested func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell looks like:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = countryCodeView.dequeueReusableCell(withIdentifier: "CountryCell") as! CountryCell
        let country = countries[indexPath.row]

        cell.flag.text = country.flag
        cell.countryCode.text = "+\(country.countryCode)"
        cell.countryName.text = country.name
        
        if indexPath.row == 0 {
            cell.countryCode.font = UIFont(name: "ProximaNovaA-Bold", size: 16)
            cell.countryName.font = UIFont(name: "ProximaNovaA-Bold", size: 16)
            cell.separatorInset = UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16)
            cell.tickIcon.isHidden = false
        } else {
            cell.countryCode.font = UIFont(name: "ProximaNovaA-Regular", size: 16)
            cell.countryName.font = UIFont(name: "ProximaNovaA-Regular", size: 16)
            cell.separatorInset = UIEdgeInsets(top: 0, left: cell.bounds.size.width, bottom: 0, right: 0)
            cell.tickIcon.isHidden = true
        }
        
        return cell
    }

Upvotes: 2

Views: 366

Answers (2)

Reinier Melian
Reinier Melian

Reputation: 20804

Your problem is that cell.bounds.size is not correct when this code is executed, so you can use self.view.bound.size.width using UIViewController.view bounds or directly .greatestFiniteMagnitude I prefer use this last one

Modified Code should be something like this

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = countryCodeView.dequeueReusableCell(withIdentifier: "CountryCell") as! CountryCell
        let country = countries[indexPath.row]

        cell.flag.text = country.flag
        cell.countryCode.text = "+\(country.countryCode)"
        cell.countryName.text = country.name
        
        if indexPath.row == 0 {
            cell.countryCode.font = UIFont(name: "ProximaNovaA-Bold", size: 16)
            cell.countryName.font = UIFont(name: "ProximaNovaA-Bold", size: 16)
            cell.separatorInset = UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16)
            cell.tickIcon.isHidden = false
        } else {
            cell.countryCode.font = UIFont(name: "ProximaNovaA-Regular", size: 16)
            cell.countryName.font = UIFont(name: "ProximaNovaA-Regular", size: 16)
            cell.separatorInset = UIEdgeInsets(top: 0, left: .greatestFiniteMagnitude, bottom: 0, right: 0)
            cell.tickIcon.isHidden = true
        }
        
        return cell
    }

As alternative you can have an extension for all TableViewCells

extension UITableViewCell {
    func hideSeparator() {
        self.separatorInset = UIEdgeInsets(top: 0, left: .greatestFiniteMagnitude, bottom: 0, right: 0)
        if #available(iOS 11.0, *) {
            self.directionalLayoutMargins = .zero
        }
    }
}

This can be used simply calling this method on cells that you need separator hidden

cell.hideSeparator()

Upvotes: 2

Pramodya Abeysinghe
Pramodya Abeysinghe

Reputation: 1210

in the cell class use prepareForReuse() method

put separatorInset = UIEdgeInsets(top: 0, left: cell.bounds.size.width, bottom: 0, right: 0) inside that method. (the default behaviour you expect)

Upvotes: 0

Related Questions