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

タブバーを使うアプリのデザイン

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
タブバーを使うアプリを作成して、ビューの構成とStoryboardの使い方について解説します。
講師:
07:12

字幕

このレッスンでは複数のビューを扱うアプリケーションの例としてタブビューを使うアプリケーションの作り方を説明します。まずタブビューを使ったアプリの例としてこちらのiOSシミュレータをご覧ください。iOSシミュレータの写真アプリを立ち上げるとこのようにタブを使ったアプリが表示されます。タブを使ったアプリでは画面の下のところにいくつかのタブ項目が並んでおりそのタブ項目をクリックして切り替えることによって複数のビューを切り替えて表示することができます。それではXcodeを使ってこのようなタブを使ったアプリを作成してみましょう。まずXcodeを起動します。そしてWelcome to Xcodeの画面からCreate a new Xcode projectというところをクリックしてもプロジェクトを作成できますし[File]メニューから[New][Project]を選択しても構いません。このように作成するアプリケーションの種類を選択する画面が表示されますのでTabbled Applicationと書かれているこちらのアプリケーションのテンプレートを選択します。そしてNextボタンを押しましょう。今回のProduct NameのところにはTabViewDemoと入力します。 そしてOrganization Nameのところには自分の名前をOrganization Identifierのにはmytestとと指定してください。またLanguageにはSwiftが選択されていることを確認しDevicesにはiPhoneを選択します。それではNextボタンを押してプロジェクトの作成を完了しましょう。今回はデスクトップを選択します。アプリケーションを作成したところで早速シミュレータの上で実行して最初の状態がどうなっているかとういことを確認してみたいと思います。シミュレータを起動するとこのようにFirst Viewと書かれた画面が表示されてこのようにFirstとSecondというタブが用意されています。そしてこのFirstとSecondのタブを切り替えることによってこのFirst Viewと書かれた画面とSecond Viewと書かれた画面を切り替えることができます。それではStoryboardの上でこれがどのように構成されているのかということを確認しましょう。Xcodeに戻ってstoryboardを開きます。それでは今回は画面上に3つのビュー・コントローラが登場しますのでちょっと画面を広げておきたいと思います。 まずインスペクタ領域を消してそしてドキュメントアウトラインを消してそしてさらに画面の余白をダブルクリックしてこのように小さく表示することにしておきましょう。するとこのタブバーを表示するアプリケーションの中には3つのビュー・コントローラが用意されていることがわかります。画面の真ん中にTab Bar Controllerと書かれたビュー・コントローラとFirst Viewと書かれたビュー・コントローラそしてSecond Viewと書かれたビュー・コントローラの3つです。Tab Bar Controllerと書かれているこのビュー・コントローラからはFirst ViewとSecond Viewに対して矢印が伸びています。storyboardではこのビュー・コントローラからビュー・コントローラに伸びている足のことをsegueと呼びます。タブバーを使って複数のビューを管理するアプリケーションではこのようにTab Bar Controllerからsegueを管理する対象のビュー・コントローラに対してつないでいきます。それではここで実際に3つめのビュー・コントローラを追加してみたいと思います。ビュー・コントローラを追加するにはインスペクタの領域の下の方にあるこのオブジェクトライブラリからこの一番上にあるView Controllerを選択します。 これをドラッグ&ドロップで画面に追加することによって3つ目の新しいビュー・コントローラを作成することができます。これが3つ目のビューであることがわかりやすいようにラベルを追加しておきましょう。ラベルをドラッグ&ドロップでこれは大きくしないと追加できませんね。このようにラベルをドラッグ&ドロップで中央に追加しておきます。モードを中央に変えてダブルクリックでわかりやすいように日本語で3つ目のビューと書いておきましょうか。そして少し文字のサイズを大きくしておきます。このように文字のサイズを変えたときにはこの[Editor]メニューの中に[Size to Fit Content]というこういう項目がありますのでこれを選択することによって部品のサイズを文字の大きさに合わせて調整してくれます。ではこれを画面の真ん中にもう一度配置し直しましょう。縦と横を合わせました。それではこのAlignのボタンを使ってですねこのAlignのボタンを使ってHorizontal Center in Containerという画面の横方向に中央に表示する制約とVertical Center in Containerという縦方向に中央に寄せる制約この2つを追加します。 そしてさらにピンの制約を使ってこの3つ目のビューというラベルに対してWidthの横幅とHeightの高さを制約として追加したいと思います。それではAdd 2 Constraintsを押してさらに2つ制約を追加します。これで3つ目のビューのラベルが追加できました。ではこの3つ目のこのビューに対して上のこのTab Bar Controllerからsegueを追加したいと思います。segueを追加する方法はアウトレットやアクションを設定する方法と同じです。つまりこのTab Bar Controllerを選択した状態から右クリックでドラッグするかあるいはCtrlキーを押しながら左クリックでドラッグしてこのビューの上まで線が伸ばせたらマウスのボタンを外します。そうするとこのようにどのようなsegueを作成するのかということを選択する画面が表示されますので今回はこの真ん中にあるRelationship Segueと書かれているところのview controllersというのを選択してください。これを選択することによってこの3つめのビューと書かれたこのビューが3番目のタブ項目として認識されたことがわかります。 Tab Bar Controllerの中には1つめ 2つめ そして3つめのタブが現在表示されています。それではこのアプリケーションをシミュレータ上で実行して結果を確かめておきましょう。実行ボタンを押してシミュレータ上でアプリケーションの起動が始まりました。そうするとFirst ViewそしてSecond Viewそして先ほど追加した3つ目のビューがこのように表示されるようになったことがわかります。このレッスンではタブビューを使ったアプリケーションの作り方を説明しました。

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

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

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

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

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

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