SWIFT - 将 layer.cornerRadius 设置为大于视图高度会导致问题

Question

I actually want to add a corner radius to a view on only one side. The radius is supposed to be of full height. This is my implementation.

someView.layer.cornerRadius = someView.frame.size.height
someView.layer.maskedCorners = [.layerMaxXMaxYCorner]

This does the job as required, but it adds extra shapes on other sides as shown below.

What might be the problem?

Answer 1

This looks like an iOS bug, I was able to reproduce it

But usually you don't wanna set cornerRadius greater than half view minimum side, in your case:

someView.layer.cornerRadius = someView.frame.size.height / 2

I assume it'll produce result you're expecting:

Corner radius is radius of a circle inscribed in the corner of a rectangle, I think that's why there may be problems with radius bigger than side/2: circle doesn't fit a rectangle anymore

Answer 2

i had the same problem. I needed to make the height of the view 16 and the bottom corners radius also 16.

My solution:

1. add the view you want to round to the bottom view
2. clip the bottomView to specific size (in my case width = window width and height=16)
3. make height of the rounded view = cornerRadius * 2 (in my case 32)
4. pin rounded view to superView, excluding the opposite edge which you want to round off (in my case i wanted to round bottom edge roundedView.autoPinEdgesToSuperviewEdges(with: .zero, excludingEdge: .top) )

code

private let bottomView: UIView = {
    let view = UIView(forAutoLayout: ())
    view.clipsToBounds = true

    return view
}()
private let roundedView: UIView = {
    let view = UIView(forAutoLayout: ())
    view.clipsToBounds = true
    view.contentMode = .scaleAspectFill
    view.layer.maskedCorners = [.layerMinXMaxYCorner, .layerMaxXMaxYCorner]

    return view
}()

...
    contentView.addSubview(bottomView)
    bottomView.addSubview(roundedView)

...

func setupConstraints() {
        if roundedView.layer.cornerRadius >= roundedView.frame.height / 2 {
            roundedView.autoSetDimension(.height, toSize: roundedView.layer.cornerRadius * 2)
        } else {
            roundedView.autoPinEdge(toSuperviewEdge: .top)
        }

        roundedView.autoPinEdgesToSuperviewEdges(with: .zero, excludingEdge: .top)
        bottomView.autoPinEdgesToSuperviewEdges()
    }

result:

enter image description here