CALayerの基礎
レイヤーとそのプロパティ、階層を扱います。
「CALayerの基礎」はCoddyKit上の無料Swift Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSwift Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Swift Academyコースには全4レッスンが含まれています。
CALayer とは
CALayer は、UIKit で目にするすべてのものを支える描画基盤です。各 UIView は、GPU 上で視覚的なコンテンツをテクスチャとして保持するレイヤーによって描画されます。
レイヤーを直接扱うことで、ハードウェアアクセラレーションによるグラフィックスとアニメーションを利用できます。
import UIKit
let layer = CALayer()ビューの背後にあるレイヤー
すべてのビューには layer プロパティがあります。レイヤーのプロパティを設定するほうが、カスタム描画よりも簡単で低コストな場合がよくあります。
view.layer.cornerRadius = 12
view.layer.masksToBounds = trueジオメトリ: frame、bounds、position
レイヤーには、独自の座標空間を表す bounds、親の中でアンカーが置かれる位置を表す position、そしてそこから導出される frame があります。いずれか 1 つを編集すると、残りも更新されます。
let layer = CALayer()
layer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
layer.position = CGPoint(x: 150, y: 150)アンカーポイント
anchorPoint（デフォルトは 0.5, 0.5 = 中心）は、位置指定とトランスフォームにおけるレイヤーの原点を定義します。回転と拡大縮小はこの点を中心に行われます。
layer.anchorPoint = CGPoint(x: 0, y: 0) // top-left pivot視覚的なプロパティ
レイヤーでは、backgroundColor（CGColor）、cornerRadius、borderWidth、borderColor、opacity などの視覚的なスタイルを直接設定できます。
layer.backgroundColor = UIColor.systemBlue.cgColor
layer.cornerRadius = 8
layer.borderWidth = 2
layer.borderColor = UIColor.white.cgColorシャドウ
レイヤーでは、shadowColor、shadowOpacity、shadowOffset、shadowRadius を使ってシャドウを描画します。パフォーマンスのために shadowPath を設定してください。
layer.shadowColor = UIColor.black.cgColor
layer.shadowOpacity = 0.3
layer.shadowOffset = CGSize(width: 0, height: 4)
layer.shadowRadius = 6サブレイヤー
レイヤーはツリーを形成します。addSublayer で子を追加すると、子は親の座標空間内に配置されます。
let parent = CALayer()
let child = CALayer()
child.frame = CGRect(x: 10, y: 10, width: 40, height: 40)
parent.addSublayer(child)特化したレイヤー型
UIKit にはレイヤーのサブクラスが用意されています。CAShapeLayer はベクターパス、CAGradientLayer はグラデーション、CATextLayer はテキスト、CAReplicatorLayer は複製された子を扱います。
let shape = CAShapeLayer()
shape.path = UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: 50, height: 50)).cgPath
shape.fillColor = UIColor.systemRed.cgColorグラデーションレイヤー
CAGradientLayer は、colors、locations、startPoint、endPoint で定義した滑らかな色の変化を描画します。
let gradient = CAGradientLayer()
gradient.colors = [UIColor.systemBlue.cgColor, UIColor.systemPurple.cgColor]
gradient.startPoint = CGPoint(x: 0, y: 0)
gradient.endPoint = CGPoint(x: 1, y: 1)contentsScale と鮮明さ
レイヤーが描画するコンテンツを Retina ディスプレイで鮮明にするには、contentsScale を画面のスケールに設定してください。設定し忘れると、テキストや図形がぼやけます。
layer.contentsScale = UIScreen.main.scaleレイヤーは軽量です
レイヤーはタッチイベントや Auto Layout を処理せず、純粋な視覚オブジェクトです。そのため、装飾用またはアニメーション用のコンテンツにはビューよりも低コストです。
クイックチェック: CALayer
CALayer の基本についての理解を確認します。
まとめ: CALayer の基本
CALayer はすべての UIKit ビューを支え、GPU アクセラレーションによる視覚表現を提供します。そこには、bounds / position / anchorPoint によるジオメトリ、角丸、ボーダー、シャドウなどのスタイル、そしてサブレイヤーのツリーが含まれます。
特化したサブクラスは、図形、グラデーション、テキスト、複製を扱います。鮮明さを保つために contentsScale を設定し、レイヤーはタッチ処理や Auto Layout を持たない軽量な視覚オブジェクトであることを覚えておいてください。この基礎が、これから学ぶアニメーションを支えます。
よくある質問
「CALayerの基礎」レッスンは無料ですか？
はい。「CALayerの基礎」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Swift Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Swift Academyコースには全4レッスンが含まれています。
「CALayerの基礎」で何を学びますか？
レイヤーとそのプロパティ、階層を扱います。 ブラウザで直接実行するハンズオンコードでSwift Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Swift Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSwift Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「CALayerの基礎」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSwift Academyレッスンでコードを書いて実行できますか？
はい。すべてのSwift Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。