view.Layer.CornerRadius 不适用于 UIView Swift 3 iOS 的 UIScrollView 子视图

Question

I want the view to have rounded corners so I added

cardView.layer.cornerRadius = 5

But the subView of cardView, ie 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?

Answer 1

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! :)

Answer 2

Make it:

cardView.layer.masksToBounds = true
sViewListing.layer.masksToBounds = true

Answer 3

Here is my way to do it.

@IBOutlet weak var roundConnerView: UIScrollView! {
    didSet {
        roundConnerView.layer.cornerRadius = 10
        roundConnerView.layer.masksToBounds = true
    }
}