Auto Layoutをコードで記述してビューを等間隔に並べる【Swift】

公開日: : 最終更新日:2016/02/10 iPhoneアプリ開発

20150106-142403.jpg

Auto Layoutをコードで記述して、ビューを等間隔に並べる方法について紹介します。ちなみにコードはSwiftで記述しています。

    

スポンサード リンク

ビューを生成する

等間隔に並べる対象となるビューを生成します。また、ビューの隙間に配置するスペーサーとしてのビューも生成します。本来はスペーサービューは見えないように白色などに設定しますが、今回は動作がよく分かるようにライトグレーに設定しています。

var redView = UIView()
redView.backgroundColor = UIColor.redColor()

var greenView = UIView()
greenView.backgroundColor = UIColor.greenColor()

var blueView = UIView()
blueView.backgroundColor = UIColor.blueColor()

var spacerView1 = UIView()
spacerView1.backgroundColor = UIColor(white: 7.0/8.0, alpha: 1.0)
        
var spacerView2 = UIView()
spacerView2.backgroundColor = UIColor(white: 7.0/8.0, alpha: 1.0)

for aView in [redView, greenView, blueView, spacerView1, spacerView2] {
    view.addSubview(aView)
}

    

setTranslatesAutoresizingMaskIntoConstraintsをfalseに設定

このままだとNSAutoresizingMaskLayoutConstraintというものが自動で生成されてしまうので、setTranslatesAutoresizingMaskIntoConstraintsメソッドを呼び出してfalseに設定します。

for aView in [view, redView, greenView, blueView, spacerView1, spacerView2] {
    aView.setTranslatesAutoresizingMaskIntoConstraints(false)
}

    

ビューの辞書と定数の辞書を作成

制約を作る際に必要となるビューの辞書と定数の辞書を作成します。これらは後ほどVisual Formatの中で使用します。

let viewsDictionary = [
    "redView":redView,
    "greenView":greenView,
    "blueView":blueView,
    "spacerView1":spacerView1,
    "spacerView2":spacerView2,
    "topLayoutGuide":topLayoutGuide
]

let metricsDictionary = ["margin":20, "viewWidth":80]

    

赤いビュー(一番左のビュー)の縦位置を決める制約を作成

20150106-150100.jpg

まずは、赤いビュー(一番左のビュー)の縦位置を決める制約を作成します。ここではtopLayoutGuideから12ポイント離した位置に赤いビューが配置されるようにします。

view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
    "V:[topLayoutGuide]-12-[redView]",
    options: NSLayoutFormatOptions(0),
    metrics: nil,
    views: viewsDictionary))

    

横方向に等間隔に配置する制約を作成

次に、横方向に等間隔に配置するための制約を作成します。Visual Formatを使って、以下の制約をまとめて生成します。

  • 左から「赤いビュー」「スペーサー1」「緑のビュー」「スペーサー2」「青いビュー」の順に並ぶ
  • 赤いビューの左側のマージンがmargin(20ポイント)
  • 青いビューの右側のマージンがmargin(20ポイント)
  • 赤いビューの幅がviewWidth(80ポイント)
  • 緑のビューの幅がviewWidth(80ポイント)
  • 青いビューの幅がviewWidth(80ポイント)
  • 2つ目のスペーサーの幅が、1つ目のスペーサーの幅と同じ
  • 赤いビュー・緑のビュー・青いビューの上辺が同じ位置となる(optionsの.AlignAllTop指定により)

スペーサーの幅を固定で指定していないので、画面サイズが広がるにつれてスペーサーの幅が広がるようになります。

view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(
    "|-margin-[redView(==viewWidth)][spacerView1][greenView(==viewWidth)][spacerView2(==spacerView1)][blueView(==viewWidth)]-margin-|",
    options: .AlignAllTop,
    metrics: metricsDictionary,
    views: viewsDictionary))

    

すべてのビューの高さを指定する制約を作成

最後に、すべてのビューの高さを指定する制約を作成しています。ここでは高さを80ポイントに指定しています。

  • 赤いビューの高さが80ポイント
  • 緑のビューの高さが80ポイント
  • 青いビューの高さが80ポイント
  • スペーサー1の高さが80ポイント
  • スペーサー2の高さが80ポイント
for view in [redView, spacerView1, greenView, spacerView2, blueView] {
    view.addConstraint(NSLayoutConstraint(
        item: view,
        attribute: .Height,
        relatedBy: .Equal,
        toItem: nil,
        attribute: .Height,
        multiplier: 0.0,
        constant: 80))
}

    

実行結果

実行結果は以下の通りです。

20150106-145527.jpg

複数デバイスのポートレートとランドスケープで、複数のビューが等間隔に配置されるようになりました。

    

ソースコード

今回解説に使ったソースコードはここに置いておきます → gist:a8b17e7177f5c26ad504

    

@akio0911はこう思った。

コードで制約を作ってみるとAuto Layoutに対する理解が深まるので、ぜひ試してみてください!

    

ちなみにAuto Layoutの仕組みに関しては、「UIKit徹底解説 iOSユーザーインターフェイスの開発[Kindle版]」がとても参考になります。

    

また、ストーリーボードやxibファイル上で制約を設定する操作については、Xcode 5 徹底解説 for iOS/OS Xがとても詳しいです。

この記事が気に入ったら「いいね!」しよう

follow us in feedly

Feedlyで最新記事を購読

Twitterで更新情報をゲット!

LINEでご感想・ご要望お送りください!
(スマホでLINEを起動 > 友だち追加 > QRコード)

関連記事

20141210-164612.jpg

【Swift】Generated Header内にSwiftクラスの定義が記述されない場合の確認事項【Xcode6】

Swiftで書いたクラスをObjective-Cで使う際には、「Generated Header

記事を読む

I20160217-170931.jpg

2016年2月15日以降、Missing iOS Distribution Signing identity for XXX というエラーが出た場合の解決方法

2016年2月15日以降、AppStoreへの申請やipaファイルのエクスポートで「Missin

記事を読む

I20150808-104713.jpg

【Xcode】シミュレーターリストの表示がおかしくなった時の解決方法

Xcodeのシミュレーターリストの表示が、上のスクリーンショットのようにおかしくなってしまっ

記事を読む

20160730-172416.jpg

Auto Layoutで非表示にした部分を詰める(トルツメ)する方法

Auto Layoutを使って非表示にしたコントロールの部分を詰める(トルツメ)方法を説明します

記事を読む

20140901-120049

デザイン初心者な僕がデザイナーさんにそこそこ褒められるアプリアイコンを作った方法

デザイン初心者の僕がアプリアイコンを作ったら、本職のデザイナーさんにそこそこ褒められるという嬉しい体

記事を読む

20140724-103334.jpg

iPhoneアプリ開発にオススメの本10選(2014年7月版)

@akio0911です。2013年12月に「レベル・目的別!iPhoneアプリ開発おすすめ本

記事を読む

I20151030-214417.jpg

【開発本】SpriteKitの入門書籍「iPhoneのゲームアプリをつくろう!」

SwiftとSpriteKitでiPhoneゲームアプリを開発するための入門書「iPhone

記事を読む

20160802-232454.jpg

【Xcode 7】メソッドがどこから呼びだされているかを調べる方法

Xcode 7で、メソッドがどこから呼び出されているのか調べる方法を紹介します!     方法

記事を読む

I20160525-233821.jpg

SwiftBondを使ってみた。observeやObservableの使い方など

Swiftバインディングフレームワークである「SwiftBond」を使ってみました!

記事を読む

I20160418-235604.jpg

XcodeのStoryboardで部品を選択しやすくする2つの方法

ストーリーボード上で部品が入り組んでくると選択しづらくなってきますが、そんな状況でも部品を選択し

記事を読む

【Mac】macOSのメール(Mail.app)でGmailをサクサク快適に使う方法

macOSに搭載されているメールアプリ、いわゆるMail.ap

【メンズネイル】新宿区大久保のネイルサロンで紫とピンクのネイルにしてもらった

2016年11月12日、東京都新宿区大久保にあるネイルサロン「

[Xcode][Swift]ボタンなどの同時タップを禁止する

iOSで、ボタンなどの同時タップを禁止する方法を紹介します。

【HomeKit】家の照明をSiriで制御できるようにしてみた

Apple製品と家電を連携するシステム「HomeKit(ホーム

【メンズネイル】新宿区大久保のサロンでターコイズとピンクのメタルネイルにしてもらった

2016年10月22日、いつもお世話になっているネイルサロン「

→もっと見る

PAGE TOP ↑