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

Auto Layoutとプレビュー・モード

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Storyboardでは、Auto Layoutという機能を使う事で、さまざまな大きさのiPhoneに対応したユーザインタフェースをデザインすることができます。ここではプレビューという機能の使い方も併せて見ていきます。
講師:
07:36

字幕

このレッスンでは、ストーリーボードの編集のためのオートレイアウトという機能を紹介します。まずこちらのストーリーボードをご覧ください。ここにはいくつかの部品が配置してあって、Top Left のボタンTop Right のボタンこのようにいくつかのボタンやコントロールが配置されています。で これにはまだ何も設定をしていないんですが、これをこのまま iPhone の 6 のシミュレーターで実行してやるとこのような形になります。でこれはですね、 iPhone のこの画面の大きさに合わせてここの部品が切り取られているんですね。ですのでこうやって後ろのこのデザインとそのまま合わせてやると、どこで切り取られているかということが分かります。で、このように何も設定してない状態だと、iPhone5 であるとかiPhone4 であるとか様々な iPhone の大きさに合わせて切り取られるだけの見えない部品が出てしまう恐れがありますので、iPhone の部品をこのように配置したらその部品に対して制約というものを追加してやる必要があります。それでは制約というのがどういうものかということを見ていきましょう。まずこの Top Left、左上に張り付いているこのボタンに対して、制約を追加してみたいと思います。 制約を追加するためには右下の方にあるこの Pin というボタンを追加します。右下の真ん中のボタンですね。この Pin のボタンをクリックすることによって、このようなポップアップが出てきます。で、このポップアップでは、真ん中の所にあるこの部分が今現在選択されている部品だということを示すんですが、この部品は左側と上にくっつきますよということをこうやって赤い線をこうやってクリックによってオンにしてやることによって、表すことができます。また同様に下の方にあるこの Width と Height。Width というのは横幅を示す英語で、Height というのは高さを示す英語ですが、このように横幅と高さをこのまま使いますよということをチェックして示してやることによって、このボタンの配置が決まります。ではこの 4 つの制約を追加するために、このポップアップの一番下にあるAdd 4 ConstraintsConstraints というのが制約を表す英語ですので、このボタンを押して制約を 4 つ追加してやります。はい 押しました。これで制約が追加されたことが示される、この青い上の所にくっついていますよというバーと、それから左の方のこのバー、このように青いバーが示されて制約が追加されたことが分かります。 で同じようにしてこの Top Right、右上の所にあるボタンも制約を追加しましょう。上側と右側にくっついてWidth と Height は固定。はい このように制約を追加します。では 実際にこれで実行しなおすと、シミュレーターの上でどのように表示されるかということを見てみましょう。このように Top Right の右上にあったボタンがですね、始めは消えていたんですが、このようにちゃんと表示されるようになりました。同様にしてこの First、Second、Third、Fourth、Fifth と5 つセグメントがあるSegmented Control も、上と 左と 右と にくっついてそして高さが固定ですよというこの 4 つの制約を追加してみます。そうして iPhoneシミュレーターを実行しなおすと、このように制約によって、しっかりと綺麗に配置されていることが分かります。このようにしてですね、全ての部品に対して制約を追加していくことによって、iPhone の画面がどのようなサイズの iPhone であっても、綺麗に表示されるようになります。制約を追加していきましょう。タイトルの所に左と上にくっついて、Width と Height はこのまんまと。 はいそして この An interestingtitle goes hereというラベルに対しても、左と上と右がくっついて高さが固定。このように制約を追加していきます。で、テキストのこの View に対してもこれちょっと置いときましょうか。はい、この状態で今度は Previewというモード 見てみたいと思います。で、今までは iPhone のシミュレーターを繰り返し実行してそれぞれの iPhone のデバイスの上でどういうふうに見えるかということを確かめていたんですが、iPhone のこのシミュレーターをですね、いちいちデバイスを切り替えて実行し直さなければこのデザインが確認できないというのはなかなかしんどい作業ですので、今度はですね、ここの画面右上の所に二つ丸が並んでいるこのアシスタントエディタを表示する所を使って、Preview というのを表示してみます。で、ここにですね、おそらく最初はAutomatic というのが選択されていると思うんですが、ここの Automaticという所をクリックしてPreview を選択することによって、このような Preview という画面が表示できます。 これ Preview のこのサイズは、画面の何もない所をダブルクリックすることによって大きくしたり小さくしたりすることができます。で、今現在はこれ iPhone4 インチの iPhone をここに表示してる状態ですが、4 インチの iPhone だけではなく例えば 4.7 インチのiPhone をこの左下にある + ボタンを使うことによってPreview に追加できます。同じように 5.5 インチも追加してみましょう。はい そうするとこのようにですね、4 インチ、4.7 インチ、5.5 インチ、様々なサイズの iPhone のPreview が並んでいますが、それぞれのデバイスにおいてここのですね、Text View の所が今全部右端がこう切れているのが分かると思います。でこれを一気にですねここの制約を追加してやることによって、それが変更されることを確認してみましょう。まず左端と右端 そして上の所にくっつきますよというこのチェックを 3 つ入れてやりまして、そして 下も、もうこれ画面下にくっつくということで今回はこの Text View は下にくっつけてやりましょう。そして、 Add 4 Constraints4 つこれも制約を追加してやります。 そうするとちょっと制約のですね、条件が色んな条件が重なってしまっているのでこうやって制約を追加して行くと段々とこのようにおかしくなる制約が出てくる時があるんですが、おかしくなった時にはこのようにオレンジ色で色が表示されます。でこのおかしくなっているのをちょっと修正して貰えませんかといってコンピューターにお願いすることができるので、次にそれを見てみますね。この右下にあるResolce AutoLayout Issues というこの問題解決ボタンというのがあるので、これを押してやってそしてこのReset to SuggestedConstraintsコンピューターが提案する通りの制約にリセットしてみませんかというこういう項目がありますのでこの項目を選択すると、こうやって青くなって問題がなくなります。で、これを使いながら右の方のこの制約の状況を見ていくとですね、しっかりと 4 インチでも、4.7 インチでも5.5 インチでも、問題なくこの View が表示されるようになっていることが分かると思います。このレッスンでは、オートレイアウトとプレビューについて説明しました。

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

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

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

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

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

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