Whole UITableviewcell is highlighted instead of rounded view inside the cell - ios

Question

I was trying to achieve the rounded tableview cell effect, so I tried to mess with layoutSubviews in my custom cell class:
override func layoutSubviews() {
// Set the width of the cell
self.bounds = CGRectMake(self.bounds.origin.x, self.bounds.origin.y, self.bounds.size.width - 40, self.bounds.size.height)
super.layoutSubviews()
}
I heard that it is not recommended to change the width of the cell itself, and that adding a UIView (called mainView in the code) to the cell and adding constraints + corner radius would do the job.
My custom cell class is now:
class customTableViewCell: UITableViewCell {
#IBOutlet weak var mainView: UIView!
override func awakeFromNib() {
super.awakeFromNib()
mainView.layer.borderWidth = 2
mainView.layer.cornerRadius = 20
mainView.layer.borderColor = UIColor.black.cgColor
mainView.layer.masksToBounds = true
// Initialization code
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
}
and here are the relevant components to my ViewController that holds the mainTableView:
override func viewDidLoad() {
super.viewDidLoad()
mainTableView.rowHeight = 100
mainTableView.backgroundColor = UIColor.clear
mainTableView.delegate = self
mainTableView.dataSource = self
// Do any additional setup after loading the view, typically from a nib.
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = self.mainTableView.dequeueReusableCell(withIdentifier: "customCell") as! customTableViewCell
// note that indexPath.section is used rather than indexPath.row
cell.textLabel?.text = self.animals[indexPath.row]
cell.textLabel?.font = UIFont.boldSystemFont(ofSize: 16)
cell.textLabel?.textAlignment = .center
// add border and color
cell.backgroundColor = UIColor.clear
cell.layer.borderColor = UIColor.clear.cgColor
cell.layer.borderWidth = 1
//cell.layer.cornerRadius = 8
cell.clipsToBounds = true
return cell
}
My result is this:
screenshot of simulator
As you can tell, the whole cell is highlighted and not just what is inside.
My remaining question is - Is there a way to make only the UIView inside the contentView of the cell to be highlighted instead of the whole cell? Or should I just not enable selection and highlighting.
Please let me know. Thanks.

Answer 1

For Swift 4.1, in your tableView(_ tableView: UITableView, cellForRowAt...) or Storyboard tableview cell scene:
cell.selectionStyle = .none
in your cell subclass:
override func setHighlighted(_ highlighted: Bool, animated: Bool) {
super.setHighlighted(highlighted, animated: animated)
// do your custom things with the cell subviews here
if highlighted == true {
self.contentView.backgroundColor = .gray
} else {
self.contentView.backgroundColor = .white
}
}

Answer 2

You can achieve the desire effect. You just have to follow these steps.
Step 1 - Set your tableview cell's selection style to UITableViewCellSelectionStyleNone
cell.selectionStyle = UITableViewCellSelectionStyleNone;
Step 2 - In your customTableViewCell, override the default implementation of setHighlighted(_:animated:) and decide what you are going to highlight.
override func setHighlighted(_ highlighted: Bool, animated: Bool) {
super.setHighlighted(highlighted, animated: animated)
self.backgroundColor = UIColor.blue // Change this to any color you want.
}
You can also highlight individual elements of your custom UITableViewCell in this method.
I hope this helps.