コードベースで行うAutoLayout

iOSアプリ開発にAutoLayoutは欠かせません。

StoryBoardやIBでAutoLayoutのConstraintsを設定しますが設定項目がわかりにくい問題があります。

また、エラーを吐くような制約のために最初から制約を作りなおした経験がある人も少なからずいると思います。

ここでは、コードでAutoLayoutを指定する方法を解説します。

 

ライブラリを使う方法

AutoLayoutを簡単に利用するライブラリがあります。

https://github.com/SnapKit/SnapKit

SnapKitはAutoLayoutをラップしたライブラリでコードの量も少なく簡単に使用することが出来ます。

 

ライブラリを使わない方法

今回はライブラリを使用しない方法で解説します。

まずはコードから

このようにAutoLayoutのすべてをコードで指定すると長くなってしまいます。

一度StoryboardでAutoLayoutを経験するとコードベースでも理解しやすくなっていると思います。

この例では以下の様なViewが生成されます

autolayout

コードの解説

まず、Constrantsを追加するViewのtranslatesAutoresizingMaskIntoConstraintsのプロパティをfalseにする必要があります

設定していないと下記のようなエラーメッセージが出てしまいます。

AutoLayoutが無かった時のAutoReisizeを無効化しないとAutoLayoutでサイズ変更が出来ないようです。

 

最後にviewにaddconstraintsしていきます。

引数にはNSLayoutConstraintの配列を渡します。

NSLayoutConstraintの使い方はコードを見ると理解しやすいと思います。

まず、constraintを追加したいviewをitemに指定します。

次にattributeを指定します。Top,Bottom,left,Right,CenterX,CenterYなどがよくつかわれます。

relatedByには2つのitem間の関係性を指定します。今回の例ではEqualを指定してます。

toItem, attributeには同様に2目のviewを指定します。

multiplierは乗算値をconstantには定数値を指定します。

例えば、AViewの高さをBVIewの3倍にしたいときは下記の例のように指定します。

 

 

以上がコードでAutoLayoutを指定する方法でした。

IBでは指定したConstraintsがわかりにくい時がありますがコードでは一度にみることが出来ます。

また、コードでの指定は同じようなViewで流用しやすく複数人の開発でも活躍すると思います!

 

 

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">