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

公開日: : iOSアプリ開発

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について理解を深めたい場合は以下の書籍がオススメです。

この記事を書いた人
あきお(@akio0911
iOSエンジニア、ブロガー。「プログラミングで人々を幸せに」をテーマに活動中。著書に「iPhoneアプリ開発レシピ」「cocos2d for iPhoneレッスンノート」など。東京・大阪にてアプリ開発講座「アプリクリエイター道場」を主催。 MAMORIO株式会社 技術顧問(インタビュー記事)、VISITS Technologies株式会社 技術顧問(インタビュー記事)。ブログ「卵は世界である」を運営。

関連記事

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

follow us in feedly

Feedlyで最新記事を購読

Twitterで更新情報をゲット!

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

プログラミング未経験者向けのプログラミング入門連載記事を始めます

こんにちは、@akio0911です。 これからプログラミング未経

【RxSwift】BehaviorRelayとPublishRelayについてまとめてみた

こんにちは、@akio0911です。今回はRxSwiftのBe

【RxSwift】materialize, dematealizeを使ってみた

@toshi0383さんに教えていただいた、RxSwiftのm

【RxSwift】ストリームのcompletedをつぶす(消し去る)方法

RxSwiftで元々のストリームからcompletedをつぶす

【RxSwift】completedかerrorが流れてきたらsubscribeはdisposeされる

RxSwiftにおいて、completedかerrorが流れて

→もっと見る

PAGE TOP ↑