初心者から始めるスタンプカメラの作り方(2/6)

【動作環境】

Swift1.2 Xcode6.4 

【対象レベル】

超初心者

【学習内容】

ストーリーボードでの画面の作り方

Collection Viewの作り方

繰り返し処理(for文)

配列処理

【再生時間】

17:26


動画の音声の書き起こし

それでは前回に引き続き、スタンプカメラアプリの制作を行っていきます。


スタンプの一覧画面の制作を行っていきたいと思います。その画面からスタンプを選択すると選択されたスタンプが元の画面の写真の上に追加されるという流れにしていきたいと思います。

ではもう一つの画面を追加したいと思いますので、画面右下のライブラリからこのView Controllerをもう一つ画面上にドラッグ&ドロップしてみましょう。

そしてこの2つの画面を並べてみてください。

次に、最初の画面の左下の方にこのようなアイコンを配置しました。

このボタンを押すと右側のこの画面が開きまして、スタンプの一覧が表示されるというロジックにしていくわけなんですが、

まずこのボタンをタップしたら次の画面に画面遷移するという設定をしていきます。

アイコンを選択した後にctrlボタンをクリックしながら次の画面に線を引っ張っていきましょう。ctrlを押しながらドラッグです。この青い線が出まして、次の画面に引っ張って行って離すとpush,modal,customという選択肢が出ますので、

この中の真ん中のmodalを選択しましょう。

これが一番基本的な画面遷移になります。

このように画面と画面の間に矢印が表示されまして、この2つの画面の画面遷移の関係ができたことになります。


次に、この2番目の画面に必要なオブジェクトを配置していきたいと思います。

スタンプの一覧を表示するために、今回はCollection Viewを使います。

これです、このアイコンをしているのがCollection Viewです。

これを画面上にドラッグ&ドロップして載せていきます。このようにします。このように載せていきます。

そしてちょっと下に隙間を作りましょう。このようにします。

そしてこの空いた隙間に、この画面を閉じるためのボタンを置いていきます。

Buttonですね、Buttonをドラッグ&ドロップで置いていきます。そして名前を「Close」とでも変えましょう。

今回各機種ごとに画面サイズが違いますけど、その対応までやってしまいましょう。

 

まずこのCollectionViewを選択します。そしてここの右上のサイズインスペクタを選択します。

ここにAuto Sizingの設定があります。

この設定で、画面のサイズが変化した時にどのように画面が伸び縮みするかの設定ができます。

このCollectionViewから下はデフォルトモードでいいかと思います。

ただこのCloseボタンの方は、左と上からの距離が一定になっていますね。

なのでこの設定を外してしまって、このCloseボタンは常に画面の一番下に置きたいですので、

画面の一番下の端からの距離を一定にするという設定にしましょう。

これで常に画面下からの距離が一定で画面真ん中の辺りに表示されるようになるかと思います。

その確認を行うために、シミュレーターで一つ一つ全ての機種を起動してもいいんですけど、

それだと手間がかかりますので、このプレビューを使って確認します。

ここで、Automaticのところでプレビュー。Main.Storyboardを選択します。

そうするとこのように、今の画面での見え方が確認できます。大体これでOKかなと思います。

+ボタンを押して3.5インチ、4.7インチ、5.5インチの方でも正常に正しく表示されることを確認しましょう。

このように全部の画面でとりあえずは正しく表示されていそうです。なのでここまでは問題ないかなと思います。


それでは画面の方を引き続き作っていきたいと思います。

CollectionViewにはデフォルトで一つのCollectionViewセルが配置されています。これです。

ちょっとサイズを大きくしておきましょう。これくらいでいいかなと思います。

そしてここにImageViewを一つ入れていきましょう。ImageViewをこのセルの中に入れていきます。

ぴったりとはまるようにしていきましょう。これでOKです。

UIImageViewの中にスタンプを表示させていきたいと思います。

これはあらかじめモードをAspect Fitにしておきましょう。

そうすることで常に縦横比が一定に保たれたまま、この枠内に収まるように画像が入ることになります。

そしてこのUIImageViewをコード上で認識するためにタグの値を設定しておきましょう。

タグを1に設定しておきます。これでOKです。

 

あといくつか、CollectionViewを扱うために必要な設定があります。

まずCollectionViewを選択してください。

選択した上で右上のOutletsだとこのdetaSourceをdelegateというのがあります。

これはCollectionViewのデータがどこに存在するか、

CollectionViewを制御するために必要なメソッドはどこに存在するかを指定するためのものです。

この右側の白い丸をViewControllerまで引っ張っていって離しましょう。

そうすることでこの画面を制御するViewControllerにこのCollectionViewを制御するためのメソッドを呼び、データが存在するという指定を行うことができます。このように設定できればOKです。


そしてこの画面を制御するためのViewControllerは実はまだ作っていないです。今からそれを作りたいと思います。

個々のナビゲーターエリアでctrlを押しながらクリックして、New Fileを選択しましょう。

そしてCocoa Touch Classを選択します。

ここにUIViewControllerを継承したStampViewControllerという名前のクラスを作っていきたいと思います。

LanguageはSwiftを選択してください。

NextをタップしてCreateをクリックすると、このように新たにStampViewController.swiftというファイルが出来上がりました。

この中にStampViewControllerクラスがあります。

このクラスが先ほどの画面を制御するために使いたいわけなんですけど、今からその設定をしていきたいと思います。

二番目の画面のViewControllerを選択しましょう。

そしてここのCustom Classのところで今作ったStampViewControllerの設定をしましょう。

これを設定することで、StampViewControllerクラスの中でこの画面を制御するための記述をすることが可能になります。


では次、セルのIdentifierの設定をします。

CollectionViewセルを選択しましょう。

そしてこのアトリビュートインスペクタで、Identifierというところがあります。

これはコード上でこのセルを識別するために必要なものなんですけど、ここに識別子を入れていきたいと思います。

今回はシンプルにCellという名前、大文字で始まるCellという名前で識別子を設定します。これでOKです。

それではコードの方を書いていきたいと思います。

 

StampViewControllerを開きましょう。

この中に、先ほどのCollectionViewに全部で6つのスタンプに使うための画像を一覧表示するというのを実装していきたいと思います。

まずスタンプの方、実際に使う画像の方をプロジェクトの方に追加していきたいと思います。

今回はシンプルにするために、それぞれの画像に1番から6番までの番号を付けました。

1.pngから6.pngまでのファイルを今回はスタンプのための画像として使いたいと思います。

この画像をまとめてプロジェクトの方にドラッグ&ドロップしまして、

Copy items if neededにチェックが入っていることを確認した上でFinishをクリックしましょう。

そうするとこの1番から6番までのpngファイルがプロジェクトの方に取り込まれます。OKですね。


それではStampViewControllerの方に戻ります。

それではまず、今取り込んだ画像データの一覧を格納するための配列を宣言していきましょう。

ここにvar imageArray : [UIImage]が入る配列ですね。

最初は空にしておきます。こういう風に宣言しておきましょう。こんな形にしましょう。

viewDidLoadの中で、ここに画像データの方を入れていきます。

for構文を使っていきます。

for i in 1が6まで変化する。iの値が1から6まで変化します。

そして一回ループするごとにimageArrayにアペンドします。要素を加えていきます。

どんな要素を加えるかというと、

UIImage型のImageデータです。


こんな名前の画像データを入れてください。"\(i).png"です。

このバックスラッシュとカッコで囲むことによって数値を文字列に変換することができます。

このUIImage型は必ず!マークを付けないといけません。

なぜならUIImage型、namedの値で指定したファイルが存在しない時はnilが返ってきてしまいます。

今回はまずnilがってくることはありませんので、!マークをつけてnilがってこないという設定にします。

そうしないとエラーが起きてしまいます。

UIImageappendでUIImage|named、このような記述をして、

imageArrayに1.pngから6.pngまでの画像データが入ることになります。


では次、CollectionViewの設定をしていきたいと思います。

CollectionViewの設定をするためには、いくつかのメソッドを使って、そのメソッドの中の設定を書き換えていくことになります。

そのメソッドは全てプロトコルの中にあるメソッドです。

いわゆるdelegateメソッドというものですので、まずプロトコルの導入をしないといけません。

UICollectionViewDelegateとUICollectionViewDataSourceです。

二つのプロトコルを導入しておきましょう。この段階で赤い!マークが表示されてエラーになっているはずです。

なぜならこの二つのプロトコルの中にあるメソッドがまだ実装されていないからなんです。

そのメソッドを実装することでこのエラーは消えます。じゃあそのメソッドを書いていきましょう。

まずCollectionViewの中にあるセルの数を指定するためのメソッド。

CollectionView、numberOfItemsInSectionです。これを書きます。

この中でreturn imageArray.countと書いてやります。

こう書くことでimageArrayの中にある画像データの数だけセルが作られることになります。


次、各セルの中にある、各セルの中にある表示内容を指定するためのメソッドを書いていきます。

CollectionView、cellForItemAtIndexPathです。

この中でまずセルを取得します。

セルはCollectionViewから取得します。

dequeueReusableCellWithReuseIdentifierです。

先ほどストーリーボードで指定したIdentifierの方を指定していきます。

Cell、そのままでしたね。IndexPathは引数として取得したものを指定します。

次はImageViewです。このセルの中から取得します。先ほど1番というタグ付けをしました。

viewWithTag(1)で取得できます。

そしてキャストを行って、型をUIImageViewにしないといけないです。

UIImageViewにします。

そしてこのImageViewの表示されている画像を指定します。

imageArrayの中のindexPath.rowで、何番目のセルかっていうのを指定します。

それに対応する画像をimageArrayの中から取っていきますね。

最後、return cellにしてやることで、セルの表示内容が確定します。

 

ちょっとエラーが起きていますね。

エラー内容を見てみると、キャストしていなかったですね。

ここでUICollectionViewCellと指定してやることでエラーは消えました。

Swiftの場合、結構型の指定は厳密にしてやらないといけないところがありますので、この辺りキャストが結構頻繁に行われるようになるかなと思います。

キャストというのは型の変換のことですね。はい、ここまで書けました。


それでは実行してみて、正しく結果が表示されることを確認しましょう。

iPhone 5sのシミュレーターで実行してみます。

まず写真を取り込みましょう。ライブラリから写真を取り込みます。

これは先ほどもやりましたので短縮できるかなと思います。

そして、このスタンプ一覧画面をタップすると、

このようにスタンプ一覧がコレクションビューを使って表示されることが確認できました。

まだCloseボタンは実装されていませんので、ここを押しても何も起きません。


それでは、Closeボタンをタップするとこのスタンプ一覧画面が閉じるようにしていきましょう。

ここに次のような記述をしてみましょう。

@IBAction func closeTapped(){

です。ここに

self.dismissViewControllerAnimated(true, conpletion: nil)

と書いてみましょう。

あとはストーリーボードの方でView Controllerを選択してコネクションインスペクタ、closedTappedとこのボタンを紐づけましょう。

その際、Touch Up Insideを選択します。

再び実行してみます。フォトライブラリから写真を選択して、スタンプ一覧画面が表示されます。

そしてCloseボタンをタップすると、今のスタンプ一覧画面が閉じます。

ここまでで、CollectionViewを利用したスタンプの一覧の表示ができるようになりました。

次回以降、このスタンプを実際に画面上に表示して、移動・拡大・縮小ができるようにしていきたいと思います。


1 2 3 4 5 6

Tekuruプログラミングスクールでは、

動画だけでは伝わりきらない、アプリ開発の楽しさや、

気軽に質問できる雰囲気で、プログラミングを学ぶことができます。

もっと深く、プログラミングを理解したい方は、ぜひ無料体験にお越しください。