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コード)

関連記事

20140818-141439.jpg

iPhoneアプリを作りたい開発初心者にまずはやってみて欲しい3つのこと

今日は、これからiPhoneアプリを作りたい開発初心者の方にやってもらいたいことを書いてみた

記事を読む

20150522-105524.jpg

【書籍】初心者にオススメな本!「これからはじめる Apple Watchアプリ開発入門」

Apple Watchは買いましたか?使ってますか?アプリを作ってみたくはないですか? という

記事を読む

I20150721-164252.jpg

【書籍】iPhoneアプリ開発の初心者にオススメの本「詳細! Swift iPhoneアプリ開発 入門ノート」

     Swift 1.1、Xcode 6.1、iOS 8.1に対応している書籍「詳

記事を読む

20141119-114354.jpg

【iOSアプリ開発】隙間時間で読んで学ぶのにオススメな入門本「はじめてのSwiftプログラミング」

「はじめてのSwiftプログラミング」という入門書が手頃なサイズで、持ち歩いてスキマ時間で読んで

記事を読む

20140916-130550

Swiftの列挙型、switch文、網羅性チェックが素晴らしい!

アップルの新プログラミング言語「Swift」をちょっとずついじってるんですが、列挙型とswitch文

記事を読む

20160802-232454.jpg

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

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

記事を読む

20141224-231137.jpg

【Swift】Auto Layoutで特定のデバイス・画面サイズの時だけ制約を変更する方法

Auto Layoutで、特定のデバイスや画面サイズの時だけ制約を変更する方法について紹介したい

記事を読む

I20160209-123839.jpg

【Swift】プロパティのsetとgetには異なるアクセス修飾子を指定できる

Swiftでは、プロパティのセッタ(set節)とゲッタ(get節)に異なるアクセス修飾子

記事を読む

I20160118-223109.jpg

Swift 2でシングルトンを初期化・呼び出しする方法

Swift 2でシングルトンを実装する方法について解説したいと思います! (※「シングルトンを

記事を読む

iPhoneアプリ開発の初心者にオススメな本はこれだ!iOS 7とXcode 5に対応!

僕が講師をしている初心者向けのiPhoneアプリ開発講座「アプリクリエイター道場」でも参考書とし

記事を読む

20170423-182541
良肌研究室のフェイスウォッシュとオールインワンジェルを使ってみた

株式会社ブラシナさんから、良肌研究室の商品をご提供頂いたので、

I20170228-002742.jpg
約3ヶ月で体脂肪率を6.2%も落とせたキッカケについて

(右上の赤枠内がダイエット開始前、左下の赤枠内が3ヶ月後の数値

I20161224-174949.jpg
「季節の野菜を直接配送!季節のスムージー」を買ってみた

「FiNCモール」で、「季節の野菜を直接配送!季節のスムージー」を

I20161002-152537.jpg
【メンズネイル】東京・新宿のネイルサロンでマットネイルしてもらった

2016年7月18日、東京・新宿のメンズOKなネイルサロン「Tot

I20160925-163452.jpg
タブバーアイコン非選択時の色を変更する方法【iOS 10】

UITabBarControllerで、タブバーアイコン非選択時の

→もっと見る

PAGE TOP ↑