132
124

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-12-20

by @mixiappwchr

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

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

AutoResize概要

親のViewのサイズに合わせて

  • top,bottom,right,leftの位置を固定 or 自動調整
  • width,heightの位置を固定 or 自動調整
    これだけです。

これだけです!!

スクリーンショット 2014-12-20 10.36.59_120.png

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

サイズの自動調整

例えば上下50%ずつのViewを作りたい場合は、

スクリーンショット 2014-12-20 12.15.28.png

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

これをviewに上下半分になるように配置すると
スクリーンショット 2014-12-20 10.51.08.png

こうなります。Landscapeの場合は
スクリーンショット 2014-12-20 10.51.26.png

こんな感じです。

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

つぎは1:2の割合にしてみましょう
スクリーンショット 2014-12-20 10.55.26.png

スクリーンショット 2014-12-20 10.55.49.png

上を固定の高さにもできます。これはpositionを組み合わせて設定します。
上を
スクリーンショット 2014-12-20 12.22.37.png
下を
スクリーンショット 2014-12-20 12.22.42.png
にすると

スクリーンショット 2014-12-20 12.20.43.png

1:1:1の場合も

スクリーンショット 2014-12-20 10.57.47.png

この通りです

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

スクリーンショット 2014-12-20 11.01.21.png

位置の自動調整

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

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

スクリーンショット 2014-12-20 11.33.30.png

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

スクリーンショット 2014-12-20 11.35.28.png

こうできます。

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

スクリーンショット 2014-12-20 11.57.57_120.png

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

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

スクリーンショット 2014-12-20 11.22.11.png

Viewの高さを変えてみると

スクリーンショット 2014-12-20 11.24.27.png

伸びてますね!

AutoLayoutとどうつきあう?

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

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

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

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

appwchr post

職種の枠を超えて劇的な効率化をはかる!デザイナーさんむけAndroid のUI作成の簡単まとめ

一歩先のiOS開発へ!SonyのレンズカメラQX10/100向けライブラリを作った。iPhoneと外部デバイス連携開発その1.

[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サービス、開発ツール集1]
(http://qiita.com/appwatcher/items/f0024fe2ac34da345f04)

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

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

132
124
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
132
124

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?