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

(株)ライトコードは、WEB・アプリ・ゲーム開発に強い「好きを仕事にするエンジニア集団」です。
iOSアプリ開発のご依頼・お見積もりはこちらまでお願いします。
また、iOSエンジニアを積極採用中です!詳しくはこちらをご覧ください。

※現在、多数のお問合せを頂いており、返信に、多少お時間を頂く場合がございます。

次の記事

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

ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

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

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

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

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

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

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

採用情報はこちら

関連記事

採用情報

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

バックエンドエンジニア

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

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

\ 世界はお前の手の中に・・・ /

モバイルエンジニア

\ サービスの守り神! /

インフラエンジニア