AutoLayoutに虐げられているIOSエンジニア向け、AutoResize再考

by @mixiappwchr

最近開発してるとAutoLayoutが出てきてからアプリ開発を始めている方も多く、AutoResizeってなんなの？って聞かれたので、最近語られないAutoResizeの方に目を向けてみようと思います。

AutoLayoutしかやったことなく、苦しんでいる方に光明を与えられればと思います。

# AutoResize概要

親のViewのサイズに合わせて
* top,bottom,right,leftの位置を固定 or 自動調整
* width,heightの位置を固定 or 自動調整
これだけです。


#### これだけです!!

![スクリーンショット 2014-12-20 10.36.59_120.png](https://qiita-image-store.s3.amazonaws.com/0/37731/2275a415-1989-0c2c-28c4-856a1f144eac.png)


これだけだと大したことできないんじゃないからAutoLayout使わないといけないんじゃないの？と思っている人もいると思いますので実際にAutoResizeでレイアウト何ができるか具体例を書いていきます。


# サイズの自動調整
例えば上下50%ずつのViewを作りたい場合は、

![スクリーンショット 2014-12-20 12.15.28.png](https://qiita-image-store.s3.amazonaws.com/0/37731/e851e201-6652-44a2-b9db-dd17c3dc5266.png)

このようにwidth,heightを自動調整をセットします。位置調整はこのレイアウトの場合は外してます

これをviewに上下半分になるように配置すると
![スクリーンショット 2014-12-20 10.51.08.png](https://qiita-image-store.s3.amazonaws.com/0/37731/96ac9747-aa48-5c56-69e2-414e76386ba2.png)



こうなります。Landscapeの場合は
![スクリーンショット 2014-12-20 10.51.26.png](https://qiita-image-store.s3.amazonaws.com/0/37731/b35d3cc7-954e-b50e-eb17-91fe5823dbfd.png)



こんな感じです。

いい感じに調整できてますね！



つぎは1:2の割合にしてみましょう
![スクリーンショット 2014-12-20 10.55.26.png](https://qiita-image-store.s3.amazonaws.com/0/37731/153adc3a-df5f-c6a4-8aec-577370c5c839.png)

![スクリーンショット 2014-12-20 10.55.49.png](https://qiita-image-store.s3.amazonaws.com/0/37731/95313fd8-e062-360b-2ff0-d622f424af9c.png)



上を固定の高さにもできます。これはpositionを組み合わせて設定します。
上を
![スクリーンショット 2014-12-20 12.22.37.png](https://qiita-image-store.s3.amazonaws.com/0/37731/40b0fc6c-d37f-75af-d477-fed901aa2d8d.png)
下を
![スクリーンショット 2014-12-20 12.22.42.png](https://qiita-image-store.s3.amazonaws.com/0/37731/085a4f19-81d4-6461-e6ef-b86d534f1f31.png)
にすると

![スクリーンショット 2014-12-20 12.20.43.png](https://qiita-image-store.s3.amazonaws.com/0/37731/eeafa916-cfa2-da95-2e84-b9b952718916.png)




1:1:1の場合も

![スクリーンショット 2014-12-20 10.57.47.png](https://qiita-image-store.s3.amazonaws.com/0/37731/d91312ed-fe5b-5b24-78bb-e43852198cbf.png)



この通りです


たくさん配置してみるとこんな感じです。

![スクリーンショット 2014-12-20 11.01.21.png](https://qiita-image-store.s3.amazonaws.com/0/37731/410ad59b-e6cb-9262-8799-1e6e26c697c1.png)




# 位置の自動調整

位置の調整はサイズの調整とは逆で、指定するとその位置に固定され、指定しないとViewのサイズにより位置も自動調整されます.

こちら何も設定しないでデフォルトの設定で並べた場合

![スクリーンショット 2014-12-20 11.33.30.png](https://qiita-image-store.s3.amazonaws.com/0/37731/87fc8860-7a25-af4e-50de-271bca98cc6f.png)



これをきちんと調整すると

![スクリーンショット 2014-12-20 11.35.28.png](https://qiita-image-store.s3.amazonaws.com/0/37731/50b23604-b7f0-cb68-7d23-9d92c2c5f338.png)



こうできます。

これはそれぞれ下記のように設定してあります。

![スクリーンショット 2014-12-20 11.57.57_120.png](https://qiita-image-store.s3.amazonaws.com/0/37731/c3cbeb61-ee70-b3f9-a905-066c6cd4b1be.png)




## もう少し実際のレイアウトに近い例

よく見るViewに近い奴を作ってみました。(本当はtableCellとかでやるので現実とは一寸かけ離れますが)


![スクリーンショット 2014-12-20 11.22.11.png](https://qiita-image-store.s3.amazonaws.com/0/37731/d76be732-b6af-2a3d-b232-92c0baa90698.png)

Viewの高さを変えてみると

![スクリーンショット 2014-12-20 11.24.27.png](https://qiita-image-store.s3.amazonaws.com/0/37731/6aa8c85d-cceb-c737-d669-9fd92c391229.png)

伸びてますね！



# AutoLayoutとどうつきあう？

個人的にAutoLayoutは以下の点が大きく問題だと思っているので、ほとんど使いません。

* 学習コストが高すぎる。これが一番の問題かなと思ってます。やはり覚えることが多く、結局直感的でもないことも多いです。思ったようなレイアウト結構なってくれない。これは自分自身でやる場合もそうですが、チームで動く場合、他人が作った物をさらに理解しにくいというのもネックに感じています。
* メンテナンスしずらい。これはAutoLayoutに限らないのですが、一旦くんだViewを調整する場合、またあれをいじるのかとなると。。。
* アニメーションと相性が良くない。基本的にこれからさらにUIのインタラクションを凝るようにアプリの開発は進んでいくと思いますが、複雑なUIをくむ場合AutoLayoutだとさらに難易度が上がってしまいます。
* SizeClassとかまた増えて、これまたわかりづらい。iPad対応まで一つにできると言われても画面サイズが違いすぎるデバイス間でUX上同じようなUIにはしないし、本当に必要？

まあここまで書きましたがAutoLayoutを使うなとは思っておらず,使用することで効率、メンテナンス性があがる場面があれば使うべきだと思います。

storyboard,xibごとにAutoLayoutを使う使わないは切り替えれるので、AutoLayoutでこまったらAutoResizeで作成してみることを検討してみてもよいのではないでしょうか？




##### appwchr post
----

[職種の枠を超えて劇的な効率化をはかる！デザイナーさんむけAndroid のUI作成の簡単まとめ](http://qiita.com/appwatcher/items/aa5f4026dc7db0dd10b2)

[一歩先のiOS開発へ！SonyのレンズカメラQX10/100向けライブラリを作った。iPhoneと外部デバイス連携開発その１.](http://qiita.com/appwatcher/items/6052a884aab5f05e3a17)

[iOSの開発をする上で絶対に使うべき！外せない！webサービス、開発ツール集]
(http://qiita.com/appwatcher/items/07a3babcb9b6cefb307e)

[iOSでこんなアプリ,こんな機能を作りたかったらこれを見ろ！作りたいアプリに対応するクラス、フレームワーク、ライブラリのまとめ！]
(http://qiita.com/appwatcher/items/b02255026a3ee6d95142)

[注目のiBeacomなどの波に乗り遅れないために！iOSのBluetooth開発を容易にするライブラリを書きました。]
(http://qiita.com/appwatcher/items/7491beffd7260b713542)

[まだまだあった！iOSの開発を劇的に改善する最新のwebサービス、開発ツール集１]
(http://qiita.com/appwatcher/items/f0024fe2ac34da345f04)

[さらに快適なアプリ開発を！iOSの開発をもっと劇的に改善する最新のwebサービス、開発ツール集2]
(http://qiita.com/appwatcher/items/c15d7311e71b4c2b77f1)

[スパゲッティから脱出！iOS開発における遷移の問題をすっきり解決する便利ルーティングライブラリをご紹介]
(http://qiita.com/appwatcher/items/259e8d13fff0547e90af)