【動作環境】
Swift1.2 Xcode6.4
【対象レベル】
超初心者
【学習内容】
配列処理
AppDelegateの使い方
コードの記述の仕方
【再生時間】
7:16
動画の音声の書き起こし
それではまず、選択したスタンプを画面に表示するという機能を実装していきたいと思います。
まずスタンプの扱い方なんですが、スタンプ用のクラスを一つ作って、その中でスタンプの制御をしていきたいと思います。
ではスタンプ用のクラスを作ります。ナビゲーターエリアで右クリックもしくはctrlを押しながらクリックしてNew File。
そしてCocoa Touch Classを選択しましょう。
Nextをクリックしまして、Subclass ofのところはUIImageViewですね。
そしてクラス名も、シンプルにStampという名前にしておきましょう。
LanguageはSwiftを選択してください。
Nextをクリックします。で、Createしますね。
これでStampというクラスができました。
次、複数のスタンプを画面上に追加するわけですけど、
それを取り扱うために配列の中にこのスタンプを入れていきたいと思います。
AppDelegate.swiftを選択してください。
この中で、この3つの変数を宣言しましょう。
まず先ほど述べました、stampArrayという配列を作ります。
この中にはStampの型を持った要素が入ってきます。最初はその中身を空にしておきます。
そしてisNewStampAddedという変数をここに追加します。これは初期値としてfalseを持たせておきます。
このisNewStampAddedは新しいスタンプが追加されたかどうかを判別するためのフラグに使うための配列ですね。
ここまででスタンプを使うとりあえずの準備ができました。
次、StampViewControllerの方に移りましょう。
ここに各スタンプを選択した時の処理の方を書いていきたいと思います。
この辺りにこのようなメソッドを書いてください。
collectionView、didSelectItemAtIndexPathですね。
このメソッドはスタンプを選択した時に呼ばれるメソッドです。
この中で新たにスタンプを作って、それを先ほどAppDelegateの中に書いた配列の中に追加するという処理を書いていきます。
このメソッドの中身、今はちょっとコピペしましたけど、説明していきます。
まずstamp、先ほど追加したStampクラスを使ってスタンプを初期化致します。
で、そのスタンプに表示するべき画像を設定します。
前回やったimageArrayの中にその画像はありますので、indexPath.rowでその要素の番号を指定して、
この画像を取り出してやってimageに入れてやるっていうことをやってやります。
次の行、ここにaD = UIApplication.shareApplication().delegateって書いてありますね。
UIApplication.shareApplication().delegateというのは共通のデータ置き場です。
AppDelegateの中で先ほど宣言した変数はこのdelegateの中から呼び出すことができます。
で、AppDeligateの型を持っているということで明示してあります。
そして先ほどのAppDelegateの中に書いたstampArrayの中にこのIDを使ってアクセスすることができます。
このstampArrayの中にappendの命令でこのスタンプを追加します。
先ほどAppDelegateの中に書いたisNewStampAddedはtrueにしてあります。
これで新しいスタンプが追加されるフラグをtrueにすることができます。
そして新しいスタンプを配列に追加してフラグをオンにしたらdismissViewControllerAnimatedでこの画面、
スタンプ制御画面の方を閉じてやることにします。
次です。
ViewControllerの方では、つまり最初の画面の方では、スタンプを画面に追加するというロジックを書いてやる必要があります。
今からそれを書いていきたいと思います。
そのロジックはviewWillAppearというメソッドの中に書きますね。
viewWillAppearなのですが、画面が表示される寸前に実行される命令です。
その中でフラグがオンの時はスタンプを画面に追加してやるということをやってやります。
このように書きます。
あ、もう一点、AppDelegateをこのViewControllerに導入しましょう。
先頭の方でこのViewControllerを導入しておくと、後から何回でもこのaDにアクセスすることによって先ほどのAppDelegateの中に宣言した変数にアクセスすることができるようになります。
ここですね、aD = UIApplication.sharedApplication().delegate as! AppDelegateと書いてやります。
そしてviewWillAppearの中でこのaD.isNewStampAddedというフラグがオンの時は、
スタンプを画面に追加してやるという処理を書いてやります。
この追加処理の説明をします。
このstampArrayの中の最後の要素、lastにアクセスします。
それがstampです。そしてstampのframeを設定してやります。
frameを設定してやることによってサイズが決まります。
まずx座標とy座標というんですけど、ここはとりあえず0にしておいて、幅を100、高さを100にしてあります。
そしてこのstampのcenter、中央座標をcanvasViewの中央にしてあります。
そしてこのstamp.userInteractionEnabledをtrueにしてあります。
これがないとスタンプに対して後から操作を行うことができませんので、これはtrueにしておきます。
そしてcanvasView.addSubView(stamp)でcamvasViewにこのスタンプを追加してあります。
そしてこのaD.inNewStampAddedはfalseにしてあります。
こう書いてやることでフラグを判定しますので、例えば先ほどのスタンプ画面に行ってもCloseボタンを押すとこのスタンプは追加されないことになります。
先ほどのスタンプ選択画面でスタンプを選択した時のみこのスタンプが追加されるようになります。
ここまで書けたらストーリーボードの方は特に操作することはないです。
シミュレーター上、もしくは実機の方でアプリを起動してみて、
実際にスタンプが画面上に追加されることを確認してみましょう。
では実行してみます。
少々お待ちください。
起動しました。
まず、シミュレーターではカメラは使えませんのでライブラリの方から写真を選択します。
そしてスタンプを選択します。
適当なスタンプを選択します。このように、画面上にスタンプが追加されました。
今回はここまでです。
次回以降このカメラをドラッグ＆ドロップで動かしたりピンチイン/ピンチアウトで縮小/拡大したり、
二本指で回転させたりという機能を実装していきたいと思います。
Tekuruプログラミングスクールでは、
動画だけでは伝わりきらない、アプリ開発の楽しさや、
気軽に質問できる雰囲気で、プログラミングを学ぶことができます。
もっと深く、プログラミングを理解したい方は、ぜひ無料体験にお越しください。
コメントをお書きください