1. HOME
  2. ブログ
  3. IT技術
  4. 【Swift4】AutoLayoutをコードで実装してみた!

【Swift4】AutoLayoutをコードで実装してみた!

AutoLayoutの実装方法について簡単にまとめてみた

高階さん 高階さん

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

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

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

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

開発環境

MacOS10.14
Swift4.2
Xcode10.1
Cocoapods1.6.1
SnapKit4.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 をさらに簡単にするライブラリがあるようなので、次の内容ではライブラリについてまとめていきたいと思います!

次の記事

こちらの記事もオススメ!

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア