はじめてのiOSアプリ開発

ユーザインタフェース部品のレイアウトを設定しよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ユーザインタフェースの部品に制約を追加して、レイアウトを調整していきます。
講師:
05:50

字幕

このレッスンでは ユーザーインターフェイスの部品に対して 制約を追加することで レイアウトを調整する方法について 説明します まず 現在の状態を確認してください 現在 画面の上に この様にいくつかのラベルと ProgressView とボタンが 配置された状態になっています この状態でアプリケーションを シミュレータ上で 実行してみたいと思います 「実行」ボタンを押します そうすると この様に 画面全体が右側にずれているのが 確認できると思うのですけれども 何故ずれているのかというと ちょっと このシミュレータの 画面を動かします こうやってシミュレータの画面を ピタッと後ろの方と合わせると 丁度 重なっているのが 分かると思います この iPhone のデザインの画面というのは 基本的に左側に 余白があるのですけれども この余白がそのまま このシミュレータの上でも 反映されてしまっているので 左から右にずれてしまっているように 感じてしまいます このままではゲームになりませんので 今回はこのレイアウトを 調整する方法について 説明したいと思います では 調整をしていきましょう この画面の真ん中にある― ProgressView に注目して いただきたいのですけれども この ProgressView が 画面の縦方向にも横方向にも 丁度 真ん中にきていますので まず ここから作業を していきたいと思います レイアウトを調整するために使うのは この右下にある Pin というボタンです この Pin というボタンを 一度クリックして 横方向のサイズと縦方向のサイズ Width と Height を それぞれチェックボックスをいれて 固定します 固定できたら まずこれを確定させます 一番下の Add 2 Constraints を 押して確定してください そして その横に Align という ボタンがあるのですけれども この Align を使って 中央寄せを表現します この Align という ボタンを押すと 一番下に Horizontal Center (横方向の中央寄せ)と それから Vertical Center (縦方向の中央寄せ)が 両方とも設定できるように なっていますので この2つの設定項目を使って Add 2 Constraints を呼び出すことで これで 画面の真ん中に この ProgressView が 表示されるようになりました では 同じ様にして 今度はこのすぐ上にある +ボタンを設定していきましょう +ボタンも画面の 真ん中にきてほしいと思いますので これは Align と Pin と どちらを先にやっても良いですが 今度は Align を先にやってみましょう Align で画面の丁度 横方向の中央に来る様にするので Horizontal Center に Align を1つ追加します 今 オレンジが出ているのは まだ設定が足りない ということを表しています この+ボタンに対して Pin のボタンを使って Width と Height は そのままにしたいので Width と Height に チェックボックスを入れます これで 横方向のサイズと 縦方向のサイズが確定されました 最後に この+ボタンから ProgressView に対して この+と ProgressView の 縦方向の位置を 固定したいと思いますので +ボタンを選択した後 この+ボタンの所から 右クリック あるいは Ctrl キーを押したまま 左クリックでも行えますので どちらかの方法を使って マウスを押したままにして 足を延ばしていきます そして ProgressViewの 所まで来たら マウスボタンを放すと Vertical Spacing とか いろんな設定ができる所が ここに出てきます ここでは 縦方向に+ボタンと ProgressView の間の 間隔を一定にしたいので Vertical Spacing をクリックすると この+ボタンが表示される位置が 確定されて 青い表示に変わります 同じ様にして右側にある 「 99 」のラベル この「 99 」のラベルも まず Pin のボタンを使って Width と Height を固定します そして 2 Constraints を追加して この「 99 」から 右クリック & ドラッグで +の方に足を延ばして 横方向の間隔をここで整えてください そして この「 99 」から 下の ProgressView に 足を延ばして 「 99 」と ProgressView の間隔も 同じにしてください すると この「 99 」の位置が確定します これを他のものに対しても 行っていきます この「 99 」に対しても Width と Height を固定 そして「 99 」から+に対して Horizontal Spacing を固定 そして Progress View への Vertical Spacing を固定 これを全て繰り返していくことによって 全ての部品のレイアウトの調整を 行うことができます このレッスンでは ユーザーインターフェイスの 各部品に対して 制約を追加することで レイアウトを調整する方法について 説明しました

はじめてのiOSアプリ開発

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

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

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

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

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