SwiftによるiOSアプリ開発基本講座

アプリケーションの完成

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
PhotoViewerにメモを表示するためのコードを追加し、アプリケーションを完成させる方法を説明します。
講師:
07:04

字幕

このレッスンでは、フォトビューワにメモを表示するためのコードを追加してアプリケーションを完成させる方法を説明します。まず、現在の状態を確認しておきましょう。現在、この Photos の一覧のテーブルビューの中から画像を選択して表示できるようになっています。しかし、ここでメモをクリックしてもまだデータは受け渡されませんので、そのメモを見ることはできなくなっています。またその下の OK ボタンも現在機能していませんので、この OK ボタンの実装も必要になります。それでは実装を行っていきましょう。ストーリーボードに戻って、少し確認しておきたいと思います。ズームをこの余白を右クリックしてズームを変更して、今回編集するのはこの画像を表示しているイメージビューのあるこの 2 つ目のディスプレイビューコントローラと、3 つ目のインフォビューコントローラ、この間で写真のデータを受け渡すことです。それから OK ボタンを押した時に対応しなければいけないので、OK ボタンにも対応する必要があります。それではディスプレイビューコントローラを編集していきましょう。ディスプレイビューコントローラを編集して、まずこの prepareForSegueと書かれているところのコメントアウトを外します。 そして最初のビューを編集するのと全く同じ手順なんですがここでこの segue に対してディスティネーションビューコントローラを取得して、thirdScene 3 つ目のシーンを表すビューコントローラを取得します。as! 今度は InfoViewController ですね。そしてこの thirdScene に対して、thirdScene.currentPhotoここに現在の自分の currentPhoto をセットしてやります。そして後は InfoViewController の中でこの currentPhoto のメモのデータをラベルに表示してやれば、実装は完了ですね。ですので今度は InfoViewController を開いて、viewDidLoad のところでdetailLabel.textこのように書いて、ここに currentPhoto のnotesこのメモのデータを表示するようにしたいと思います。それではこれで一度実行しておきましょう。アプリケーションを実行し直します。それとどれかのフォトを選択してメモを選択した時に、ここでラベルがセットされているのが分かります。ですがこのラベルのデータがですね今ちょっと見切れてしまっていますのでこちらも制約が必要になりますのでその制約を追加しておきましょう。 この Label を選択して、この右下のピンのボタンから左端と右端、そして 高さもこのままにして、そして下から高さが決められるようにしておきたいと思います。ということで Add 4Constraints をボタンを押して制約を追加します。そしてその下にある OK ボタンも、このピンのボタンを使って制約を追加してやります。左端を左端にくっつける制約を追加するのと、それから横幅、そして高さの制約を追加するのと、そして下側画面の下からですね146 ピクセルのところに表示するというふうになっているので、今回はこれをこのまま使いたいと思います。この 4 つの制約を追加しましょう。そしてもう一度実行し直すと、このように画像を選択してメモを表示すると「普段使っているチェス盤です」綺麗に表示されるようになりました。でもまだ OK ボタンに対応していませんので、更にこの OK ボタンの実装を行っていきます。ストーリーボードに戻って今度はアシスタントビューを表示してやります。この右上の右から 2 つ目にあるアシスタントボタンですね ○が 2 つあるこれを使ってアシスタントビューを表示して、そしてこの InfoViewController に対してこのあたりですかね OK ボタンが押されたときの動作を書いていきます。 OK ボタンを右クリックあるいはCtrl キーを押しながらクリックしてこの InfoViewControllerのソースコードに青い線を接続してAction を選択します。そして名前のところに、ボタンが押されたということを取得するためのbuttonPressed というのをここに用意します。そして InfoViewController に戻って、この buttonPressed の実装を書きます。ここでビューコントローラには全てのビューコントローラに共通して用意されているとあるメソッドがあります。そのメソッドの名前はdismissViewControllerAnimated というこの名前のメソッドなんですが、これを使うことによってこの現在表示されているビューを取り除いてくださいということをお願いすることができます。ということでこのようにボタンが押されたときにそのメソッドを、dismissViewControllerAnimated のこのメソッドを実行することによって、元の画像が表示されるようになります。ということで 見てみましょう。モミジのメモを表示してそして OK ボタンを押します。 このようにメモが消えるようになりました。このメモを表示するためのInfoVewController をどのように表示するかというところのモードは、簡単に segue で切り替えることができます。ここの InfoViewController に伸びているこの segue を選択して、インスペクタのこのアトリビュートインスペクタを表示したところで、ここに Transition という項目があるんですがこれを例えばFlip Horizontal というのに変更したりするとそれだけでこのメモの表示の仕方が、今分かりますかね、こうくるっと回って表示されてそしてくるっと回って元に戻るというふうになりました。この Transition というのは全部で 4 種類選択できるようになっていますので、自分のアプリケーションに適しているものを選択して選ぶようにしてください。それではこれで、アプリケーションの完成です。このレッスンでは、フォトビューワにメモを表示するためのコードを追加してアプリケーションを完成させる方法を説明しました。

SwiftによるiOSアプリ開発基本講座

このコースではiPhoneやiPadのアプリを作ってみたい方に向けて、簡単なiOSアプリを作りながらSwiftを使ったXcodeでの開発手順をひとつずつ丁寧に解説していきます。各レッスンではiOSのフレームワークの機能を確認しながら、アウトレットやアクション、MVCモデルやDelegateといったアプリ開発に必要な知識を説明します。

5時間10分 (53 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年10月15日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。