開発

2016.03.16

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

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

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

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

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

 

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

 

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

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

(正直、「時間掛かりすぎる、なんのこれ!?」って思っていました。)

 

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

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

 

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

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

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

 

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

黄色

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

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

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

 

青色

正常

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

 

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

 

 

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

理由2と同じ内容です。

 

 

理由4: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の構成はきちんと変えましょうという教訓を得ました。

 

理由5:Conttraints(制約)の種類を把握していなかった

何が出来るの?何が出来ないの?という点が不明瞭だった。

最低限使うところだけでも把握しておく必要があった。

 

 

理由6:Autolayoutでサイズ制限かけかたが理解できていなかったため

画面が解像度を超えていってしまっていた
(目的:Viewの最大値=画面の最大値にしたいができていない。)
考え方は画面のフチまでの制限を付けることであった。
また、調節は上位にあるViewから調節をおこなう必要があった。

 

理由7:マウスで各Viewの位置を調節をしていたため

そのため調節したいViewを右側のメニューから選択し、inspectorのviewから調節をしたほうが早いです。

 

理由8:Priority(優先度)を使っていないため

フチの厚さが最優先でそれにあわして拡大してほしいときはPriorityを使っていくと丁度良い表示になります。

 

理由9:調節時にViewに色を付けていないため区切りが分かりづらい状態になってるため

どのViewを操作したのか分かりにくいため色を付けて対応すると早いです。

 

 

Share on FacebookTweet about this on TwitterShare on Google+Share on Tumblr

この記事を書いた人

staff エンジニア:山口恵輔
一覧に戻る

[ WANTED! ]

共に地方を創る仲間を、随時募集中です