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

ビュー階層を理解する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
複数のビューが配置されたアプリにおいて、ビューとビューの関係が実行時にどのようになっているかについて解説します。
講師:
05:43

字幕

このレッスンでは、iOS アプリのビュー階層について説明します。まずこちらのアプリをご覧ください。こちらのアプリでは現在、画像を表示するための画像ビューが一番下に表示されています。そしてその上に、ぼかしをかけるためのビジュアルエフェクトビューが二つ用意され、さらにそのビジュアルエフェクトビューの上にタイトルを表示するためのラベルや、文字を表示するためのテキストビューが表示されています。また画面の下の方にはツールバーがありさらにそのツールバーの中にツールボタンが用意されています。その上には白い半透明のビューが用意してあり、その中にラベルが用意されています。それではこのビュー階層について、storyboard の中で詳しく見ていきましょう。storyboard の中でビュー階層を確認するためには、このエディタ画面の左下にあるボタンこの Show DocumentOutline というボタンを押すことによってビューの階層を表示することができます。ここではこの View の中に一番下の部分に Tomato を表示するための画像ビューが表示されており、さらにその上にVisual Effect view が乗っかって、さらにその上にツールバーが乗っかって、という形で下から上に積み上げられているビューがこのように上から下に表示されていることがわかります。 さらにこの VisualEffect view の中には他のビューが格納されています。このビューの中にはさらに、タイトル表示のためのラベルが格納されています。このようにiOS のアプリケーションの中では、様々なビューの中にさらに子供のビューを埋め込むことができるようになっています。しかしこのようにたくさんのビューが入り組んだ形になると、実際に実行しているときにどのようなビューの階層になっているのかがわかりにくいときがあります。そのために Xcode には、ビューの階層をデバッグするための特別な機能が用意されています。ビューの階層をデバッグするためには、まず現在のようにこのようにシミュレータの上でアプリケーションを実行しておきます。そしてシミュレータ上でアプリケーションが実行されているときにXcode の画面の下の方を見ると、この画面の真ん中より少し左の所にDebug View Hierarchy というボタンが 表示されています。View Hierarchy というのは、階層のことを示します。このビュー階層をデバッグするためのボタンを一度押しましょう。そうするとシミュレータ上で実行が一時中断されて現在のビュー階層がXcode の中に渡されます。 そしてこのように読み込まれたビューの階層は、このエディタ部分をドラッグして3D で動かすことができます。なお、3D で深さがどれだけついているかということは、この左下の方にあるスライダーで調整することができます。ビューの見え方は真ん中の方にあるボタンでも調整できます。まず一番左にあるボタンはShow clipped content ということで、クリッピングされて表示されていないビューの領域であっても表示するかどうかということを切り替えることができます。またその次のボタンを押すことで、こちらは Show constraintsという制約を表示するためのボタンですから、現在このアプリケーションの中でどのように制約がついているのかということを確認することができます。例えばこのテキストビューに対して制約を確認したいと思ったとすると、このテキストビューのさらに上のビューがわかりやすいですね。このように上と下と右と左上下左右の 4 カ所に制約がこのように緑の線でついていることが表示されます。またその横のボタンはReset the viewing area ということで、表示をリセットすることができますので、このボタンを押すとこのように表示を元に戻すことができます。 また現在は、ビューの階層のこの画面がアプリケーションの実行画面そのままになっていますが、さらに 4 つ目のボタンを押すことによって、これを Wireframe のみにするのか、あるいは Contents のみにするのか、それとも枠線付きでContents も表示するのか、ということを切り替えることができます。そしてこのアプリケーションの画面全体の大きさを切り替えるためには、- ボタン、 = ボタン、 + ボタンがここに用意されていますのでアプリケーションの実際のサイズに合わせたいときには真ん中のボタンを押して、それよりも小さくしたければ- ボタンや、大きくしたければ + ボタンを押すことによって、この大きさを調整することができます。さらにその右の方にスライダーが、ちょっと変わったスライダーが用意されていますが、このスライダーを使うことによって画面の下の方からビューをどこまで表示するのかということを調整することができます。この左から下の方の見え方を調整することができて、右の方から画面の上からの見え方を調整することができますので、表示しないビューの画面の深さをここで調整することができます。ビュー階層が複雑なアプリケーションは、実際にアプリケーションを実行している最中にビューを上に移動させたり下に移動させたりということをしたりもしますから、このビュー階層をデバッグするための機能を使うことによってリアルタイムのビュー階層の情報を使って分かりやすくデバッグすることができるようになります。 このレッスンでは、iOS アプリのビュー階層について説明しました。

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

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

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

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

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

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