UI
iOS
CALayer
Swift
More than 1 year has passed since last update.

はじめに

この記事は リクルートライフスタイル Advent Calendar 2016 の21日目の記事です。
AirレジのiOSアプリ開発を担当している山口です。

CALayerと聞くと、Viewを角丸にしたり枠線を描画するために利用するシーンが思い浮かぶのではないでしょうか。CALayerを深く理解すれば、より多彩なカスタムUIやアニメーションを実現することができます。今回はCALayerの種類についてざっくりまとめてみました。

CALayer

普段アプリのUIを作る場合は、UIViewやそのサブクラスであるUILabelやUIImageViewなどを利用して実装するかと思います。View自身が描画コンテンツを管理しているように見えますが、実際にはCALayerがモデルオブジェクトとして描画する内容を管理しています。
詳しい内容については、Core Animationプログラミングガイド に記載されているのでご参照ください。

CALayerには用途に応じた様々なサブクラスが用意されています。また、UIViewと同様にLayerオブジェクト同士を階層構造で管理できるため、これらを組み合わせて利用することで表現豊かなカスタムUIを実現することができます。利用頻度の高いCALayerサブクラスをいくつか紹介します。

CAGradientLayer

レイヤー自身をグラデーションで塗りつぶす機能を提供するレイヤーです。これを利用すれば画像リソースを使用することなくグラデーションを実現することができます。

スクリーンショット 2016-12-18 18.07.14.png

CAShapeLayer

CGPathベースでコンテンツを描画する機能を提供するレイヤーです。pathの作成には多少慣れが必要ですが、使いこなせば多彩な図形を描画することが可能です。CAShapeLayerを利用してカスタムViewを作成したので、参考までにご紹介します。

KYShutterButton

iOS標準カメラアプリのシャッターボタンに似せたカスタムButtonです。CAShapeLayerをいくつか組みわせて実装しています。IBDesignableにも対応しているので、InterfaceBuilder上で確認することもできます。

KYShutterButton2.gif

KYShutterButton1.gif

KYDigitalFontView

電卓などの液晶モニタで表示されるような文字を描画するカスタムViewです。利用用途は謎ですが、、遊びで作ってみました。

KYDigitalFontView1.gif

KYDigitalFontView2.gif

おわりに

CALayerを使えば上記のようなカスタムUIを作成することができます。本記事では紹介していませんが、アニメーションについても細かな設定が可能ですので、興味のある方はぜひ深く調べてみてください