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

関連記事

I20160228-162014.jpg

詳解 Swift 改訂版のKindle版が発売。リフローに対応!

今日気付いたんですが、「詳解 Swift 改訂版」のKindle版がいつの間にか発売されていまし

記事を読む

I20151119-165939.jpg

Swift 2.1に対応した本「詳解 Swift 改訂版」が出るぞ!

Swiftの文法に関する解説書の定番「詳解 Swift」の、Swift2.1に対応した改訂版「詳

記事を読む

I20151030-214417.jpg

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

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

記事を読む

I20160207-111059.jpg

【Swift】Xcodeで型推論された変数や定数の型を調べる方法

Swiftには、そのデータ型が明らかであれば型を明記する必要が無い「型推論」という機能があります

記事を読む

iPhoneゲームを簡単に開発したいならこの本がオススメ!「Sprite Kit iPhone 2Dゲームプログラミング」

iPhoneゲームアプリを簡単に開発したいなら「Sprite Kit iPhone 2Dゲームプ

記事を読む

I20150909-225806.jpg

Functional Programming in Swiftを読むために、すごいH本を読み終えた感想

「Functional Programming in Swift」という本がありまして、

記事を読む

20150116-114410.jpg

プログラミング未経験者がSwiftの文法を学ぶのにオススメな本!「たのしいSwiftプログラミング」

楽しみにしていたSwiftの入門書「たのしいSwiftプログラミング」を読み終わったので、レビュ

記事を読む

I20160409-211651.jpg

Xcode 7.3の新機能についてまとめてみた

2016年3月22日にXcode 7.3がリリースされましたが、自分が知らない機能があるかもしれ

記事を読む

20140818-141439.jpg

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

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

記事を読む

20160508-170745.jpg

SwiftTaskで失敗したタスクによって異なるエラー処理を行う方法

SwiftTaskで複数のタスクを.successでチェーンさせ、失敗したタスクによって

記事を読む

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で、タブバーアイコン非選択時の

I20160924-123726.jpg
iPad Pro 9.7インチ SIMフリーモデルにFREETELのSIMを入れて使ってみた

今までiPad miniで使っていたFREETELのSIM

→もっと見る

PAGE TOP ↑