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

ナビゲーションバーを使うアプリを作ってみる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ナビゲーションバーを使う、Master-Detailタイプのアプリを実際に作成し、その中でのビューコントローラの使い方を解説します。
講師:
08:02

字幕

このレッスンではナビゲーション・コントローラを使うアプリを作成しその中でビュー・コントローラがどのように使われているのかということを見ていきたいと思います。それではまずWelcome to Xcodeの画面から新しいプロジェクトを作成しましょう。Create a new Xcode projectというところをクリックすると新しいプロジェクトを作成できます。またWelcome to Xcodeの画面でなくても[File]メニューから[New][Project]と選択して新しいプロジェクトを作成することもできます。それではこのプロジェクトのテンプレート選択画面からiOSアプリケーションのMaster-Detail Applicationこちらを選択してください。そしてNextボタンを押します。Product NameのところにはナビゲーションバーのデモとういことでNavBarDemoと入力します。そしてOrganization Nameには自分の名前をOrganization Identifierにはmytestと入力してください。そしてLanguageにはSwiftを選択します。DevicesにもiPhoneを選択しておいてください。 Use Core Dataのチェックボックスは外しておいてください。それでは右下のNextボタンを押してプロジェクトの作成を完了させましょう。今回はデスクトップの上にこのプロジェクトを作成します。それではこのようにしてプロジェクトが作成できましたのでまずシミュレータの上で実行してこnアプリケーションがどのような動作をするのかということを見ていきたいと思います。アプリケーションを実行します。そしてシミュレータの上にアプリケーションが実行されました。アプリケーションが実行されるとこのようにまずナビゲーションバーが上に表示されます。そしてMasterと書かれているこのタイトルの右側のところには+ボタンが表示されています。そして左側の方にはEditと書かれたボタンが用意されています。まずは+ボタンを押してみましょう。+ボタンを押すとこのように現在の時刻が上の方から追加されていきます。+ボタンを押すたびに新しい時刻の書かれた項目がこうやって表示されていきます。そして左側のEditボタンを押すことによってこの追加された項目の中から削除したい項目を選択して削除することができます。削除が完了したらこのDoneボタンを押すことによって編集を完了することができます。 またこうして追加された項目に対してはその項目をクリックすることによってその項目の詳細を表示するビューを表示することができます。デフォルトで用意されているアプリケーションの動作はこのようになっています。それではこれがどのように実装されているのかということを次に見ていきたいと思います。Xcodeに戻りましょう。それではまずstoryboardの構成を確認しておきたいと思います。Main.storyboardを開きましょう。このプロジェクトの中では3つのビュー・コントローラが使われていますので少し余白をダブルクリックして広く表示しておきたいと思います。そして最初に表示されるのはナビゲーション・コントローラです。そしてこのナビゲーション・コントローラの中には一番最初のビューとしてTable Viewが表示されます。そしてこのTable Viewの中のどれかの項目がクリックされたときにはさらに右の方にあるこのDetailの項目が表示されるようになっています。それではまずこのTable Viewの上でどのような項目が表示されるようになっているのかということを見ておきましょう。このテーブルビューに対応しているのはMasaterController.swiftこちらのファイルになります。 そしてこのMasterViewControllerのviewDidLoadというメソッドを見ていただきますと一番最初の段階でこのナビゲーションバーの左側のボタンとして編集ボタンを用意してくださいということとそれから右側のボタンとしてinsertNewObjectというメソッドが呼ばれるボタンを用意してくださいとということが書かれていることがわかります。ですのでこのアプリケーションを実行したときに右側にあるボタンをつまり+ボタンを押すたびにこのMasterViewControllerの中にあるinsertNewObjectというメソッドが呼ばれるようになっています。そしてこの中ではobjectsという配列の中に新しいNSDateで表される日付を格納することによって新しい日付の項目が表示されるようになっています。そしてこれでobjectsという配列に新しい項目を追加しましたのでTable Viewに対しても新しい項目が追加されたということをアニメーションで表示してくださいというお願いがこのinsertRowsAtIndexPathsというメソッドの呼び出しになります。実際にTable Viewが表示されるときにはcellForRowAtIndexPathというこのメソッドが呼ばれますのでCellという名前で用意されている再利用可能なセルをここで呼び出してきてそこに対して今取り出したobjectこれはNSDateですね日付を表すオブジェクトを取り出してその日付の内容をテキストラベルに表示するとという形でまず最初にMasterViewの中に日付の項目がどんどんと追加されていくという仕組みが用意されています。 そしてstoryboardに一度戻ってですねこのTable Viewのところをちょっとよく見ておくとですねTable Viewのセルがここに用意されているんですが実はこのセルからその次のDetailViewControllerへの足がこのsegueで伸びています。このsegue今クリックしましたけれどこのsegueをクリックすることよってこのセルとDetailViewControllerが結びついているとということがわかります。ですのでセルがクリックされるたびにこのDetailViewControllerが自動的に表示されるようになっているわけです。ではそこの処理がどうなっているかといいいますと実際に先ほどのですね移動のためのsegueが実行される前にここのprepareForSeugeというこのMasterViewControllerのprepareForSegueというメソッドが呼ばれますのでここでこのshowDetailというのが先ほどのsegueの名前ですがこのshowDetailのsegueが呼ばれているときにはTable Viewで現在選択されている行を取得してきてさらにその行に対応したNSDateの日付のオブジェクトを取ってくるとそしてこれから移動しようとしているDetailViewControllerに対してちょっとここプログラムのコードとしては長いですけれどもやっていることは非常に単純で次のDetailViewControllerのdetailItemをこの日付のオブジェクトに設定してくださいとということが書かれています。 これが書かれることによってDetailViewControllerの中に用意されているこのdetailItemというオブジェクトが日付のオブジェクトとしてセットされるようになります。そしてこのdidSetというプロパティオブザーバが用意されていますのでこのdetailItemが用意された後configureViewというこのメソッドがこのプロパティオブザーバに呼ばれますのでその中でこのdetailの日付のオブジェクトから実際にその日付の文字列を取得してそしてそれをラベルのテキストとして設定する という形で詳細ビューの画面情報が表示されるようになっています。このレッスンではナビゲーションコントローラを使うアプリを実際に作成してその中でビュー・コントローラがどのように使われているのかというプログラムコードを見ていきました。

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

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

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

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

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

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