LoginSignup
6
5

More than 5 years have passed since last update.

[Swift4] AutoLayoutのMultiplierを超簡単に動的に切り替える!

Last updated at Posted at 2018-11-01

概要

こんにちは!
最近iPhoneX, iPhoneXS Maxなどいろんな機種が出てきて, 機種対応なかなかに苦戦してませんか?
特に, iPhoneSEのように解像度の低い端末だけ特別対応しなきゃいけない場面, けっこうあると思うんですよね.

そんなときに表題の通りなんですが, 例えばある要素の横幅をAutolayoutのConstraintでMultiplierを指定して決めている場合
iPhoneSEだけ縦幅足りなくてパツパツになっちゃうから, 他の端末よりも画面に対する縦幅の比を少し小さくしたい!
なんてことないです? (僕はわりとあります)

じゃあSwiftの中でMultiplier変えてやるか!
と思っても, 実はMultiplierってgetOnly(取得のみ可, 書き換え不可)なので

sample.swift
if deviseType = .iPhoneSE { // ここの条件は適当です笑
  sampleHeight.multiplier = 10:21
}

みたいな書き方はできないわけですよ...

じゃあNSLayoutConstraintのextention書くかと言われると, そこまでじゃないなー, となることもあるわけですね.
そんなときに, わりとお手軽にできる方法をご紹介いたします.

まずはAutolayoutの設定をしましょー

まず, メインとなるConstraintを定義します.
スクリーンショット 2018-11-01 19.05.10.png
次に, iPhoneSEなどの個別対応用Constraintを用意します.
スクリーンショット 2018-11-01 19.05.22.png
画像の違いは2つあって
1. Multiplierの中身
2. installedのチェック
です.

installedにチェックが入っていないと, そのConstraintはアクティブじゃない状態になりますので, デフォルトでは1枚目の画像のConstraintが使用されるわけです.
あとは, Swift内で2つのConstraintのアクティブ・非アクティブを切り替えるだけですね!

あとはSwift側で使うConstraintを切り替えよう

NALayoutConstraintは

isActive = true
isActive = false

でアクティブ・非アクティブを切り替えられるのでこれを使いましょう.

sample.swift
if deviseType = .iPhoneSE { // ここの条件は適当です笑
  sampleHeight.isActive      = false
  sampleHeightForSE.isActive = true
}

これで, デバイスによってMultiplierを切り替えることができるようになります.
2つ以上のConstraintを用意してもっと細かく条件を分けることも可能ですね.

ただ, Multiplierを切り替える機会があまりにも多いようであればextention書いてメソッド使いましょうね笑

不明点や, もっといい方法あればコメントにてよろしくお願いします!

6
5
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
5