Search code examples
iosuiviewuiscrollviewswift3rounded-corners

view.Layer.CornerRadius not working on UIScrollView subView of UIView Swift 3 iOS


I want the view to have rounded corners so I added

cardView.layer.cornerRadius = 5

But the subView of cardView, i.e. sViewListing which is a UIScrollView just doesn't seem to get effected by it.

I just want the topRight & topLeft cornerRadius of the UIScrollView to be set to 5 so I tried using UIBezierPath to mask it too but it still doesn't seem to work.

The following is what i tried:

import UIKit

class TableViewCell: UITableViewCell {

@IBOutlet var cardView: UIView!
@IBOutlet var sViewListing: UIScrollView!
@IBOutlet var bookTitleListing: UILabel!
@IBOutlet var ratingListing: UIImageView!
@IBOutlet var locationListing: UILabel!
@IBOutlet var priceListing: UILabel!

override func awakeFromNib() {
    super.awakeFromNib()

    let path = UIBezierPath(roundedRect:sViewListing.bounds,
                            byRoundingCorners:[.topRight, .topLeft],
                            cornerRadii: CGSize(width: 5, height:  5))

    let maskLayer = CAShapeLayer()

    maskLayer.path = path.cgPath
    sViewListing.layer.mask = maskLayer
    cardView.backgroundColor = UIColor.white
    cardView.layer.cornerRadius = 5
    cardView.clipsToBounds = true
    cardView.layer.masksToBounds = false
    cardView.layer.shadowColor = UIColor.black.withAlphaComponent(0.3).cgColor
    cardView.layer.shadowOffset = CGSize(width: 0, height: 0)
    cardView.layer.shadowOpacity = 0.8

    }

}

What can I do to fix it?


Solution

  • Nested it further in another UIView Named it maskedCardView and just added the code

    maskCardView.layer.cornerRadius = 5
    maskCardView.layer.masksToBounds = true
    

    after adding the outlet

    @IBOutlet var maskCardView: UIView!
    

    This way it keeps the shadow while masking the topLeft & topRight corners of the UIScrollView. Here's the complete code for reference.

    import UIKit
    
    class TableViewCell: UITableViewCell {
    
        @IBOutlet var cardView: UIView!
        @IBOutlet var sViewListing: UIScrollView!
        @IBOutlet var bookTitleListing: UILabel!
        @IBOutlet var ratingListing: UIImageView!
        @IBOutlet var locationListing: UILabel!
        @IBOutlet var priceListing: UILabel!
        @IBOutlet var maskCardView: UIView!
    
        override func awakeFromNib() {
            super.awakeFromNib()
    
            maskCardView.layer.cornerRadius = 5
            maskCardView.layer.masksToBounds = true
    
            cardView.backgroundColor = UIColor.white
            cardView.layer.cornerRadius = 5
            cardView.clipsToBounds = true
            cardView.layer.masksToBounds = false
            cardView.layer.shadowColor = UIColor.black.withAlphaComponent(0.3).cgColor
            cardView.layer.shadowOffset = CGSize(width: 0, height: 0)
            cardView.layer.shadowOpacity = 0.8
    
        }
    
    }
    

    Thanks Anyway! :)