Consistent curves with dynamic corner radius (Swift)?

Question

Is there a way to make the corner radius of a UIView adept to the view it belongs to? I'm not comfortable with the idea of hard-coding corner radius values, because as soon as the width or the height of your view changes (on different screen orientations for example), the corners will look totally different. For example, take a look at WhatsApp's chat window.

As you can see, every message container view has a different width and a different height, but the curve of the corners are all exactly the same. This is what I'm trying to achieve. I want the curves of my corners to be the same on every view, no matter what the size of the view is or what screen the view is displayed on. I've tried setting the corner radius relative to the view's height (view.layer.cornerRadius = view.frame.size.height * 0.25) and I've also tried setting it to the view's width, but this doesn't work. The corners still look weird as soon as they are displayed on a different screen size. Please let me know if there's a certain formula or trick to make the curves look the same on every view/screen size.

Answer 1

Here's the best I can do. I don't know if this will be of help, but hopefully it will give you some ideas.

First the code:

class ViewController: UIViewController {

    let cornerRadius:CGFloat = 10
    let insetValue:CGFloat = 10
    var numberOfViews:Int = 0
    var myViews = [UIView]()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.translatesAutoresizingMaskIntoConstraints = false
    }

    override func viewWillLayoutSubviews() {
        setNumberOfViews()
        createViews()
        createViewHierarchy()
        addConstraints()
    }

    func setNumberOfViews() {
        var smallerDimension:CGFloat = 0
        if view.frame.height < view.frame.width {
            smallerDimension = view.frame.height
        } else {
            smallerDimension = view.frame.width
        }
        let viewCount = smallerDimension / (insetValue * 2)
        numberOfViews = Int(viewCount)
    }

    func createViews() {
        for i in 1...numberOfViews {
            switch i % 5 {
            case 0:
                myViews.append(MyView(UIColor.black, cornerRadius))
            case 1:
                myViews.append(MyView(UIColor.blue, cornerRadius))
            case 2:
                myViews.append(MyView(UIColor.red, cornerRadius))
            case 3:
                myViews.append(MyView(UIColor.yellow, cornerRadius))
            case 4:
                myViews.append(MyView(UIColor.green, cornerRadius))
            default:
                break
            }
        }
    }

    func createViewHierarchy() {
        view.addSubview(myViews[0])
        for i in 1...myViews.count-1 {
            myViews[i-1].addSubview(myViews[i])
        }
    }

    func addConstraints() {
        for view in myViews {
            view.topAnchor.constraint(equalTo: (view.superview?.topAnchor)!, constant: insetValue).isActive = true
            view.leadingAnchor.constraint(equalTo: (view.superview?.leadingAnchor)!, constant: insetValue).isActive = true
            view.trailingAnchor.constraint(equalTo: (view.superview?.trailingAnchor)!, constant: -insetValue).isActive = true
            view.bottomAnchor.constraint(equalTo: (view.superview?.bottomAnchor)!, constant: -insetValue).isActive = true
        }
    }
}

class MyView: UIView {
    convenience init(_ backgroundColor:UIColor, _ cornerRadius:CGFloat) {
        self.init(frame: CGRect.zero)
        self.translatesAutoresizingMaskIntoConstraints = false
        self.backgroundColor = backgroundColor
        self.layer.cornerRadius = cornerRadius
    }
}

Explanation:

This is fairly simple code. The intent was to create as deeply nested a view hierarchy as possible, and, using auto layout, have two main variables: cornerRadius (the view's corner radius) and insetValue (the "frame's" inset). These two variables can be adjusted for experimenting.

The bulk of the logic is in viewWillLayoutSubviews, where the root view frame size is know. Since I'm using 5 different background colors, I'm calculating how many views can fit in the hierarchy. Then I'm creating them, followed by creating the view hierarchy, and finally I'm adding the constraints.

Experimenting and conclusions:

• I was able to see what your concern is - yes, if a view's size components are smaller than the corner radius, you end up with inconsistent looking corners. But these values are pretty small - pretty much 10 or less. Most views are unusable at that size. (If I recall even the HIG suggests that a button should be no less than 40 points in size. Sure, even Apple breaks that rule. Still.)

• If your 'insetValueis sufficiently larger than the corner radius, you should never have an issue. Likewise, using the iMessage scenario, a singleUILabelcontaining text and/or emoticons should have enough height that a noticeablecornerRadius` can be had.

• The key point to set things like cornerRadius and insetValue is in viewWillLayoutSubviews, when you can decide (1) which is the smaller dimension, height or width, (2) how deeply you can nest views, and (3) how large of a corner radius you can set.

• Use auto layout! Please note the absolute lack of frames. Other than determining the root view's dimensions at the appropriate time, you can write very compact code without worrying about device size or orientation.