Swift World: What’s New in iOS 11 — Make Corner Round
iOS 11 not only takes giant leaps like Core ML, Vision and ARKit, but also small steps which ease our lives. In this article, I will introduce enhancements on CALayer’s round corner.
Please open Xcode and let’s start a new project with Single View App template. First, let’s add a black square in viewDidLoad .
Do you remember how to set round corners?
But what if your PM’s requirement is kind of making top-left and right-down corners round and keep others straight? We need batch of drawing codes to achieve these. Time has come to iOS 11. What you only need is one line of code. The magic is maskedCorners.
Great! You make your PM happy with only one line of code. But PM comes to you with great ideas again. Why not make the change to round corner an animation? Then your mind is blowed by drawRect, Core Graphic, UIBezierPath, mask, etc. Wait, it’s iOS 11 era. The cornerRadius is animatable!
Your PM is happy again. But as engineer, let’s go on to do something cool.
How about increase the corder radius to half of the height/width of the square? Here it’s 50.
You don’t need CAShapeLayer, CABasicAnimation or UIBezierPath to transform a square/rectangle to a circle as we did in old days.
Let’s step forward. How about take the following popular search button/bar animation as a practice? I’m exploring to see what more we can do with corner radius. Let’s wait and see.
Thanks for your time. Please click the ❤ button to get this article seen by more people. Follow me and Swift World by clicking Follow or on Twitter NilStack.
Reference
WWDC 2017: Advanced Animation with UIKit
Swift World: UIViewPropertyAnimator Exploration Part 1
Swift World: UIViewPropertyAnimator Exploration Part 2
