7

I am facing a strange issue when I try to apply rounded corners and shadow to my UITableView with dynamic content, which changes height as per the data (number of cells). Here is screen recording of the jerky effect on scrolling.

My motive is to add shadow and corner radius to the dynamic table view.

When I add the corner radius it works fine, but when I try to add the shadow it doesn't show up. So I found a solution here saying that we need to set

self.tableView.clipsToBounds = false
self.tableView.layer.masksToBounds = false

However, after setting it I am getting the above jerky effect and the corner radius is no longer visible.

I tried other (proposed) solutions like adding a custom view on runtime with respect to tableview frame, but that creates a static height view and hence disabling the interactivity with the superview for that area.

Here is my code:

searchResultTblView.layer.cornerRadius = 10
searchResultTblView.layer.maskedCorners = [.layerMinXMaxYCorner , .layerMaxXMaxYCorner]
searchResultTblView.keyboardDismissMode = .onDrag
searchResultTblView.layer.shadowColor = UIColor.gray.cgColor
searchResultTblView.layer.shadowOpacity = 0.6
searchResultTblView.layer.shadowRadius = 5
searchResultTblView.tableFooterView = UIView.init(frame: CGRect.zero)
searchResultTblView.separatorInset = .zero
searchResultTblView.clipsToBounds = false
searchResultTblView.layer.masksToBounds = false

I know there's probably a better way to set both shadow and corner radius on the table view. However, I am currently unable to achieve it.

bad_coder
  • 11,289
  • 20
  • 44
  • 72
Yaseen Majeed
  • 350
  • 2
  • 11
  • This looks confusing... are you moving your scroll view, instead of scrolling the rows? – DonMag Nov 02 '20 at 14:26
  • 1
    Makes no sense. You cannot apply both corner rounding and a shadow to the same view, because the corner rounding with corner radius requires that `clipsToBounds` be `true` but the shadow requires that `clipsToBounds` be `false`. A thing cannot be both `true` and `false` unless you want the universe to explode. – matt Nov 02 '20 at 15:36
  • @DonMag No I am just doing the normal scroll like we do in tableViews. – Yaseen Majeed Nov 02 '20 at 16:54
  • @matt You are right, so what will be the optimal way to achieve both (shadow and corner radius), considering the tableView is dynmaic with varied height depending on the content received via API. – Yaseen Majeed Nov 02 '20 at 16:55
  • 1
    There is only one way to achieve both, and that is to have a "secret" second view that casts the shadow. This is a well documented technique; any search on Stack Overflow will show it to you (I describe it at https://stackoverflow.com/a/57351560/341994 but there are lots of other examples). – matt Nov 02 '20 at 17:11
  • I understand and even tried the solution in the same way however I am unable to make view grow and shrink with respect to the table view. Any Ideas how can I resize the height of the hidden view with respect to the tableView height ? – Yaseen Majeed Nov 02 '20 at 17:19
  • @matt Thanks mate I did the same technique, What I was missing is adding constraints with respect to the tableview. Initially tried to do it programatically however it was having issue in resizing and later did it via storyboard and added all the proper constraints with respect to the tableView. Thankyou once again :) – Yaseen Majeed Nov 03 '20 at 18:48
  • If the problem is solved, please delete the question so as not to leave it hanging... Thanks. – matt Nov 03 '20 at 19:11

0 Answers0