【動作環境】
Swift2.2 Xcode7.3
【対象レベル】
超初心者
【学習内容】
地図や位置情報を使用して、指定した場所に行くと、
そこに設定した猫のキャラクターを集めるアプリの
開発方法をかんたんに解説しています。
動画の音声の書き起こし
はい、それでは前回の続きをおこなっていきます。
今回は、猫をタップするとあたらしい画面が開いて、「このような猫をゲットしましたよ」と、情報が表示されるようにしたいと思います。
それでは、まず新しい画面の追加から行います。main.storyboardを開きまして、Mapの画面の隣に、新たなViewControllerを追加していきます。
操作しやすくするためにサイズは4インチにしておきます。このように追加します。
そして、この画面にいくつかObjectを配置していきます。
まず左上にButtonをおきまして、名前をCloseとしておきます。
そしてラベルを1こ配置しておきます。左右いっぱいに広げておきます。
Alignmentは中央にしておきます。そしてImageViewを配置します。
このように配置します。このような感じですね。
そして、AutoLayoutの設定をしていきます。左上のCloseButtonから行っていきます。
このチェックを外しまして、左と上からの距離を設定します。
WidthとHeightを1.1にします。4つの制約を追加します。
次に、ImageViewですね。左と右からの壁の距離を0にしまして、AspectRatioを1点します。3つの制約を追加しまして、その次に垂直方向の中央に配置します。
1つの制約を追加しました。
次にラベルですね。このラベルも同様に、左右の壁からの距離を0にして下のImageViewからの距離を一定位置にします。そして、高さも一定位置にします。4つの制約を追加します。制約の追加が完了しましたら、UpdateFrameをONにして正しい位置にさせましょう。これで、OKですね。
次に、Segueの設定をします。前の画面、このMapの画面ですね。
そこからコントロールを押しながら、この青い棒を引っ張って次の画面に落とします。
そして、プレゼントモーダリーを選択します。でここにSegueが出現しますので、Identifierの設定をします。ToCatInfoというIdentifierにします。
これで次の画面に遷移できるようになりました。
次に、ViewControllerを追加していきましょう。CatsViewControllerの上のあたりでコントロールを押しながらフリックしまして、新たなViewControllerの追加を行っていきます。NewFileでCocoaTouchClassUiViewControllerを継承したCatInfoViewControllerを追加していきます。ここにはチェックをいれないで、LanguageはSwiftを選択します。Nextを選択しまして、Targetsにチェックが入っていることを確認した上で、Createをクリックします。今回すでに作ったファイルがありますので、新たな追加は行いません。皆さんは、新たなFileをCreateしてくださいね。作ったSwiftFileはこちらになります。
ここにいくらか表記を追加していきますね。ここを追加します。@IBOutletVarNameLabelUILabelを追加します。UILabelの型ですね。
ImageViewを追加します。ImageViewの型です。
@IBActionfuncCloseという名前のMethodを追加します。この中には、この画面を閉じるための命令を書きますね。
dismissViewcontrollerAnimatedで画面を閉じることができます。
ではこれらの要素をStoryBoardの各Obejectとひも付けていきます。
Main.StoryBoardを選択します。そして、ViewControllerを選択しますね。
まずこれのカスタムクラスを選択します。IdentityInspecterのカスタムClassを選択します。これで今作ったCatinfoViewControllerを選択します。
そして右上のこれですね、ImageView、OutletsのところにImageViewがありますので、これをImageViewとひも付けてNameLabelをこのLabelとひも付けます。
そして、CloseButtonをこの左上のCloseButtonとひも付けます。
TouchUpinsideを選ぶことで、このButtonに指を置いて離した瞬間のタイミングでこの画面を閉じることになります。
では次に、updelegeteに追記を行います。updelegeteはデータの受け渡しに用います。
今回は前の画面から猫の名前と猫の画像のデータの受け渡しを行いますので、
CatNameという名前の文字列とCatImageという名前の文字列を書いておきます。
では、ViewController.Swiftにうつりますね。猫をタップしたタイミングでdidselectAnnotationViewが選択されるわけですが、ここにいくつか追記をおこなっていきます。
今回新たに、この3行を追加します。
delegeteのcatnameにtitleをdelegetecatImageにImageをいれます。
そして、performsegueWithIdentifierで次の画面の遷移を行います。
先ほど、Storyboardのほうで、Segueに設定したIdentifierTocatInfo、こちらのほうにも記述します。それでは、実行してみて動作を確認してみたいと思います。
その前に、このCatinfoviewControllerの中にViewdidLoadの中で各LabelとImageViewに名前と画像を設定する表記をしておきます。
これですね、UPdelegeteを使って、delegeteという名前の変数を使います。
このdelegeteを使って、NameLabelとImageViewに文字と画像をいれていきます。
それでは、実行してみます。シミュレータが起動するまで少々時間がかかります。
そろそろ起動しますね。はい、起動しました。地図が今読み込まれていますね。
真ん中に猫の画像があります。猫をタップすると、このように次の画面に遷移することができました。
そして、CloseButtonをタップすると、この画面を閉じますね。
猫太郎と猫の画像が表示されています。今回、地図に表示するための小さい猫の画像を使っていますので、このようにぼやけていますけど、地図に使う画像とこのように情報画面に表示される画像を使い分けることにより、ぼやけた画像にしないこともできるかと思います。
今回は、次の画面に遷移するSegueを使って次の画面に遷移する機能を実装することにより、猫をタップしたときのリアクションを実装しました。今回は以上になります。
Tekuruプログラミングスクールでは、
動画だけでは伝わりきらない、アプリ開発の楽しさや、
気軽に質問できる雰囲気で、プログラミングを学ぶことができます。
もっと深く、プログラミングを理解したい方は、ぜひ無料体験にお越しください。
どこよりも楽しく学べるアプリ開発スクールを運営しています。
フォローしてしてくれると、とてもうれしいです☆
https://www.facebook.com/techool
https://twitter.com/TekuruSchool
YouTubeチャンネル
https://www.youtube.com/channel/UCpQfWE0TpewbXYnGyxxBkow
毎週土曜日の夜に動画のアップロードをしています。
よければ、チャンネル登録お願いします！
ソースコードや、操作の仕方、などなど、
なんでも気軽にコメントください。
コメントをお書きください