C4でApple Watch Activityの円弧UIを作ってみた

はじめに

C4は、SwiftでCreative Codingをするためのオープンソースフレームワークです。
描画・メディア系に特化しています。
詳しくは弊社HACKistブログの記事をご覧ください。

 

 

今回はこのC4ライブラリを用いてApple Watch Activityでお馴染みの円弧UIとアニメーション(もどき)を作ってみました。

 

開発環境

Xcode 8.2.1
Swift 3.0

 

C4 Install

新規プロジェクトを作成し、CocoaPodsでC4をインストールします。
今回はSwift3.0で実装したため2.0系をインストールします。
(執筆時の最新バージョンは2.1.1)

 

準備

早速xcworkspaceファイルを修正します。
まずimport文でC4のライブラリをインポート、継承するクラスもCanvasControllerに変更します。

 

実際のコード

円弧を描画するうえでポイントとなるのが、以下2点です。
・strokeStartとstrokeEndの設定
・fillColorをclearにする

strokeStartとstrokeEndを指定することで円弧状となり、fillColorをclearにすることで円の中央が切り抜かれます。
strokeStartとstrokeEndを指定しないと通常の円を描画することになります。

strokeStartとstrokeEndの値の範囲は以下の通りです。

例えばstrokeStart: 0.75とstrokeEnd:1.0と指定すると下記のような円弧が描画されます。

今回は12時の方向を描画のスタート位置にしたいため、
rotationで-45度回転させ開始位置を調整しました。

 

確認

シミュレータで確認するとこのような感じです。

 

最後に

このように比較的簡単にApple Watch ActivityのUI(もどき)を再現することができました。
C4も頻繁にアップデートされているため今後のアップデートに期待です!

●この記事を書いた人