Life-LOG OtherSide

  

Auto Layoutの使い方の勉強の続きです。もっともシンプルなDoument Outlineから設定する方法から入りました。

最初にLabelに対して2つのルール(コンストレイント)を規定したところだ。しかし、問題が生じた。Labelにオレンジ色のアウトラインができていて、黄色い三角の警告サインがいたるところに出現している。

一番情報が多いのはナビゲーターエリアのアイコン左かあ4つ目「イシューナビゲーター」が選択(ショートカット：command + 4)された状態になっているだろう。問題は発生したときにここに問題の詳細が出ていくる。


実はこのラベル表示されていないのにかなり幅を広げてViewに配置しているため、実行時にラベルのサイズが実際と異なる可能性があるという警告である。

オートレイアウトボタン

じゃあどうやって修正したらいいのか考えてみよう。ここで使用するのがストーリーボードも右下に並んでいる4つのアイコンだ。これらはAuto Layoutボタンと呼ばれて、「Align(アライン)」「Pin(ピン)」「Resolve Auto Layout Issues(オートレイアウト問題解決)」「Resizing Behavior(サイズの再変更)」で、問題解決は当にオートレイアウトの問題解決を使うことになる。


そしてこの食べるの問題はサイズなんでフレームをアップデイトすればいい。するとラベルは小さくなりオレンジラインも消えて警告も消えた。


もう一つ修正法は、Document Outlineにある黄色い警告をクリックすると警告の詳細が見えるでしょう。その横にある黄色い三角警告サインをクリックしたら次のようなポップアップウインドウが出てくるのでそこで修正もできますね。


さあ、ランしてみよう。見事に動くだろう!


今日はここまで。  

My Second Projectは、ちょっとしたインタラクティブなアプリである。でもコードは非常にシンプル。ボタンを押せばボタンのタイトルをラベルに表示するという簡単なものである。

じゃあランさせて、ターゲットのiPhone 6 Plusで動かすと、Leftボタンだけが画面に見える...　押してみると画面右の方に「Left is pressed」の表示が(^_^;)


これは「My First Project」の時と同じ問題である。複数の画面サイズに対応するための新しい機能としてAuto Layoutが実装されたけど、きちんとルールを与えないとちゃんと動かない。

前回は、Auto Layout機能をオフにして開発する方法を紹介した。たった1つのデバイスをターゲットにした開発を目的としていたらこれで構わないけど、これから増えるであろう複数の画面サイズに対応するためにAuto Layout機能の理解と習得は必須であろう。さあ、Auto Layout機能の勉強に入ろう！

まず、このAuto Layout機能ですが、他の本で見れば、IB上ではビジュアル的に設定しているが、実のところ新しいクラスが導入されている。NSLayoutConstraintクラスだ。この頭に「NS」とつくところが私のような素人プログラマーには違和感があるんだけどね。どうも昔のNextStepの名残なんでしょうね。ハードウエアの進化は早いのにベースで動かしているソフトウエアの開発は遅々としている様を感じます。

NSLayoutConstraintクラスをコードで組み入れるやり方もあるのでしょう。しかし、この機能は基本的にIBを使って実装していくのが賢い。IBでの実装法もいくつかあるので考えていく。

★レイアウトの調整とは、オブジェクトにルール(コンストレイント[制限])を与えること

オブジェクトにコンストレイント(制限)というルールを与えるという作業なので実際にやってみよう。Main.storyboardが選択されているのを確かめよう。

Document Outline(ドキュメント・アウトライン)

Document Outlineはストーリーボードの左下にあるアイコンをクリックすることで開け閉めできるので、Document Outlineを開いて階層をすべてオープンにすると、Viewの直下にLeft、Right、Labelがあるだろう。ます、Labelからルールを組み入れていくが、2つのルールを規定しよう。

1) 水平線の中央に位置する(Horizontally Center)。
2) 画面上部から特定の距離離れた位置

このルールを組み入れるために、Labelを「control + ドラッグ」してViewまで引っ張ると下のような青いラインが引かれる。


ここでマウスをリリースすると、複数のルールの選択肢(コンストレイント)を表示されているグレーのパップアップウインドウが出現する。


上のイメージでは既に2つのルールが選択されているけど、これは「shift」を押しながら選択した後です。この後にウインドウの外側をクリックするとコンストレイントがLabelに適応されて、実際のビューワ以下のようになる。


2本のブルーラインがLabelから出ているのが分かる。長い線が水平線上中央値を示し、短い線は上部からと特定の距離を示している。

やった!　これでAuto Layoutを使えるようになったぞ!　おっと待ってください。ちょっと問題が生じているの気がついただろうか? ラベルにオレンジ色のアウトラインができていて、いたるところに黄色い三角形の警告サインが表示されているだろう。

これの説明は明日にします。今日はここまで。