🧱 CALayer — A Concept Every iOS Developer Should Know

CALayer is actually one of those topics that I believe every iOS developer should understand deeply. We use it behind many UI operations without even realizing it — but in this article, we’ll explore both what it is and the scenarios where it comes into play.

You can think of CALayer as the fundamental visual layer that underlies every UIView. In fact, UIView is essentially a wrapper around a CALayer.
Every UIView has its own corresponding CALayer, which is responsible for the view’s visual content and animations.

let view = UIView()
view.layer // -> CALayer instance

CALayer vs UIView

CALayer is similar to UIView, but simpler. While UIView wraps a CALayer and adds event-handling capabilities for user interaction, CALayer focuses purely on rendering.

If your task involves only visual layers or animations, using CALayer directly can be more efficient — since it eliminates the extra overhead that comes with event handling and layout management.

Core Properties

🔹 frame and bounds

• frame: Defines the layer’s position and size relative to its parent layer.
• bounds: Defines the layer’s size in its own coordinate system.
  This works similarly to how it does in UIView, but at the Core Animation level.

🔹 position

• Represents the center point of the layer relative to its parent layer’s coordinate system.
• It’s equivalent to the center property in UIView.

layer.position = CGPoint(x: 100, y: 200)

🔹 anchorPoint

• Defines the point within the layer’s bounds that corresponds to its position.
• By default, it’s (0.5, 0.5) — the center of the layer.
• Changing it shifts how rotations, scales, and translations are applied.

layer.anchorPoint = CGPoint(x: 0, y: 0)

🔹 backgroundColor

• Unlike UIView, this uses CGColor instead of UIColor.

layer.backgroundColor = UIColor.red.cgColor

🔹cornerRadius

• Rounds the corners of the layer.
• It’s GPU-accelerated, so it performs efficiently.
• However, sublayers or subviews won’t be clipped unless you also set masksToBounds = true.

layer.cornerRadius = 12
layer.masksToBounds = true

🔹borderWidth ve borderColor

layer.borderWidth = 2
layer.borderColor = UIColor.black.cgColor

🔹shadowColor, shadowOpacity, shadowOffset, shadowRadius

• These properties define and render the layer’s shadow.
  (Remember that masksToBounds must be false for the shadow to be visible.)

🔹 shadowColor, shadowOpacity, shadowOffset, shadowRadius

🔹transform ve affineTransform

• Apply 3D transformations (CATransform3D) or 2D transformations(CGAffineTransform).

layer.transform = CATransform3DMakeRotation(.pi / 4, 0, 0, 1)

🚀 4. Implicit Animations

One of the most powerful features of CALayer is its implicit animationsystem.
Whenever you change a layer property (for example, backgroundColor),
Core Animation automatically animates that change without any additional code.

CATransaction.begin()
CATransaction.setAnimationDuration(0.5)
layer.backgroundColor = UIColor.blue.cgColor
CATransaction.commit()

🪄 3. Difference Between CALayer and UIView

+------------------------------------------------------+
|                   UIView (High Level)                |
|------------------------------------------------------|
| 🧩 Role: User interaction, layout, and hierarchy     |
|                                                      |
| 📦 Key Features:                                     |
|   • frame, bounds, center                            |
|   • Auto Layout / SnapKit                            |
|   • Touch and gesture handling                       |
|   • Lifecycle (layoutSubviews, draw, etc.)           |
|                                                      |
|  ⬇︎ Automatically contains a backing CALayer ⬇︎       |
|                                                      |
|   +----------------------------------------------+   |
|   |                CALayer (Low Level)           |   |
|   |----------------------------------------------|   |
|   | 🎨 Role: Rendering, animation, shadows, effects|  |
|   |                                              |   |
|   | 🔹 GPU-accelerated rendering                  |   |
|   | 🔹 backgroundColor (CGColor)                 |   |
|   | 🔹 cornerRadius, border, shadow              |   |
|   | 🔹 contents (image)                          |   |
|   | 🔹 sublayers[]                               |   |
|   +----------------------------------------------+   |
+------------------------------------------------------+

💡 Summary:

UIKit automatically maps the view hierarchy to an equivalent layer hierarchy, so changes in views are reflected in their underlying layers.UIView handles user interaction and layout. CALayer manages only visual content and animations.