circle-menuライブラリとは
Swiftには様々なライブラリが提供されています。その中で、私がアプリを開発する際に使用した「circle-menu」ライブラリについてお話したいと思います。「circle-menu」とは以下に画像を貼り付けますが、簡単にアニメーション付きのオシャレなメニューを実装できるライブラリになります。
circle-menuライブラリのインポート方法
今回はcocoapodsを使用してcircle-menuをインストールします。cocoapodsについてわからない方はまず調べていただいて準備してください。いつか私のブログでもcocoapodsのインストール方法の記事を執筆したいと思っていますが、申し訳ないですが、今は調べてください。cocoapodsの準備が完了している方は以下を実施してください。
コマンドプロンプトを立ち上げる
MacのPCでデスクトップの右上にある「🔎」マークをクリックして「ターミナル」と打ち込んでください。打ち込むと以下のような画面が立ち上がると思います。この画面が立ち上がってくればここは完了になります。画面は白の画面の方もいると思いますが色は気にしないでください。
Podfileを修正する
自分が作成しているソースがあるディレクトリ（フォルダ）まで移動します。「〇〇〇.xcworkspace」や「〇〇〇.xcodeproj」があるディレクトリです。構成は以下のような構成になっていると思います。
上記のディレクトリ配下にある「Podfile」ファイルを以下のコマンドで開きます。
・vim Podfile
コマンドを入力すると「Podfile」を開き修正できるようになります。但し、ファイルを開いた後Windowsのファイルと同じようにマウスでカーソルを合わせて文字を入力というのはできません。まずは、「i」を入力してください。「i」を入力すると編集モードになるので文字が入力できるようになります。編集モードにしたら「↑↓←→」でテキストを入力したい箇所までカーソルを持っていき、以下の画像の14行目の「pod ‘CircleMenu’」を追加してください。14行目以外は別のライブラリになるので追加は不要です。あくまで14行目の1行のみを追加してください。追加が終わったら編集モードを終了するために「Esc」キーを入力してください。これで編集モードを終了します。次に追加した内容を保存し、開いているファイルを閉じる必要があります。ファイルを保存するのと閉じるのは同時に実施できるので、「:wq」を入力してください。これでPodfileの修正は完了になります。
上記の内容を簡単にまとめます。
・vim Podfileでファイルを開く
・キーボードで「i」を入力して編集モードにする
・編集したい箇所までキーボードの矢印で移動し、「pod ‘CircleMenu’」を入力する
・キーボードで「Esc」を入力して編集モードを終了する
・ファイルを保存して閉じるために「:wq」を入力する
→「w」は上書き保存。「q」はファイルを閉じる。
もし、入力を間違えてしまった場合は「:q!」でファイルを保存しないで閉じることもできます。
Podfileをアップデートする
ファイルの編集を終えたら上記と同じディレクトリで以下のコマンドを実施してください。
必ず、同じディレクトリで実行してください！間違えてしまった際は自己責任でお願いいたします。
rm -rf ~/Library/Cashes/CocoaPods/; rm -rf Pods; pod install
上記のコマンドを実行するのが不安な方は、「pod update」でも大丈夫ですが、ごみが残る可能性があります。コマンドを実行したらcircle-menuのインストールは終わりになります。
circle-menuの実装方法
次にcircle-menuの実装方法、使い方について説明していきます。circle-menuですが、私の場合はソースコードとStoryBoardを組み合わせて実装していきます。まずはStoryBoardの方を説明していきます。
ボタンの配置（StoryBoard）
まずはStoryBoardにcircle-menuオブジェクトを配置します。circle-menuオブジェクトを置くにはまずはボタンオブジェクトを置く必要があります。xcodeの右上の「+」ボタンから「button」オブジェクトを選択して、ドラック＆ドロップで作成している画面に「button」オブジェクトを配置してください。
classをCircleMenuに変更（StoryBoard）
ボタンを配置したら次にClassを「CircleMenu」に変更しましょう。xcodeの「Show the Identity inspector」からCustom ClassのClass項目を「CircleMenu」に変更します。
circle-menuの設定をする（StoryBoard）
次にStoryBoardでcircle-menuの各設定をしていきます。私も内容を把握していない箇所が多々あるので、わかる範囲で説明致します。まずは「Show the Attributes inspector」メニューを開きます。以下の画面を開いたら①～④を設定していきます。
①「Buttons Count」は中心のボタンから広がるボタンの数を変更できます。
②「Duration」については申し訳ないです。。。私もよくわからないです。
③「Distance」は中心のボタンからの距離を変更できます。
④「Show Delay」は中心のボタンから広がるボタンが表示される時間を変更できます。
上記の設定をすることで、以下のような画面が表示できます。
私は①の項目を「5」に設定しているので、真ん中のメニューボタンから５個ボタンが表示されます。
②は申し訳ないですが私もよくわからないです。値を大きくしても変化がないです。。。
③ですがこれは中心のボタンからどの程度、派生するボタンと距離をとるかになります。あまりに大きい値を設定すると画面内に収まらずボタンが画面外に飛んでいきます。
④は、派生するボタンの表示速度になります。値が小さければ早くボタンが表示されます。
circle-menuで使用する変数の定義（ViewController）
次にViewContoroller側に以下の赤枠のソースをつけ足していきます。一番上の赤枠のクラスの定義箇所はそのまま書き写していただいて大丈夫です。次にメニューボタンですが、ここは書き移すのではなく、StoryBoardからドラッグ＆ドロップで引っ張ってきてください。
①の部分が少し難しいと思うので、詳細に説明致します。ここでは、配列でボタンに表示する画像とボタンの色を定義しています。私が作成したものは、ボタンが5つあるので5つ定義しています。少ない場合は減らしていただいて、多い場合は増やしてください。
画像はxcodeの左の一覧からフォルダアイコンの「Show the Project navigator」に画像をドラック＆ドロップすれば追加できます。ボタンの色については、「BROWN_COLOR」は別のソースに以下のように定義しているので、同じように記載していただくか、以下の「=」から右側のUIColor(xxx)をそのまま指定していただければ大丈夫です。
・let BROWN_COLOR = UIColor(red: 140/255, green: 100/255, blue: 80/255, alpha: 1.0)
viewDidLoadにソース追加（ViewController）
次にviewDidLoadにソースを追加していきます。最初の赤枠ですが、これは必ず記載してください。CircleMenuを使用する場合は必ず必要になります。
次の赤枠ですが、最初の1行で配置したボタンを四角から円形に変更しております。次がボタンの色を変更、その次が真ん中のボタンに画像を設定しております。画像を設定する際に、「.normal」が最初に表示される画像で「.selected」がボタンを押下した後に表示される画像になります。私の場合、最初に表示されている画像と押下した際の画像を変更していないので、以下のように同じ画像が表示されるように記載しております。
一番最後のタイトルの箇所ですが、私はタイトルを画像にしているので空としています。
circle-menuのメソッドの追加（ViewController）
最後にcircle-menuメソッドを追加する必要があります。一旦①はそのまま書き写していただいて問題ないです。ここでは変数で定義した画像やボタンの色などを設定していきます。変数の定義に問題なければ以下を書き写していただくだけでエラーとはならないと思います。
②ですがこれはボタンが選択されたらどんな処理をするかを記載していきます。私の場合ボタンは5つなので、5つの分岐を用意しております。「case 0」が最初に追加したボタンになります。私の場合、ボタンが押されたら別の画面に遷移するつくりとしております。ボタンは5つしかないので以下の場合、defaultはデッドロジックになります。
まとめ
xcodeを触ったことがない方が初めて上記を実装する場合、少し難しかもしれませんが、触った事がある方は上記の説明で簡単に実装していただけると思います。Swiftは歴史の浅い言語なのでネットに出てる情報が少なかったり英語ばかりだったりするので躓くことが多いですが、色々な便利ライブラリがあって、簡単に実装できるものも多いです。英語が読めなかったりライブラリのソースをみてもわからない方は、詳しい方に聞くのがベストだと思います。
コメント