fbpx
  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をさらに簡単にするライブラリがあるようなので、次の内容ではライブラリについてまとめていきたいと思います!

次の記事

一緒に働いてくれる仲間を募集しております!

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

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

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

採用情報はこちら

関連記事