2014年04月15日

iOS7 - スクロールとちょっとだけ Auto Layout (2)

前回「iOS7 - スクロールとちょっとだけ Auto Layout (1)」でスクロールのできる画面ができました。
投稿の最後に告知しましたように、このプロジェクトにはAuto Layout に関する問題が、まだ、解決されていない状態です。

ストーリーボードをよく見ると、ドキュメントアウトラインの上部に赤い丸の白抜き矢印、キャンバスのビューにはオレンジの枠が表示されています。(図1)
これらは、制約の指定が適切でないために、正しいレイアウトの数値が算出できないことを警告しています。
incomplete_constraints.png
図1 不完全なレイアウト

ドキュメントアウトラインの赤い丸をクリックすると詳細が表示され、修正する場合のガイドとなります。(図2)
docoutline_const_error.png
図2 ドキュメントアウトライン

レイアウトの修正


とういうことで不完全なのか検証してみましょう。

前述のドキュメント・アウトラインを見ると、「スクロールのコンテンツの幅と高さが曖昧」と言うメッセージです。(図3)
ambiguous_size.png
図3 ドキュメント・アウトラインのメッセージ

これまでの作業で、ラベルやテキストフィールドが配置されているコンテンツ・ビューには、まだ、制約の設定は行っていません。
そのため、デフォルトの挙動である、Auto Resizing Maskからの制約の自動生成が行われています。

この曖昧さを解消するために、コンテンツエリアの幅と高さを制約で固定します。
図5に示すとおり、コンテンツ・ビューを選択してから、ピンツールをクリックします。WidthとHeightのチェックボックスをチェックして、[Add 2 Constraints]ボタンで追加します。
width_height_constraints.png
図5 Width,Heightの固定

2つの制約を追加したとたんに、オレンジ色の枠はブルーに変わり、ドキュメント・アウトラインのエラー・サインは消えました。(図6)
fixed_ambiguous_constraints.png
図6 制約を追加した結果

シミュレーターを起動して確認し、正常にスクロールすることを確認してください。

Auto Layout は比較的、新しく規定された概念です。デバッガーもありません、しかしスタンダードとして定着していくにつれてしかし今後は、重要な概念として安定して広く使用されるようになると思います。問題が起こっても、エラー/警告メッセージくらいしか出しませんし、デバッガーもありません。Xcode5も期待通りに動作しない時もがあります。これまでのアップルの充実した開発環境になれ親しんでいる我々には多少戸惑うものがありますが、これはスタンダードとして定着してゆくにつれて、徐々に整っていくものと思われます。

今回は、Auto Layout のごくさわりだけを紹介しましたが、機会を改めて、詳しく説明したいと思っています。

次回は、画面がスクロール可能になったのを踏まえて、キーボードに隠れたテキストフィールドを、入力可能な位置に再配置する方法を考えます。
posted by ayagu at 08:07| Comment(1) | iOS | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
この記事の続きを書いてほしいのですが。。。
Posted by key at 2014年11月28日 16:58
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。