【動作環境】
Swift2.2 Xcode7.3
【対象レベル】
超初心者
【学習内容】
地図や位置情報を使用して、指定した場所に行くと、
そこに設定した猫のキャラクターを集めるアプリの
開発方法をかんたんに解説しています。
動画の音声の書き起こし
はいそれでは前回の続きを行っていきたいとおもいます。今回は、猫をタップするとタップした猫が猫の一覧画面に表示されるようにしていきたいと思います。
それではまず、Main.StoryBoardのほうを作っていきたいと思います。
前回は、この最初の画面をつくりましたけど、今回はこの2段目の画面、この画面の下のほうに2つのタブがありますけど、右側のタブの画面を作っていきたいと思います。
それでは、まずこの画面の上にCollectionViewをのせていきます。
CollectionViewはコンテンツの一覧表示をさせたいときによく使われます。
このように、画面上にCollectionViewを配置して画面いっぱいに広げます。
そしてここのピンをクリックしまして、上下左右の制約をつけていきます。上下左右全て0にしていきますね。
これで4つの制約を加えます。ちょっとずれてますので修正しますね。これでOKです。
で、ここのセルですね、セルをちょっと引っ張っていきます。このセルには、Identifierをつけていきます。Cell、大文字で始まるCellをつけていきます。このIDはどんな文字でも構いません。
で、そしてここにドラッグアンドドロップでImageViewをのせていきますね。このように乗せて行って、枠ぎりぎりまで広げます。
枠にぴったり収まるようにしてください。これでOKです。
このViewにTagをふっていきます。このViewのTagに番号をふっていきます。
1番をふっていきます。このようにしますね。
これでStoryBoardのほうの設定が大体OKですね。
では、AppDelegete.Swiftのほうにいきます。ここに1行加えます。caughtsCats［String］＝［］と書いておきます。これは何かと言いますと、AppDelegeteはこの場所に変数を宣言しますと、これを各データの共通の置き場にすることができるんですね。
ここにString型の要素を入れることができる配列に宣言することで、この配列に追加する要素はどのファイルからでも参照することができるようになります。
では、ここにデータを加える箇所をかえていきましょう。
ここですね、ViewController.Swiftの中のここですね、MapView、didSelectAnnotationViewにメソッドを加えていきます。これは、MKMapView delegeteの持っているdelegeteメソッドですので、自動補完で入力することができます。
最新のMapだけ入れれば選択肢が自動で出てきますので、その中からこれを選びます。
この中で、確認のためにTappedと映します。そして、titleをAnnotationから取得しまして、ImageをそのTitleをKeyとして取得します。これが画像の絵になりますね。
そして先程のDelegeteですね、AppDelegeteを変数として、
取得しまして、その中のCaughtsCatsですね、CaughtsCatsという配列にImageの文字列を追加します。
そして、MapViewという.deslectAnnotationでこの選択状態を解除します。
こうすることで、このAnnotation、画像が表示されているAnnotatrionをタップしたタイミングでこの配列に要素が追加されることになります。
それでは、2番目の画面のViewControllerを作っていきますね。
Ctrlを押しながらクリックして、New Fileですね、そして、Cocoa Touch Classを選択しまして、Nextを押します。で、UiViewControllerを継承した、CatsViewControllerをというのを作っていきます。ここにはチェックを入れずに、LanguageはSwiftを選択しましょう。でNextですね、ここで保存します。その際に、このTargetsにチェックが入っていることを確認します。
このチェックが入っていることを忘れないようにしてくださいね。
で、Createすれば新たなファイルができますが、今回はすでにもうそのファイルが作ってあります。
作った時点である程度このClassの雛形はあるわけなのですけど、そこにいくつか追記を行っていきますね。
まず、ここ、先頭のここですね。CatsViewContoroller UIViewController,UICollectionViewDelegeteと、UICollectionViewDataSourceを加えていきます。
この2つのプロトコルを加えることで、いくつかのCollectionViewを実装するのに必要なメソッドを書くことができるようになります。
まず、このClassの中身なのですけど、このようにまず変数を宣言しますね。
CatImagesという名前の変数を宣言します。String型が入る変数の配列ですね。
この中に猫の画像名を入れていきます。そして、＠IBOutlet var Collection UICollectionViewとかきます。
これは、StoryBoardのほうで接続しておきます。StoryBoardのほうのCollectionViewをCode上で扱うために必要な変数になりますね。CollectionViewなんですけど、ここのViewControllerを選択しまして、ここにOutletsでCollectionと名前が出ていますので、これをひも付けてやれば接続することができます。
CatsViewControllerの中身ですね、このように接続完了すると、白丸が、黒丸に変わります。
次にoverride func viewWillAppearと書いてありますね。これは画面が表示されるタイミングで実行されるメソッドになります。なので、画面切り替え時には、ここのViewWillAppearが呼ばれることになります。
それとVeiwWillAppearが実行された後に、まずDelegateを取得します。これは、ViewControllerの中に書いてあるのと一緒ですね。そしてCatImagesをdelegete.caughtsCatsと同じものにします。
そして、collection.reloadDataでテーブルの更新が、CollectionViewの更新が行われます。
これは、CollectionView numberOfItemsInSectionという名前のMethosですが、
これはCollectionViewのセルの数を返します。
CatImagesCounts、CatImagesの中に入っている画像名の数だけセルを配置しますので、このように書きます。
そしてCollectionView,cellForItemAtIndexPathですね、これは各CollectionviewのCellの中に表示すべき内容を決定します。
まず、CollectionViewから再利用可能なCellを取得します。その時に、先ほどStoryBoardのほうで指定した
CellWithReuseIdentifierを使用します。で、IndexPathには複数でわたってきたIndexPathを指定します。
で、このCellのViewWithTagでこのようにImageViewを取得しますね。ImageViewのImageを先ほどのCatImagesの中にあるImage名を使ってデータに変換して指定します。
で、Cellを返してやると、このCellには猫のImageが表示されることになります。
今回ViewDidLoadの中には、何も書かなくて大丈夫です。
それでは、実行してみて動作を確認したいと思います。シミュレータを選択しますね。Iphone5sなどを選択して実行してみると、シミュレータのほうが起動してみて動作を確認することができます。
シミュレータが起動するまで少々時間がかかります。
はい起動しましたね。で、猫が表示されて、地図が表示されている。
これは前回までと一緒ですね。で、猫をタップします。
先ほどこの猫をタップした時に実行されるメソッドの中に、Tappedと表示してください、ということを書いたのですが、その通りに、コンソールにTappedと出力されていることがわかります。
そして、CatsのConditionのところを開いてみると、まだ何も表示されていないですね。
どこかちょっとおかしなところがあると思いますので、修正します。
reloadDataとなっていますね、そして、ViewControllerのほうで、didselectcontorollerとIndexPathですね。
Tagのほうを確認してみましょう。ImgeViewのほうの1番になっていますね。そしてCellのIDはCellになってますね。
あ、1つ忘れていました。Custom ClassのところがCatsviewContorollerになっていなかったですね。このViewContorollerを選択しまして、このClassをCatsViewContorollerに設定します。
で、再び実行してみますね。追加されないですね。あと1箇所忘れていました。CollectionViewですね、CollectionViewのDataSourceDelegeteですね。
この2つをこのViewControllerまで引っ張ってつなげてみましょう。
こは何かと言いますと、DatasourceはCollectionViewに表示すべきデータの置き場所ですね。これはViewControllerを指定します。
Delegeteのほうは、ColletcionViewに関してなんらかのイベントが起きたとき、CollectionViewのイベントが起きた時に、呼ばれるメソッドを置く場所ですね。
例えば、各Cellをタップした時に実行されるクリックして、を置く場所はこの場合はCatsViewControllerになります。それではまた猫をタップしてみますね。
Catsのほうをみてみると、このように猫の画像も追加されていることがわかります。
で、猫をタップしてみると、何度かタップしてみると、その都度猫の画像が追加されていることがわかりますね。
同様にこちらの猫も追加してみましょう。早く押しすぎて今ダブルタップで地図が拡大されてしまいましたね。ゆっくりタップしてみると、このように猫が追加されることがわかります。
今回は、CollectionViewの機能を用いて画面上に表示されている猫を捕まえる機能を実装してみました。今回は以上になります。
Tekuruプログラミングスクールでは、
動画だけでは伝わりきらない、アプリ開発の楽しさや、
気軽に質問できる雰囲気で、プログラミングを学ぶことができます。
もっと深く、プログラミングを理解したい方は、ぜひ無料体験にお越しください。
どこよりも楽しく学べるアプリ開発スクールを運営しています。
フォローしてしてくれると、とてもうれしいです☆
https://www.facebook.com/techool
https://twitter.com/TekuruSchool
YouTubeチャンネル
https://www.youtube.com/channel/UCpQfWE0TpewbXYnGyxxBkow
毎週土曜日の夜に動画のアップロードをしています。
よければ、チャンネル登録お願いします！
ソースコードや、操作の仕方、などなど、
なんでも気軽にコメントください。
コメントをお書きください