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

ストーリーボードのシーンとセグウェイの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
PhotoViewerのための新しいプロジェクトを作成し、複数のシーンを用意して、それらをセグウェイで接続して画面のデザインを行う方法を説明します。
講師:
07:48

字幕

このレッスンではフォトビューアのための新しいプロジェクトを作成し複数のシーンを用意して画面のデザインを行う方法を説明します。それでは新しいアプリケーションのためのプロジェクトを作成しましょう。Welcome to Xcodeの画面からCreate a new Xcode projectこの部分をクリックするか[File]メニューから[New][Project]と選択して新しいプロジェクトを作成します。それではSingle View Applicationを選択してNextボタンを押します。そしてProduct NameのところにPhotoViewerと入力しましょう。Organization Nameには自分の名前をOrganization Identifierのところにはmytestと入力しておいてください。LanguageはSwiftDevicesにはiPhoneを選択しておきます。Use Core Dataのチェックマークは外しておきましょう。それではNextボタンを押します。デスクトップの上にプロジェクトを作成しましょう。それではまずMain.storyboardのファイルを編集します。 Main.storyboardを選択して現在ここにビュー・コントローラが1つ予め用意されていますが今回はこのビュー・コントローラは使用しませんのでこのビュー・コントローラを選択してこの青くハイライトされた状態でDeleteキーを一度押します。そうするとビュー・コントローラが何もない状態になりますのでここに新しいビュー・コントローラを追加します。まず一番最初のビュー・コントローラはTable View Controllerを用意します。オブジェクトライブラリからTable View Controllerをドラッグ&ドロップでこのように追加します。そしてさらにその右側に新しくView Controllerこちらは通常のビュー・コントローラを2つ追加します。片方は画像を表示するためのビュー・コントローラそしてもうひとつは画像の詳細を表示するためのビュー・コントローラですね。そして一番最初のこのテーブル・ビューのところで何かセルが選択されたときに次のビュー・コントローラが表示されるようにこのセルのところから右クリックドラッグ あるいはCtrlキーを押しながらのマウスボタンのドラッグでこのように青い線を使ってビュー・コントローラ隣のビュー・コントローラに足を伸ばします。 そしてマウスボタンを離してSelection Segueと書いてあるところからshowの一番上にあるshowの部分をクリックします。こうすることで最初のテーブルビューからセルがクリックされたときにビュー・コントローラに画像を表示するためのビュー・コントローラに移動するためのセグウェイが追加されました。こちらの2つ目のビュー・コントローラには画像を表示しますのでオブジェクトライブラリからImage Viewをドラッグ&ドロップで追加しておきたいと思います。このように追加しました。そしてこの画像ビューの上にメモを表示するためのツールバーを配置したいと思いますのでツールバーをドラッグ&ドロップでこの画面の一番下のところに配置します。そしてこのItemと書かれているところをダブルクリックしてこれをメモを表示するためのメモボタンに変更しておきましょう。そしてこのメモのボタンが押されたときに次のこのメモを表示するためのビューに移動するようにこのメモからこのメモのツールバーのボタンを選択してこれを右クリックのドラッグでこの新しい3つ目のビュー・コントローラに足を伸ばします。そしてマウスのボタンを離してこちらのAction Segueと書かれたところからpresent modallyと書かれているこの3つ目のセグウェイを選択します。 そして選択してこちらにも新しいセグウェイが追加されました。それでは最初のビュー・コントローラに戻って次はこのテーブル・ビューに対して これをナビゲーション・コントローラの中に入れるという作業をします。このテーブル・ビューを全体を選択してこの全体が青いハイライトになっている状態で[Editor]メニューから[Embed in][Navigation Controller]とメニューを選択します。こうすることによってナビゲーション・コントローラの中にこのテーブル・ビューが入ります。ちょっと全体を見渡しておきましょうか。何もない余白のところを右クリックこのエディタ部分の何もないところを右クリックすることによってズームの倍率を変えることができますからこれでZoom to 50%で少し千咲して表示したいと思います。これでナビゲーション・コントローラの中に最初テーブルビュー・コントローラが読み込まれ更にその中に画像ビューの表示コントローラそしてこのメモのボタンを使ってメモを表示するためのビュー・コントローラに移動するとこのようなセグウェイの連結が行われていることがわかります。こちらのメモの背景のですね色をちょっと変更しておきたいと思いますのでこちらをダブルクリックで編集対象にします。 そしてこのビューをこのビュー・コントローラではなくてビューの方を選択した状態でこのAttribute Inspectorから ビューのバックグラウンドを変更するというところでこちらを今回はScroll View Textured Background Colorというのを選択してこのようにしておきたいと思います。そしてここにラベルを追加しましょう。メモを表示するためのラベルです。Labelというのを検索してこのラベルを画面のちょっと下の方ですかね真ん中より少し下のあたりに追加して少し大きくしておきます。このようにして色を白色にそれからサイズを少し大きめにしておきます。28ptにしました。そしてこのラインは今1というふうに設定されていますがこのLinesと書かれているところを0にしてやることによって複数行並べてデータを用事することができるようになります。これ1だったら1行だけ2だったら2行だけ表示するおいう設定ですのでこちらを0にしてやります。その下にボタンを追加しましょう。この情報がもう見終わったので消しますよということを表すOKボタンをここに用意したいと思います。OKボタンはテキストカラーを白にしておきましょう。 そして最初のテーブル・ビューにもう一度戻ります。こちらのテーブル・ビューの上部のところにナビゲーションバーのタイトルを入力できる場所がこのように用意されていますのでこのナビゲーションバーのタイトルをPhotosと変えておいてこのように最初のテーブル・ビューのタイトルが一番最初にPhotosと表示されるようにしておきます。以上で画面のデザインは完了です。このレッスンではフォトビューアのための新しいプロジェクトを作成して画面のデザインを行いました。

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

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

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

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

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

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