はじめてのiOSアプリ開発

カウントダウンのラベルをレイアウトしよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
カウントダウンタイマーの見た目の部分に制約をつけて、アプリケーションが実行されたときに問題なくレイアウトされるように調整します。
講師:
05:26

字幕

このレッスンでは カウントダウンタイマーの 部品に対して レイアウトを調整していきたいと思います 現在 このテキストラベルが 真ん中に追加されて そして そのアラインメントであるとか テキストの見た目であると いった部分が 調整されている状態になっています この状態で 一度 アプリケーションを実行してみましょう そうするとどうなるか 見ていただきます すると この様に アプリケーションを実行した時に 右寄りに表示されてしまいます これは何故かと言いますと iPhone 6 の画面というのは レイアウトを行った時の 画面よりも小さいので 丁度 左の方に合わせてみると ピッタリと場所が合うと 思うのですけれども 丁度 この画面の左半分が 切り取られた という状態になっている訳です これに対して このテキストラベルが 常に画面の真ん中に 表示されるようにしたい ということを iPhone に対して 教えてやらないと きちんとレイアウトしてくれない訳です ということで このレッスンでは このレイアウトをどのように 調整することが出来るのか ということを見ていきます まず この「 99:99 」と書かれた 部品に対して 必要なレイアウトを行っていきます レイアウトは制約と言われる機能を使って 実装していきます 制約を使うためには この右下の方にある小さなボタン わかりますかね? 4 つ右下の所にボタンが 並んでいるのですけれども この「 99:99 」と書かれた このラベルを 選択した上で この右下の方にある 4 つ並んだボタンの 右から 3 つ目 この右から 3 つ目のボタンが 「 Pin 」というボタンです このボタンを 「 Pin 」ボタンを押して このラベルに対して 必要な制約を書いていきます どのような制約かというと まずは この「 Width 」と「 Height」 ここでは画面に対して ラベルがどのようなサイズになるのか ということを調整します 「 Width 」というのは 画面の横方向のサイズ 「 Height 」というのは 画面の縦方向のサイズです 今回は ここの 「 Width 」と「 Height」に 両方ともチェックを入れることで このラベルの縦方向と 横方向のサイズは このままで使います と宣言したことになります それでは この一番下の 「 Add 2 Constraints 」と 書かれているボタンを押して この「 Width 」と「 Height」の 2 つの制約が追加された ということを確定しましょう これで オレンジ色の表示が出るように なりましたけれども この横方向のサイズと 縦方向のサイズが確定しました ということになります では 次に横方向にも 縦方向にも このカウントダウンタイマーの ラベルが丁度 真ん中にくるように設定します ということも追加する必要があります そのための制約は この一番左端の方にある 「Align 」という名前の ボタンになります この「 Align 」のボタンを 一度 押します そして 一番下側にある 2 つです 「 Horizontal Center in Container 」 と書いてある このチェックボックスと それから 「 Vertical Center in Container 」と 書いてある この 2 つの所に チェックボックスを入れます Horizontal Center というのは 横方向の中央 そして Vertical Center というのは 縦方向の中央 ということを表します この 2 つのチェックを 入れることによって 画面の常に真ん中で 横方向と縦方向のサイズは 変わらないということが 宣言できますので これで「 Add 2 Constrains 」 この一番下のボタンを押して これも確定します そうすると このラベルに対して 画面の中央にくることになっている ということが 青い線で表示されました この様に 何かの部品を選択した時に 青い線が表示されていれば 問題なくレイアウトできることが 分かるようになっています それでは これでもう一度 アプリケーションを実行したいと思います 今アプリケーションが 既にシミュレータの上で 実行中であることが この「停止」ボタンが オンになっていることから分かりますので この様に アプリケーションが 実行しながら Xcode の作業をしていた時には この「停止」ボタンを 一回押して アプリケーションを終了させてから もう一度 この「実行」ボタンを押して アプリを実行します そうすると この様に 画面の中央に 丁度 中央に このカウントダウンの タイマーのラベルが 表示されるようになりました このレッスンでは 制約という機能を使って カウントダウンタイマーのラベルを どの位置に表示するか ということを調整する方法を 見ていただきました

はじめてのiOSアプリ開発

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

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

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

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

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