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

関連記事

I20160201-112159.jpg

ライブラリ管理ツールCarthageのCartfileの書き方

iOS(Cocoa)ライブラリ管理ツール「Carthage」で使用するCartfileの書き方を

記事を読む

20141227-125250.jpg

実践的な内容まで載っている!開発のプロが教える Swift標準ガイドブック

株式会社マイナビ様より「開発のプロが教える Swift標準ガイドブック」の見本紙を頂きました。早

記事を読む

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

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

記事を読む

I20151030-214417.jpg

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

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

記事を読む

I20160411-122213.jpg

Swift 2.2の変更点をまとめてみた

2016年3月22日、Xcode 7.3と共にSwift 2.2が正式にリリースされました。

記事を読む

I20151119-165939.jpg

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

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

記事を読む

I20160918-133158.jpg

StoryboardでChild View Controllerにデータを渡す方法(Xcode 8 & Swift 3)

Storyboardで、Child View Controllerにデータを渡す方法を紹介します

記事を読む

I20160228-162014.jpg

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

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

記事を読む

20141119-114354.jpg

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

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

記事を読む

I20160207-111059.jpg

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

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

記事を読む

I20170521-225453.jpg
東京駅八重洲口の「羊肉酒場 悟大」で網焼きジンギスカンを頂きました!

ゆうせいさんと株式会社 大庄さんからご招待頂き、悟大withサッポ

I20170514-165235.jpg
iPhoneと連携できる体重体組成計「Withings Body Cardio」を使ってます

ジムに通い始めて体脂肪率が落ち始めたのをキッカケに、iPhoneと

I20170507-155440.jpg
【派手髪】ハーレイクイン風の髪色に染めてもらいました

2016年10月20日、ハーレイクイン風の髪色に染めてもらいました

I20170504-173110.jpg
【メンズネイル】東京・新宿のネイルサロンでターコイズのホログラムネイルしてもらった

ネイルネタが1年分くらい溜まっているので、ちょっとずつ書いていこう

I20170502-010117.jpg
SNUGGのライトニングケーブルが耐久性高し。8ヶ月使ってますが断線の気配なし!

iPhoneの充電&転送ケーブルであるLightningケーブルっ

→もっと見る

PAGE TOP ↑