CODEWITHSUNDEEP
iosswiftxcode
Jirakit Paitoonnaramit
Jirakit Paitoonnaramit

Reputation: 167

Swift shadow on tableview with dynamic content

I have a problem with dynamic content with shadow on table view

I had an extension for make corner radius and make shadow

extension UIView {

func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
    let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
    let mask = CAShapeLayer()
    mask.path = path.cgPath

    self.layer.mask = mask

    let shadowLayer = CAShapeLayer()
    shadowLayer.path = path.cgPath
    shadowLayer.frame = self.frame

    shadowLayer.shadowOpacity = 0.4
    shadowLayer.shadowRadius = 2
    shadowLayer.shadowColor = UIColor.black.cgColor
    shadowLayer.shadowOpacity = 0.13
    shadowLayer.shadowRadius = 6
    shadowLayer.shadowOffset = CGSize(width: 0, height: 3)

    self.superview!.layer.insertSublayer(shadowLayer, below: self.layer)
    }
}

And This id MyCustomTableViewCell

override func awakeFromNib() {
    super.awakeFromNib()

    bg_view.roundCorners([.topLeft, .topRight, .bottomRight, .bottomLeft], radius: 9)
}

And This My result (text is "this is my data on table")

My current re sult

I also use

activity_table.rowHeight = UITableView.automaticDimension
activity_table.estimatedRowHeight = 100

And Set line to 0

Upvotes: 0

Views: 400

Answers (1)

Rob C
Rob C

Reputation: 5073

I played around with this some more. You are making this way more complicated than it needs to be. I was able to solve this problem without the need for sublayers.

class Cell: UITableViewCell {
    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var containerView: UIView!

    override func awakeFromNib() {
        super.awakeFromNib()
        containerView.layer.cornerRadius = 9
        containerView.layer.shadowColor = UIColor.black.cgColor
        containerView.layer.shadowOpacity = 0.13
        containerView.layer.shadowRadius = 6
        containerView.layer.shadowOffset = CGSize(width: 0, height: 3)
    }
}

containerView is simply a subView that contains the label. Now, with the containerView, you would adjust the shadowing and the rounded corners.

You can check out the full solution here.

The only thing you need to make sure of is that the containerView's background color is not clear. If so, you are going to see some funky side effects where shadows are propagated to the text label.

Upvotes: 1

Related Questions