モバイルアプリにおけるLayer — 概要、種類、仕組み

モバイルグラフィックスにおけるLayerとは

Layerは、画面フラグメントのビットマップ画像を保存し、その視覚的属性（位置、サイズ、回転、不透明度、影、色）を管理する低レベルグラフィックスシステムオブジェクトです。iOSでは、各UIViewにはlayerプロパティを介してアクセス可能な組み込みのCALayerがあります。開発者は、UIViewをバイパスしてレイヤーを直接操作し、細かいレンダリング制御を行うことができます。

レイヤーアーキテクチャはModel-View-Controllerパターンに従い、CALayerがModelとして機能します。視覚プロパティの状態を保存します。Core Animationは、状態間のアニメーション遷移を管理するControllerです。View（UIView）は、タッチ処理とAuto Layout参加を追加するオプションのラッパーです。

Apple WWDC 2024によると、最新のiOSレンダリングパイプラインはレイヤー合成にMetalを使用しています。各CALayerは個別のバッファにレンダリングされ、その後Core Animationが不透明度とブレンドモードを考慮してすべてのバッファを最終画像に合成します。

Androidでは、レイヤーの類似物はViewと背景Drawableですが、グラフィックスレイヤーを直接操作するには、Android 10+のCanvasとRenderNodeを通じて利用できます。両プラットフォームでレンダリングを最適化するには、レイヤーの概念を理解することが重要です。

LayerとViewの違い

主な違いは責任範囲にあります。Viewはユーザー入力（タッチ、ジェスチャー）、配置（Auto Layout、frame）、ライフサイクルを処理します。Layerは専ら視覚的表現（コンテンツのレンダリング、プロパティのアニメーション、他のレイヤーとの合成）を担当します。

この分離により、Viewから独立してレイヤーのビットマップ表現をキャッシュできます。レイヤーが変更されない場合、Core AnimationはdrawRectを呼び出さずにキャッシュされたフレームを使用します。静的要素の場合、コード変更なしで大幅なパフォーマンス向上をもたらします。

iOSとAndroidのレイヤーの主な種類

iOSはCALayerから派生したクラスの豊富な階層を提供します。各サブクラスは特定のシナリオ（テキスト表示、ベクターグラフィックス、グラデーション、3D変換）に最適化されています。適切なレイヤータイプの選択はレンダリングパフォーマンスに直接影響します。

• CALayer — 背景色、境界線、影を持つ矩形領域のベースレイヤー。
• CAShapeLayer — CGPathを介してベクター形状をレンダリングするレイヤー。個別バッファを作成せずにGPUでレンダリングされます。
• CATextLayer — サブピクセルレンダリングとグリフキャッシュを備えたテキスト表示用レイヤー。
• CAGradientLayer — ハードウェアアクセラレーションによる線形および放射状グラデーション用レイヤー。
• CAReplicatorLayer — 指定されたオフセットで子レイヤーのコピーを自動生成するレイヤー。

Androidでは、レイヤーの概念はRenderNode、ViewLayer、HardwareRendererを通じて実装されています。Android 5.0（API 21）以降、各Viewは独自のハードウェアアクセラレーションレイヤーにレンダリングされ、onDrawを呼び出さずにアニメーションが可能です。

iOSのさらなる柔軟性はCAReplicatorLayerとCAEmitterLayerによって提供されます。前者は反復パターンの作成に、後者はパーティクルシステムに使用されます。どちらもGPU専用で動作し、パフォーマンス低下なしに複雑な視覚効果を生成できます。

レイヤー階層とシーン合成

iOSのレイヤー階層はツリー構造に従います。各CALayerは複数の子サブレイヤーを含むことができます。親レイヤーに適用されるすべての変換（拡大縮小、回転、移動）は自動的に子要素に適用され、アニメーション中の視覚的一貫性を保証します。

シーン合成はCore Animationによって次の順序で実行されます。最初に背景がレンダリングされ、次に各子レイヤーが下から上の順にレンダリングされます。各レイヤーについて、Core Animationは不透明度、マスク、ブレンドモードのプロパティをチェックし、最終フレームに合成します。

Apple Documentationによると、opaque = trueでアルファチャンネルのないレイヤーの合成は追加パスなしで実行されます。GPUは単に前のレイヤーの上にピクセルをコピーします。レイヤーに透明度がある場合、GPUはアルファブレンディングを実行するため、追加の計算リソースが必要です。

Androidでは、レイヤー合成はSurfaceFlingerを介して実行されます。これは各アプリケーションからバッファを受け取り、z順序に従って合成するシステムサービスです。Androidの各Windowは複数のグラフィックスレイヤーを含むことができる独立したSurfaceです。

マスクとレイヤークリッピング

CALayer.mask — レイヤーに任意形状のマスクを適用できるプロパティです。マスクは他のCALayer（例えば、円形パスのCAShapeLayerや滑らかな透明度遷移を作成するCAGradientLayer）にすることができます。マスクを使用すると、各ピクセルのアルファ値を計算するための追加レンダリングパスが必要になるため、GPU負荷が増加します。

単純な矩形クリッピングには、cornerRadiusとmasksToBoundsの使用が推奨されます。maskプロパティによるマスクとは異なり、cornerRadiusはラスタライズ段階でハードウェアによって処理され、追加パスは必要ありません。

レイヤーパフォーマンス：レンダリングとキャッシュ

shouldRasterizeはパフォーマンス最適化のための重要なCALayerプロパティです。shouldRasterizeをtrueに設定すると、Core Animationはレイヤーとそのすべてのサブレイヤーを個別のオフスクリーンバッファにレンダリングします。後続のフレームでは、再レンダリングの代わりにキャッシュされたビットマップ画像が使用されます。

キャッシュは静的またはほとんど変更されないレイヤー（影、グラデーション、角丸テキスト）に効果的です。ただし、頻繁に更新されるレイヤー（アニメーション、動画、スクロール）では、各フレームでキャッシュの再生成が必要になるため、ラスタライズがパフォーマンスを低下させる可能性があります。

Objc.ioの調査によると、iPad ProでのshouldRasterizeの適切な使用により、複雑な画面のレンダリング時間が25msから8msに短縮されます（3倍以上）。重要な条件は、レイヤーが3〜5フレームに1回以上変更されないことです。

• Opaque = true — レイヤーが不透明であることをCore Animationに伝え、アルファブレンディングを排除します。
• drawsAsynchronously — メインスレッドをブロックせずに複雑なレイヤーの非同期レンダリングを有効にします。
• allowsEdgeAntialiasing — 変換されたレイヤーのエッジアンチエイリアシングを有効にしますが、GPU負荷が増加します。
• allowsGroupOpacity — 子レイヤーのグループ不透明度を制御します。

SwiftとKotlinでのレイヤー操作の例

最初の例は、SwiftでのCALayerの基本的な視覚プロパティ（角の丸み、影、境界線）の設定を示しています。

import UIKit

class StyledView: UIView {
    override func awakeFromNib() {
        super.awakeFromNib()
        layer.cornerRadius = 12
        layer.masksToBounds = false
        layer.shadowColor = UIColor.darkGray.cgColor
        layer.shadowOpacity = 0.3
        layer.shadowOffset = CGSize(width: 0, height: 4)
        layer.shadowRadius = 8
    }
}

2番目の例は、CABasicAnimationを使用したSwiftでのレイヤーアニメーションの作成です。positionプロパティがUIViewの関与なしにアニメーションします。

let animation = CABasicAnimation(keyPath: "position")
animation.fromValue = NSValue(cgPoint: CGPoint(x: 0, y: 0))
animation.toValue = NSValue(cgPoint: CGPoint(x: 150, y: 300))
animation.duration = 1.0
animation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
targetLayer.add(animation, forKey: "moveAnimation")

3番目の例は、AndroidでのKotlinにおけるRenderNodeの操作です。RenderNodeはCALayerの直接的な類似物であり、Canvasレベルでグラフィックスレイヤーを操作できます。

import android.graphics.renderer.RenderNode

fun createLayer(): RenderNode {
    val node = RenderNode("customLayer")
    node.setPosition(0, 0, 300, 200)
    node.setScaleX(1.5f)
    node.setScaleY(1.5f)
    val canvas = node.beginRecording()
    canvas.drawColor(android.graphics.Color.BLUE)
    node.endRecording()
    return node
}