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

サイズクラスに応じてビューと制約を変える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サイズクラスを使って、ビューの大きさや位置などを自動的に変化させる方法を説明します。
講師:
07:45

字幕

このレッスンでは、サイズクラスを使ってビューの大きさや位置などを自動的に変化させる方法を説明します。まず現在の状態を確認しておきましょう。現在こちら真ん中のところにラベルが一つ用意してあって、そのすぐ下にボタンがあります。これを横向きにして、iPhone の画面上で縦方向がコンパクトなサイズになったときにはラベルを小さくする、ラベルのフォントサイズを小さくするということと、ボタンを消すということをしています。今回はこのラベルが横方向になったときに、下の方に移動してですね、高さがいまちょっともともとのこの大きなサイズを表示させるために縦方向が大きくなっているんですけど、縦方向も少し小さくしながら下方向に寄せるということを実現したいと思います。それでは Xcode に戻って作業を行いましょう。いまここにあるのは基本のレイアウト編集の画面です。ここに対してですね縦方向がコンパクトになったときのサイズを編集したいというときには、この画面の真ん中の中央のところにあるwAny hAny と書かれているここの部分を使います。ここを一度クリックすることによってこのようにデフォルトの状態では真ん中の Any Width Any Heightという組み合わせになっているのですが、ここを上の方にマウスを持っていくことによって、横方向は Anyそして縦方向はコンパクトになったときのレイアウトをしますということを宣言して、レイアウトを始めることができるようになります。 このようにもうですね、変更したときにわかりますかね、ここをもとに戻します。そうするといまボタンが表示されていてこのテキストの大きさが大きいままですけど、ここをコンパクトにした瞬間に小さくなったことがわかります。このようにこの一番下が青くなっているときには、サイズクラスを変更して編集しているときの状態を表します。このときに縦方向の制約を変えなければいけませんので、今回はまず、現在設定されている縦方向に中央に表示する制約を消してみたいと思います。これを行うための最も簡単な方法はですね、この左側の左下にあるDocument Outline のボタンこちらを押してですね、Document Outline から制約をまず選択します。このラベルに関する制約をいまサイズクラスのコンストレインズということで Width と Height、ここにも二つありますし、さらにそれが 親のビューとの関する制約ということでこちらにもあります。これもクリックするとそれぞれの制約が見えてきます。縦方向の制約はこちらですね、こっちですね。Center Y Alignment。Y 方向の設定が縦方向の設定です。今回はこれが必要ありませんので、これをこの 縦方向がコンパクトのサイズクラスのときだけ削除してやります。 これをどうすればいいかというと、この制約をドキュメントアウトラインで選択してそして Cmd キーを押しながら Delete を押します。Cmd キーと Delete キーを同時に押さないと、Delete キーだけ押してしまうと、この制約がすべてのサイズクラスから消えてしまいますので注意してください。Cmd キーと Delete キーを同時に押します。そうするとこのように制約が消えていないということを表すためにグレーで残り続けるのですが、グレーになったのでこの縦方向がコンパクトなサイズクラスからはこの制約が消えましたということがわかります。さらにこのサイズクラスのやつですね、縦方向の制約がここにあります。この縦方向の制約も少しこれを小さくしたいと思いますので、これをですね、今度はインスペクタを使って変更してみましょう。インスペクタを使うとここにConstant というところがあります。これいま Height の制約を選択した上でインスペクタを表示しているのでここにこういうのが出てきているのですが、これに対してConstant の左側にプラスボタンがありますので、このプラスボタンを押してそして Any Width のときのCompact Heightいまこれが選択されていますからここを選択するだけでいいんですけど、ここを選択してやるとその状態のときのこの高さを自動的にここでこうやって変更することができるようになります。 いまこの状態で現在のこのラベルのですね、高さの食い違いがでていますので、右下にあるこのResolve Auto Layout Issues のこのボタンを押してUpdate Frames を選択してやると、これでこのようにこのボタンのですね、高さが縮んだということがわかります。さらにこれを下の方にもっていきましょう。このままドラックアンドドロップで下に持って行って下にくっつけます。そしてここに制約を追加します。下にいまくっついたのでこのピンの制約を下側にくっつけるという制約で下側にくっつける制約を追加します。そうすると下側にくっついたということで、いまくっついたのはこれですね。この Vertical Space というのがいま追加されました。これはですねここの Any とCompact になってますけど、この組み合わせを Any Any の組み合わせに戻して みてみると今度はこの Any Any の組み合わせではいま追加した VerticalSpace の制約が無効化されているということがわかります。それではこれで、ラベルに対してフォントの大きさも変更されるようになりましたし、そして高さも変更されるようになりましたし、縦方向の位置も変更されるようになりました。 ではシミュレータ上で実行して結果を確かめておきたいと思います。実行ボタンを押してシミュレータ上でこのアプリケーションを起動しましょう。そうするとまずいま縦方向ですが、これを横方向にするとこのように下のほうに移動したことがわかります。高さももちろん変更されていますしボタンも消えています。この移り変わり方がどのようになっているのかという事を詳しくみたいときには、こちらのですねiOS Simulator のDebug メニューにSlow Animationsというのがあります。Cmd+T で切り替えることができますが、この Slow Animations を選択しておくと、この後ろのほうにもいまでましたねSimulator slow-motionAnimations are now onとでていますが、これを使うことによってCmd+← や →を押して横方向に傾けたときに、一度これ再実行する必要がありますかねもう一度実行し直してすべての動作がすべてゆっくりになります。そして Cmd+←このようにボタンが消え、そしてサイズが変更されながら位置が移り変わっていくとまたもとに戻してやるとこのようにボタンが現れながらテキストのサイズがもとに戻っていくというこの様子がゆっくりと観察することができます。 このレッスンでは、サイズクラスを使ってビューの大きさや位置などを自動的に変化させる方法について説明しました。

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

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

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

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

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

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