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

公開日: : iPhoneアプリ開発

20141224-231137.jpg

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

    

スポンサード リンク

画面部品を配置して、制約を追加する

まずはストーリーボード上にて、画面部品を配置して、制約を追加します。

    

20141224-224938.jpg

例として、上のピンクのビューは、左・上・右に張り付くように制約を追加します。

    

20141224-225311.jpg

下の緑のビューは、左・下・右に張り付き、高さはピンクのビューと同じ、そしてピンクのビューとの間に24ptの隙間を空けるように制約を追加します。

    

20141224-225639.jpg

この状態でプレビューを確認するとこのようになります。ピンクと緑のビューの隙間は常に一定となりますね。

では例として、iPhone 3.5-inchの時だけ、ピンクと緑のビューの隙間が半分となるようにしてみましょう。

    

隙間の制約のアウトレットを作成する

20141224-230404.jpg

まずは隙間の制約のアウトレットを作成します。隙間の制約をクリックして選択し、Ctrlを押しながらドラッグします。ラベルやテキストフィールドなどのアウトレットの作成方法と同じですね。

    

後は、以下のようにアウトレットを通じて制約の数値(constant)を変更するコードを追加します。

override func viewDidLoad() {
    super.viewDidLoad()
    
    let iPhone5Height:CGFloat = 568
    
    if self.view.bounds.size.height < iPhone5Height {
        verticalSpace.constant /= 2
    }
}

    

以下がその実行結果となります。

20141224-231137.jpg

iPhone 4sの時は、隙間が半分になっているのが分かると思います。

    

@akio0911はこう思った。

今回紹介した方法を使うと、Size Classに比べて制約をより細かく制御できると思います。画面サイズごとにレイアウトを細かく制御したい時にぜひ活用してみて下さい。

ちなみに、Auto Layoutについて理解を深めたい場合は以下の書籍がオススメです。

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

follow us in feedly

Feedlyで最新記事を購読

Twitterで更新情報をゲット!

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

関連記事

I20160201-112159.jpg

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

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

記事を読む

20150409-103620.jpg

描いたベクターグラフィックをSwift/Objective-Cコードに変換できる「Paint Code 2」

引用元 : PaintCode ベクターグラフィックを描き、それを描画するためのSwift

記事を読む

I20160126-141427.jpg

Swift 2でtoIntが使えない!unavailableエラーが出た時の対処方法

Swift 2でtoInt()を使うと、 'toInt()' is unavailable:

記事を読む

20160730-172416.jpg

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

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

記事を読む

20141027-113224.jpg

【Swift】「詳解 Objective-C 2.0 第3版」の著者による「詳解Swift」が予約受付中!

「詳解 Objective-C 2.0 第3版」の筆者「荻原 剛志」さんによる新しい技術書「詳細

記事を読む

20140901-120049

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

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

記事を読む

20160811-173801.jpg

【iOS】特定のセルがUITableViewの表示領域内に収まっているかどうかを調べる

特定のセルがUITableViewの表示領域内に収まっているかどうかを調べる方法を紹介します。


記事を読む

20140905-180905.jpg

英語苦手な人がSwiftを学びたいならこの本を読むといいよ!

アップルのWWDC2014で発表された、iOSおよびOS Xのためのプログラミング言語「Swift」

記事を読む

20150327-131839.jpg

【Apple Watchアプリ】ボタン内の文字の先頭に画像を入れる方法【WatchKit】

Apple Watch向けのアプリを作るためのフレームワーク「WatchKit」。そのWatch

記事を読む

20150410-122409.jpg

複数バージョンのXcodeを共存してMacにインストールする方法

いよいよXcode 6.3が正式にリリースされましたね。 今回は複数バージョンのXco

記事を読む

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 ↑