TableView Cells Overlapping UIView After Scrolling Down and Up

Question

I'm playing around with some design concepts and I got stuck with this "bug."

Any idea why is this happening? I've iterated through different things and still can't find the culprit or solution to this.

This "circle" for the price, overlapping the other cell at the bottom of it is my intended design. This is all good, however, when I scroll down and back up, "older" cells suddenly overlaps the "circle."

Kindly see the screenshot. Any help is much appreciated!!!

Has anyone experienced this before?

iOS9 - Xcode 7.3.1

EDIT:

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    if let cell = tableView.dequeueReusableCellWithIdentifier("CategoryCell") as? CategoryCell {

        cell.selectionStyle = .None
        cell.configureCell(dishes[indexPath.row])

        return cell

    } else {
        return UITableViewCell()
    }

}

EDIT 2: After further analysis, I am quite convinced that this has nothing to do with the height? I played around using different heights but still get the same results.

The thing is, it loads perfectly, even when scrolling down, it's all good. Up until I scroll back up, that's where the problem starts to appear.

Setting the Clip SubViews (Cell) to true will clip everything even on load, so I've set it to false.

The remaining question is, how to handle the clipping when scrolling back up?

EDIT 3: I think I now understand the problem however, I am still not quite sure how to solve it.

The CircleView is placed on a cell that is meant to overlap to the other cell below it. Settings clipsToBounds, height or putting it infront will have no effect to the cell below it as it goes away from the display when scrolled up.

Anybody has an idea how to somehow redraw this just like it has been freshly loaded (because onload, things are working)? or perhaps is there a clipsToBounds setting elsewhere that I am missing?

I think the solution relates to this: How to stop UITableView from clipping UITableViewCell contents in iOS 7

However, this solution is not working on ios9.

The circle is a header or everything is a cell? Maybe you are adding a subview(UIImageView) on cellForRowAtIndexPath. Please show your code. — Klevison, Aug 31 '16 at 16:21
could you post your implementation of the cellForRowAtIndexPath method please? — 3li, Aug 31 '16 at 16:27
@KlevisonMatias Everything is a cell. The circle is a UIView placed at the bottom of the cell. I've edited my post to show the code. — phage04, Sep 01 '16 at 03:02
@phage04 Please let me know whether the provided solution is working or not? — Jeyamahesan, Sep 02 '16 at 13:06
THANK YOU. YOU ARE SO AWESOME. Been working on this for two days nowwwwwww. I need a beer. Thanks!! — phage04, Sep 02 '16 at 14:26

score 8 · Accepted Answer · answered Sep 02 '16 at 11:37

8

Set the cell layer anchorPointZ to row index in cellForRowAtIndexPath: method

cell.layer.anchorPointZ = indexPath.row;

answered Sep 02 '16 at 11:37

Jeyamahesan

1,101
7
15

2

OH MY GOD YOU ARE A WIZARD! – phage04 Sep 02 '16 at 14:24
2

Edited it a bit: cell.layer.anchorPointZ = CGFloat(indexPath.row) – phage04 Sep 02 '16 at 14:25
Thanks so much! +10 for you :) – Rafaela Lourenço Sep 18 '18 at 14:51
May you please explain what is the point behind this line of code? @phage04 – Ahmed Bahgat May 15 '21 at 23:22
This is brilliant. kudos. – livingtech Jun 26 '23 at 20:46

J Manuel · Answer 2 · 2016-09-01T13:02:12.890

0

Have you tried setting an estimatedRowHeight for the tableView? Also, you can use the function heightForRowAtIndexPath and return UITableViewAutomaticDimension. That should automatically dimension every row to fill the circle size.

EDIT: If you want to bring the circle to the front of everything else, try this:

YourLabel.layer.zPosition = 1;
self.view.bringSubviewToFront(YourLabel);

edited Sep 01 '16 at 13:02

answered Aug 31 '16 at 17:30

J Manuel

3,010
22
39

Tried as suggested but it only gave me larger heights. Circles at the bottom aren't being clipped onload, only during reuse. – phage04 Sep 01 '16 at 02:56
I just checked your screenshot. You can try bringing the circle at the top of everything else. I'll edit my answer. – J Manuel Sep 01 '16 at 13:01
thank you for your comment, it made me understand the problem better. Would you know how to redraw this so that it will still overlap the cell below it as it gets removed from the screen when scrolling up? Please see EDIT 3. Thank you! I appreciate your help! – phage04 Sep 02 '16 at 05:00

score 0 · Answer 3 · answered Aug 31 '16 at 20:10

0

The issue has to do with the height of your cell. It isn't going to dynamically adjust that for you.

You can try setting the clips to bounds on the tableView (check screenshot)

clipsToBounds option

answered Aug 31 '16 at 20:10

brkr

1,208
1
12
18

tried playing with this, the only thing that creates an impact is the cell-level setting for this. At this point, i've just set everything (tableview, cell, contentview) unflaged. If I set the cell setting of clipstobounds to true, then everything will be clipped onload. Setting it to false will have things working perfectly onload however as a scroll (reuse), that's where the problem starts to show up. – phage04 Sep 01 '16 at 02:57

TableView Cells Overlapping UIView After Scrolling Down and Up

3 Answers3