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

関連記事

I20151126-170621.jpg

Swift 2のprintで改行しない方法

Swift 1時代はprintlnで改行あり、printで改行なしでしたが、Swift 2ではp

記事を読む

20160420-180135.jpg

【RxSwift】2つのUITextFieldに入力された数値の合計をUILabelに表示する

そろそろRxSwiftについて学び始めよう!ということで、まずは2つのUITex

記事を読む

I20160513-010707.jpg

Swiftで計算型プロパティをネストさせてみる

Swiftの計算型プロパティ(Computed property、コンピューテッドプロパティ)を

記事を読む

20160509-200435

【Auto Layout】readableContentGuideを使わずに最大幅を定義する

iOS 9からUIViewにreadableContentGuideが追加されましたが、re

記事を読む

20150327-131839.jpg

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

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

記事を読む

I20150714-010114.jpg

【Swift】Objective-Cで書いたクラスをメソッド単位で少しずつSwiftへ移行する方法

Objective-Cで作った既存のアプリをSwiftで書き直したいと思っているのですが、一

記事を読む

I20160525-233821.jpg

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

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

記事を読む

I20151107-111928.jpg

Swift 2で要求バージョンの指定・実行環境バージョンの確認を行う(#availableと@available)

Swift 2で追加された#available, @availableの使い方についてメモしてお

記事を読む

I20160208-152320.jpg

【Swift】privateなタイプメソッド作るなら、privateな関数でも良いかもと思った

structとかclassの中で、ちょっとした処理を担当させるprivateなタイプ

記事を読む

20150410-122409.jpg

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

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

記事を読む

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 ↑