はじめてのiOSアプリ開発

ユーザインタフェースの大きさを調整しよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ユーザインタフェースの部品の大きさが、iPhoneデバイスの種類によって変化するように、制約と呼ばれる設定を追加していきます。
講師:
12:59

字幕

このレッスンではユーザインタフェースの 見た目をアプリケーションが実行された時に きれいにレイアウトされるように 調整していきたいと思います では現在この画面の上には追加されたばかりの 色を表示するためのビューと それから赤いスライダー 緑のスライダー 青のスライダーが 追加されたばかりの状態となっていますが これで一度このアプリケーションを 実行してみたいと思います さあ どのようになるでしょうか? 実行ボタンを押します するとシミュレーターの上で このように表示されます これを後ろの方と 見比べていただくと分かりますけど iPhone 6のシミュレーターが 今 使われているんですけど 画面の左のところにある この空白が そのまま使われてしまっているんですね ですので こういう状態になります じゃあこの画面の大きさを 例えばこのビューの大きさを 左と右にぴったりと くっつくようにすればいいのかというと そういう問題でもなくて もう一度この状態で実行してみますけど こうすると今度はiPhone 6の左側は ちゃんと合わさることができたんですけど 右側が今度は大きくなりすぎて はみ出る状態になります このようにiPhone 6の画面だけでも 問題が起きるんですけど さらに iPhone 5とかあるいは iPhone 6Plus などにも対応したい時には このままではきれいに レイアウトすることができません そこで ここでユーザインタフェースの 様々な部品の大きさを調整するために 「制約」というものを使って調整を行います では実際に見ていただきましょう Xcode の画面に戻ります 制約を使うためには まず利用するアプリケーションの部品を 画面の… 例えばこうやって 画面いっぱいに使いたいコントロールは 画面の左端と右端に沿うように ぴったりと広げておきます 画面の全体的にこのビューのサイズが 縦に大きすぎると思うので ちょっとだけ上の方に下げて 高さを 290 ぐらい… もうちょっとかな 280 ぐらい これは今ドラッグしながら 画面の上のところを見ていただきますと 今 568×280 という風に高さを変えるたびに 何ピクセルかということが表示されていますけど ここで 568×280 ぐらいに しておきたいと思います この画面の上のところも ドラッグアンドドロップでぴったりと合わせて 上の方の位置もステータスバーのサイズに ぴったり合うような形で 調整するように青いガイドが 表示されているんですけど ここまで持ってきます 今回はこのビューは画面の左の方に貼り付けて 右の方にも貼り付けて そして上の方にも貼り付く形に したいと思います ですので そういうレイアウトの条件を 今度このアプリケーションに教えてあげる ということをします どうやったら それができるのかというと この画面のここに用意されている 分かりますかね? この iPhone の画面の 下のところに用意されている Pin というボタンになります このPin というボタンを 一度クリックすることによって この部品をどのように貼り付けるのか ということが調整できる画面が現れます まず見ていただきたいのは ここにConstrained to margins と書いてありますが これはほとんどの場合は使わない方が きれいにレイアウトができますので このコースではほとんど これは外すと思います まずConstrained to margins を外して ここの画面の左端のところに貼り付きますよ ということを表すために この16 と書いてある画面の左端のところの 点線の矢印になっているところを 一度クリックして これを赤くします 同じように画面の上のところも ステータスバーから8ピクセル離しますよ ということが書いてあるんですけど ここの赤いところを 点線を 一度クリックして赤くします 同じように右端のところも 一度クリックして赤くします これで画面の左端から16 ピクセル離す そして画面の上から ステータスバーを除いて ステータスバーの下から8ピクセル離す そして16 ピクセル離すということを書いた こういう制約というものが用意できましたので 最後に一番下にある add three constrains この制約を追加しますよというボタンを押して この制約の追加を完了します ではやってみましょう 追加がこれで完了しました では一度この状態で このアプリを シミュレーター上で実行してみたいと思います さあ どうなるかと言いますと スライダーはまだ何も設定していないので ちょっとおかしな位置にありますけれども 上から このステータスバーのところから ちょうどいい具合に離れたところに レイアウトされるようになって 左端も右端もきれいにビューの大きさが 調整されたことが分かると思います では Xcode に戻って同じことを スライダーに対してもやってやりましょう この赤いスライダーをビューの下のところに 持って行って画面いっぱいに広げる そして緑のスライダーも赤の下に 持って行って目いっぱい広げる そして青のスライダーも下に持って行って 目いっぱい広げるという形にして この赤いスライダーから設定していきます 先程と同じように画面の すぐ右下のところにあるPinボタンを押して Constrained to margins を消して 左端から16 ピクセル そして今度は8と書いてあるのは すぐ上にある今 追加した色のビュー これを基準にしたピクセル数になります 8のところの制約を追加 そして右のところも追加ということで 3つを追加して add three constrains 追加します 同じことを緑に対してもやってやります 緑に対してもConstrained to margins を消して 左 上 右 そして青のスライダーに対しても Constrained to margins を消して 左 上 右という風に制約を追加します 一度これで iPhone6の シミュレーターの上で実行してみましょう するとこのように今までとは段違いに きれいな状態で レイアウトできたことが分かります ただこれちょっと Xcodeに一度戻りますけど この状態で注目していただきたいのは 現在この画面の上に表示されている レイアウト用の線が 全部オレンジ色になっているというところに 注目してください オレンジ色になっているのは 実はまだ制約が十分に書かれていない ちょっとレイアウトがおかしくなる場合が ありますよ という警告の意味で オレンジ色になっています 本来であれば青色に なってくれないと困るんですけど なぜこのようなオレンジ色になっているかと 言いますと この色のビューもスライダーも今 左端と右端と上側にくっついてくださいという 条件は書いたんですけども このままだと 左と右と上の位置は決まるんですけど この下側のラインがどの位置に 合わせていいのか分からないということで さらに高さも制約してくださいということで オレンジ色のラインが現在表示されています ということで このカラーのビューを選択して そしてこのPinを選択して 今度はここのHeight このWidth というのが画面の横幅 そしてHeight というのが画面の高さを 表しているものになるのですが この Height 画面高さが この 280 ピクセルが保たれるように 調整してくださいということを設定する Constraint すなわち制約を このAdd one Constraint のボタンを押して 追加してやります 追加すると このように画面の 左端のところにも上のところにも そして右端のところにも青い制約がついて さらにこの画面の高さに対しても 青い制約がついて全部が問題なく このカラービューが レイアウトできるようになったということが ビジュアルに分かるというようになっています まだ赤と緑と青に対しても この設定をしていませんので 赤 緑 青 それぞれのスライダーに対しても 同じように設定してやります 赤いスライダーと緑のスライダーと 青のスライダーにも 後は高さの制約を追加してやるだけですので 赤のスライダーを選択した後 キーボードから Shift キー 左でも右でもどちらでも構いません Shift キーを押した状態で 緑 青と スライダーを選択してやって この Pin のボタンから Height のチェックを入れてやって 30 ピクセルの高さを キープしてくださいねというのを 同時に3つまとめて追加してやることができます これで色のビューも合わせて左端と 右端と上のマージンの設定 それから高さの設定と すべてのレイアウトの設定ができましたので これでアプリケーションを実行してみると このように iPhone 6の画面上で きれいにレイアウトされるように なったことが分かります 一応 Xcodeに戻って このカラーエディタのところ 今まで使っていたのは実行ボタンと それから実行停止ボタンでしたけど その右側のカラーエディタのところを 一度見ていただきますと このカラーエディタのところで どのデバイス上で実行するかということが 選択できるように 実はなっています ここで例えば iPhone 5s ちょっと iPhone 6よりも画面が小さいですけど これで実行した時にどうなるかというのを 確認できるようになっていますので この画面上で実行した時にどうなるか ということが確認できるようになっています 今度は iPhone 5sで実行したので 画面が小さくなりましたけど それでもきれいに画面の上に この色のビューとスライダーが 収まっていることが分かると思います ぜひ皆さんは他のデバイスでも実行してみて もうちょっと小さくなった場合 あるいはもうちょっと大きくなった場合に ちゃんとレイアウトされるように なっていることを確認してください このレッスンではユーザインタフェースの 大きさを調整する 制約という方法について学びました

はじめてのiOSアプリ開発

このコースではXcodeを使ったiOS用アプリの開発に必要な基礎知識を学びます。Xcodeの基本的な使い方から本格的なゲーム制作のためのSprite Kitを用いた制作方法まで、カウントダウンタイマーやスピード暗算ゲームなど3つの簡単なiOS用アプリを作りながら説明します。このコースを見れば、本当に必要なアプリ開発の知識を着実に身に付けられるでしょう!

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

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

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

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