UITableView Custom Selection Size

Question

I am trying to get a similar UITableView selection look as shown on the 'Upcoming cell' below. I am achieving the rounded corners but am unsure how to get the BKG to not be the 100% width of the tableView. The current code I have is:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "folderCell", for: indexPath) as! FolderTableViewCell
    cell.layer.cornerRadius = 8
    return cell
}

EDIT: All solutions below are still not solving this issue... 14/11/19

Shehata Gamal · Answer 1 · 2019-09-25T10:13:00.090

0

You need to add a view to the contentView with it's width say 90% of cell , then change it's background when selected/deselected inside cellForRowAt

cell.someView.backgroundColor = indexPath.row == selectedRow ? UIColor.blue : UIColor.green

Where

var selectedRow:Int?

Inside didSelectRowAt

selectedRow = indexPath.row
tableView.reloadData()

edited Sep 25 '19 at 10:13

answered Sep 25 '19 at 09:59

Shehata Gamal

98,760
8
65
87

it's not a good way it reloads whole table data every time you can do it with just setSelected override method also. – Nikunj Kumbhani Sep 25 '19 at 10:18
@NikunjKumbhani cells are dequeued , logic of coloring should be inside `cellForRowAt` , it could also be a matter of reloading the old selected row if exists/visible and the new one – Shehata Gamal Sep 25 '19 at 10:19

score 0 · Answer 2 · answered Sep 25 '19 at 10:10

0

Add Background View inside UITableView cell like this :

UITableViewCell

class FolderTableViewCell: UITableViewCell {

    @IBOutlet private weak var selectedView: UIView!

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        selectedView.backgroundColor = selected ? UIColor.red : UIColor.clear // change selected color here
    }

}

answered Sep 25 '19 at 10:10

Nikunj Kumbhani

3,758
2
26
51

This doesn’t seem to be working for me. Selected is only getting triggered on touch off... – mink23 Sep 25 '19 at 11:14
@mink23 it's working fine, please verify once again. – Nikunj Kumbhani Sep 25 '19 at 12:36
Yep, using your code it wasn't working at all so I modified to: override func setSelected(_ selected: Bool, animated: Bool) { super.setSelected(selected, animated: animated) if selected == true { selectionBKG.backgroundColor = UIColor.red } else { selectionBKG.backgroundColor = UIColor.blue } } – mink23 Sep 25 '19 at 12:44
Even with this it is only changing colour on lift of tap... not on tap. I'm using iOS 13... – mink23 Sep 25 '19 at 12:45
Any ideas on why this is happening? – mink23 Sep 26 '19 at 01:52
@mink23 you just need to check view hierarchy in **UITableViewCell** and make sure connect IBOutlet of background view as you can see in my answer of blue view and just simply change in setSelected method that's it remove all other code and all things that you have done before and check it's working fine dear. – Nikunj Kumbhani Sep 27 '19 at 05:42

score 0 · Answer 3 · answered Sep 25 '19 at 10:16

0

Add an extra UIView to your FolderTableViewCell with your choice of size and colour for selection and then make it hidden by default, make it visible in didSelectRowAtIndexPath and hidden in didDeselectRowAtIndexPath

answered Sep 25 '19 at 10:16

Prakash Shaiva

1,047
8
12

Is there a way to have it fade in and out with this method? – mink23 Sep 25 '19 at 10:27
Yes, Instead just hiding and showing the view you can do animation to your custom view. check this ink for more ideas on fade in fade out https://stackoverflow.com/questions/20891614/fade-in-fade-out-animation – Prakash Shaiva Sep 25 '19 at 10:41
I tried this but am getting the error 'Outlets can not be connected to repeating content'. Any ideas? – mink23 Sep 25 '19 at 11:13
Create a table view cell subclass and set it as the class of the prototype. Add the outlets to that class and connect them. Now when you configure the cell you can access the outlets. – Prakash Shaiva Sep 25 '19 at 11:31
I have that setup now. Though I can't access didSelectRowAtIndexPath from the UITableViewCell class... – mink23 Sep 25 '19 at 11:32

score 0 · Answer 4 · answered Sep 25 '19 at 10:30

0

Give clear color to tableview. and leave the Leading and Trailing spacing for tableview from superview. Give background color to superView. Simple hack to save your time

answered Sep 25 '19 at 10:30

ketaki Damale

634
7
25

UITableView Custom Selection Size

4 Answers4