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

Modal View Controllerを使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
iPad用のアプリを作成し、ビューをモーダル表示する方法を解説します。
講師:
08:20

字幕

このレッスンでは、iPad 用のアプリを作成しその上にビューをモーダル表示する方法を解説します。それではWelcom to Xcode の画面からCreate a new projectこちらをクリックするか、「File」メニューから「New」→「Project」と選択して新しいプロジェクトを作成しましょう。今回は iOS アプリの中からSingle view Application を選択します。そして Next ボタンを押して、Product Name のところにModulViewDemo、そして Organization Name に自分の名前、Oganization Identifier にはmytest と入力しておきます。Language には Swift をDevices には iPad を選択しましょう。Use Core Data のチェックマークは外しておきます。それでは、Nextボタンを押してプロジェクトの作成を完了しましょう。Create ボタンを押します。それではまずMain.storyboard を選択して、Storyboard の編集から始めていきます。画面の余白をどこでもいいので右クリックして、少しズームを50% に縮めておきましょう。 そして、画面右側の所にあるObject Library からモーダル表示する対象となるView Controller をドラッグ&ドロップで追加しておきます。このようにして新しいView Controller を追加しました。今回は、この新しく追加したビューを元々あったビューの上にモーダル表示するということをしてきます。まずは、何かしらのきっかけがないとこのビューを表示することができませんので、元々のビューの上に 1 つボタンを追加しましょう。この元々のビューをダブルクリックして大きくしまして、ボタンを左上に追加しておきます。そしてこうして追加したこのボタンから右側のこの View Controller を表示するというセグウェイを作成します。それではですね、ちょっと画面を広く表示してこのボタンを右クリック、あるいは Ctrl キーを押したままマウスボタンを押して、マウスボタンを離さずにそのままドラッグしてView Controller の上まで来て、ハイライトされたらマウスボタンを離します。そしてセグウェイを作成することができますので今回は上から 3 つ目にあるpresent modallyというモーダル表示をするためのセグウェイを作成します。 こうすることでこのセグウェイはモーダル表示をするということが初めから設定されます。但し これだけではちょっと設定不足なんですね。実は。ちょっとシミュレーターで実行してみたいと思いますけども、これをシミュレーター上で実行するとまあ機能はしてくれるんですが、まだちょっと設定が足りないので、このボタンを押したときに画面全体がこのように白くなってしまいます。で、何が起きたのかというと、もう画面全体に今 この新しく追加したView Controller ですね。2 つめの View Controller が広がって表示されているので、何が何だか分からないという状態になっています。ですので、実はこちらのセグウェイですね。セグウェイを作成しただけではなくて、このセグウェイを作成した後にこの Attributes inspector を使って、設定を行ってやる必要があります。どのような設定を行うかといいますと、このセグウェイの設定の「Presentation」 というところでこの「Presentation」をこの「Form Sheet」というやつに変更しておきます。そうするだけで、この View Controller をどのように表示するのかということが変わりますので、実行ボタンを押して確認しますと、ボタンを押すとこのようにこの新しいビューの周りは全部グレーアウトされて、この新しい View Controller に注目してくださいといういわゆるモーダル表示が行われるようになりました。 では、さらにこの View Controller を消す方法も用意したいと思います。今このグレー部分をクリックしても何も起こりません。これがモーダル表示の特徴ですので、ボタンを用意してこの View Controller を消す作業を行いたいと思います。では、この新しい View Controller ですね。ちょっとこれがモーダル表示のものだということが分かるように真ん中にラベルを用意しまして、中央寄せでこのラベルをモーダル表示のテストと分かりやすいようにしておきます。そして制約を追加します。ピンの制約として、まず 上側についているという事とWidth と Height を固定するというこの 3 つの制約を追加して、そして Align のボタンからHorizontal Center in Conter、こちらの制約をさらに追加します。全部で 4 つ追加します。そしてその下に新しいボタンを追加しまして、このボタンを OK というボタンにしてこの OK ボタンが押されたときにこのモーダル表示を消すということにしましょう。こちらも先程と同じ方法で、このピンのボタンから上の制約と Width と Height の制約、3 つの制約を追加してから、Align の制約としてHorizontal Center in Contenerこちらを追加します。 青になったのでこれは OK ですねそしてこの OK ボタンが押されたときのアクションを受け取るView Controller が必要になりますので、ここに main.storyboard を今選択している状態ですけど、この選択した状態でここを右クリックしてください。あるいは Ctrl キーを押しながらマウスボタンを押します。そうするとメニューが表示されますのでここに New File を選択してください。そしてCocoa Touch Class を選択して、UIViewController をSubclass of の所に入力したらその上にここに Class を入力するところがありますので、MordalViewControllerという名前で新しい Class を作成しましょう。そして Next ボタンを押して、このまま何も変更する必要はありませんのでCreate ボタンを押します。そしてこの Main.storyboard に今作成したばかりのModalViewControllerというのをこの新しく追加したこの View Controller に割り当てたいと思いますので、Inspector の左から 3 つ目の所にあるタブを使ってここにカスタムクラスを今追加した ModalViewController にセットします。 そしてこの Inspector の領域を消してこの丸が 2 つ書いてあるAssistant Editor の領域を使って、このモーダル表示のテストのOK ボタンが押されたときにこの ModalViewController の下のところにですね、この新しくアクションを追加してやります。名前は、ボタンが押されたということでbuttonPressedとしておきましょう。そして Connect ボタンを押します。そしてこの buttonPressed の中にモーダル表示を消すためのコードを書いてやります。モーダル表示の消すためのコードは、self.dismissViewControllerAnimatedこちらのメソッドになります。引数は true と completion のところにnil を指定しておきましょう。以上で実装は完了ですので、一度実行してアプリケーションの動作を確認しておきます。実行しました。そしてアプリケーションが起動しますので、この左上にあるモーダル表示のビューを表示するボタンをクリックします。そうするとモーダル表示のテストというこのモーダル表示のビューが出ました。こちらのビューは、Command キーと左矢印のキーを押して同時に押してですね。 画面を回転させてもしっかりとこのように画面の中央に表示されます。そして OK ボタンを押すと、このようにモーダル表示が下の方に今スライドしていきましたけどきれいにアニメーションして消えてくれることが分かります。このレッスンでは、iPad 用のアプリを作成し、その上にビューをモーダル表示する方法を解説しました。

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

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

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

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

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

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