1. HOME
  2. ブログ
  3. IT技術
  4. 【Swift4】AutoLayoutをコードで実装する

【Swift4】AutoLayoutをコードで実装する

はじめに

(株)ライトコードの高階(たかがい)です!

StoryBoardでのAutoLayoutの実装はできるけど、コードで書いたことない!

そんなあなた(私)のために、コードでのAutoLayoutの実装方法について簡単にまとめてみました。

高階さん 高階さん
今回は、ライブラリを使わずに標準の方法のみまとめていきます〜!

開発環境

  1. MacOS 10.14
  2. Swift 4.2
  3. Xcode 10.1
  4. Cocoapods 1.6.1
  5. SnapKit 4.0

そもそもAutoLayoutって?

iOSデバイスの多様な画面サイズにViewを適応させるレイアウトの仕組みのことです。

座標やサイズを直接設定せず、相対的な値をViewに制約(Constraint)として設定し、表示します。

コードでAutoLayoutを実装する方法は以下の2つの方法があります。

  1. NSLayoutConstraint
  2. NSLayoutAnchor

実際に書いて動かした方が早いので早速やっていきますが、その前にコードでAutoLayoutを実装する際の注意点から。

コードで実装するときに注意するポイント2点

まず最初に注意して欲しいのが、必ずViewを配置(addSubView)してから制約を設定すること

注意点1

配置前に制約を設定すると、実行時に以下のエラーでクラッシュします。

The view hierarchy is not prepared for the constraint:

注意点2

もう一点は、translatesAutoresizingMaskIntoConstraintsをオフにすること

{制約を設定するView}.translatesAutoresizingMaskIntoConstraints = false

Viewを配置する前に上の一行を書いちゃいましょう。

ちなみに、このtranslatesAutoresizingMaskIntoConstraintsというプロパティについてですが、AutoLayout以前に使われていたAutosizingというレイアウトの仕組みを、AutoLayoutに変換するかどうかを設定するフラグだそうです。

高階さん 高階さん
デフォルトではtrueになっていますが、追加していくAutoLayoutの制約がAutosizingの制約とコンフリクトを起こすと期待通りの動作をしないことがあるので、新たに制約を追加する際には忘れずにfalseにしてください〜

実装について

では、早速それぞれの実装方法を見ていきましょう。

今回は比較のために以下のように、中央に100pt四方の赤いViewを表示させていきたいと思います。

1.NSLayoutConstraint

こちらは、NSLayoutConstraintクラスのイニシャライザを利用した方法です。

イニシャライザの定義は以下のようになっています。

高階さん 高階さん
引数がてんこ盛りなのでぱっと見で分かりづらいですね。。

引数について

たくさんある引数について順に説明していきます。

引数名渡すもの
item追加するView
attribute(attr1)追加するViewの設定をする部分
relatedBy追加するViewと基準となるViewの関係性
toItem基準となるView
attribute(attr2)基準となるViewの基準となる部分
multipier制約の割合の数値
contant制約で追加する数値

仮にrelatedByを.equalとした時の状態を簡潔に表すと

item.attribute(attr1) = toItem.attribute(attr2) * multiplier + constant

となります。

実際にコードを書いてみる!

以下は、100pt四方のViewを画面中央に表示させるコードです。

引数を色々といじってみた方が理解が早いと思うので、そちらをお試しください。

2. NSLayoutAnchor

次は、iOS9で追加されたNSLayoutAnchorクラスを利用して表示させる方法です。

こちらは、NSConstraintよりも、かなり簡潔に書くことができます。

実際にコードを書いてみる!

NSLayoutConstraintクラスを利用して表示させたものと同じものを表示させるコードが以下になります。

高階さん 高階さん
結構短くなりましたねー!

AnchorはViewの端や寸法を表すので、Attributeとほぼ同じです。

引数について

Anchorの指定後にconstraintメソッドで制約を付与していますが、こちらのメソッドは制約の内容により引数が異なります

  1. 値を定数のみで指定したい場合は、equalToConstant: を、Anchorを指定したい場合は、equalTo: を指定する
  2. 指定したAnchorの値を2倍にしたり1/2にしたい場合は、equalTo: の後にmultiplier: の引数を追加
  3. 指定したAnchorの値の2倍+10ptなどの指定をしたい場合はmiltiplier: の後にさらにconstant: の引数を追加

最後に制約を生成した後にisActiveプロパティをtrueにしていますが、こちらは生成した制約をレイアウト構築時に反映させるかどうかを制御するフラグになります。

高階さん 高階さん
デフォルトではfalseとなっており、trueとしない限りは制約が反映されないため、必ず制約の生成時にtrueに変更してください〜!

最後に

NSLayoutConstraintはさておき、NSLayoutAnchorに関しては思っていたよりもシンプルで分かり易かったので、これならコードでのAutoLayoutも割と楽に書けそうですね。

ただAutoLayoutをさらに簡単にするライブラリがあるようなので、次の内容ではライブラリについてまとめていきたいと思います。

一緒に働いてくれる仲間を募集中!

ライトコードでは、仲間を募集しております!

ライトコードのモットーは「好きなことを仕事にするエンジニア集団」。そのため、あなたがやりたい仕事を全力で応援します。

どうせなら、好きなことを仕事にする方が人生は何倍も素晴らしいものになるはず!また、ライトコードはこれからの会社ですので、みんなで新しい事業や組織を作っていく楽しみもあります。

あなたからのご応募をお待ちしております!

ライトコードでは一緒に働いていただける方を募集しております!
お気軽にご応募ください。

採用情報はこちら

関連記事