僕がAutolayoutを理解できなかった理由(iOS, Xcode)

開発

2016.03.16

僕がAutolayoutを理解できなかった理由(iOS, Xcode)

ご無沙汰しております。ヤマグチです。

Autolayoutの理解するときに分からなかった点、知っていたらもっと早くにAutolayoutが理解できたのに…という事を書きます。

注：主にヤマグチ視点です。

注：主に独学のため先生がいたわけではありません。そのため情報に偏りがあります。

理由１：プレビュー機能を知らなかった

お恥ずかしながら、プレビュー機能というものを知りませんでした。

そのため、いちいちビルドして端末やシミュレータで確認していました….

（正直、「時間掛かりすぎる、なんのこれ！？」って思っていました。）

プレビュー機能に関しては本記事よりも詳しく分かりやすい記事がありましたので割愛いたします。

例：http://wayohoo.com/xcode/xcode-has-a-preview-function-of-the-storyboard.html

理由２：各種線の色をしっかり知らなかった

Autolayoutの設定をしているときに、各View等にそれぞれ3色のバーや数値が表示されると思います。

その色が示す意味をきちんと理解しておらず、正しくAutolayoutが使えていませんでした。

赤色
エラー
期待通りとならない。

黄色

現在見えているものと違う。

この状態のまま編集を続けるとよくわからない表示になる可能性がある。

しかしViewの編集中のViewのサイズにあっていないだけで、実際はあってることが多々ある。

青色

正常

しかしViewの編集中のViewのサイズにあっていないだけで、実際はずれることがある。

… 全体的に注意な気がしています。(　´･‿･｀)

理由３：Autolayoutに何らかの不合理が生じていると表示される「赤い●」や「黄色い▲」の意味を理解していなかった

理由２と同じ内容です。

理由４：Viewの構成方法がイケてなかった

依存関係が分かりにくい構成状態となっていました。
そのため、1カ所を治すと予期していない不整合がおこっていました。

+----View
|    +----View
|          +----Label
|          +----Button
|          +----Button
|          +----image
|          +----Label
|          +----Button
|          +----Button
|          +----image
+----View
|    +----View

だったのを、

+----View
|    +----View
|          +----View　//これ増やした
|                +----Label
|                +----Button
|                +----Button
|                +----image
|          +----View  //これ増やした
|                +----Label
|                +----Button
|                +----Button
|                +----image
+----View
|    +----View

に変更しました。

これはあくまで、「どのViewに依存しているのか」というのを明確にする必要があったためです。

なので状態によってViewの構成はきちんと変えましょうという教訓を得ました。