Xcode:Vary for Traitsの使い方 〜 基本編 〜
デバイスによってUIをガラリと変えたい時に使える技が
Vary for Traits!!
以前、使う機会があったので習得しようと試してみましたが、
上手いこといかずに挫折していました。
数ヶ月が経ち、また使う機会ができたので
今度はと意気込み、無事にマスターできました♪
という事で、使い方の備忘録。
新しい画面を作った際にはデフォルトで
"Use Trait Variations"にチェックが入っているかと思います。
ここにチェックが入っていれば、
ある規則でグルーピングした端末ごとでUIを作成することができます。
端末のグルーピングって?
xibやstoryboardの画面を開くと、
下の方に端末別の画像が表示されています。
動画で変化を見てみましょう。
現時点(Xocde:Version 9.4.1)では、以下のグループ分けとなります。
サイズ |
端末 |
||
w (width) |
h (height) |
向き |
種類 |
C |
R |
縦 |
・iPhone 8 Plus ・iPhone X ・iPhone 8 ・iPhone SE ・iPhone 4s |
R |
C |
横 |
・iPhone 8 Plus |
C |
C |
横 |
・iPhone X ・iPhone 8 ・iPhone SE ・iPhone 4s |
R |
R |
縦 / 横 |
・iPad Pro 12.9″ ・iPad Pro 10.5″ ・iPad Pro 9.7″ |
※ サイズ:C(=Compact)、R(=Regular)
※iPadのサイズの種類には他にもSplit Viewがありますが、今回はFull Screenのみ記載
基本編
手順としては、
1. Vary for Traits:サイズを指定する
2. UIを整え、確定する
をサイズ毎に繰り返します。
では、基本編として下の画像のように
【iPhone 縦向き】、【iPhone 横向き】、【iPad 縦 / 横向き】で
レイアウトを変えたいと思います。
まずは【iPhone 縦向き】から指定してみましょう。
1. Vary for Traits:サイズを指定する
前述でグルーピングした表をみてみると、
iPhone×縦向きの場合 → wC hR
iPhone×横向きの場合 → wC hC
iPad×縦 / 横向き → wR hR
になります。
iPhone 8 Plusの横向きだけはwR hCになっていますが、
ここでは説明短縮のため省きます。
下画像の手順で、設定したいサイズを選択します。
これでサイズを指定している状態なので、次の作業に移ります。
2. UIを整え、確定する
ここでの作業は、オブジェクトを配置して編集(色やAutoLayoutの設定など)し、
「UI決まったぞー!!」と思ったら、"Done Varying"をタップして確定します。
一連の流れのGIF動画です٩( 'ω' )و
動画の後半でも分かるように、
現時点では【iPhone 縦向き】以外を選択してUIを見ると、
何もない状態になっています。
では、まだ設定されていない【iPhone 横向き】、【iPad 縦 / 横向き】も
同じように設定していきます。
このサイズ別で行う繰り返し作業時のポイント!!
例えば、【iPhone 横向き】にした時、
【iPhone 縦向き】で設定していたラベルがどこにも見当たらない!
という事に遭遇すると思います。
よーく見てみると、ラベルはグレーアウトになっています。
いや、私はこのラベルを使いたいんだ!!
そう思ったら、次の操作をします。
では、これも一連の操作をGIF動画にしてみました。
インストールした事で、ひょっこりとラベルが出現しました♪
iPadも設定してあげると、無事に完成です♪
(下画像はXcodeでiPhone 8の縦横、iPad Pro 9.7の縦横をプレビュー表示してみました。)
ちなみに、
Vary for Traitsを使うと何でもレイアウトを変えられる!
というわけではないんです。
あくまでもオブジェクトの位置関係や大きさを変えられます。
例えば、以下の事はできません。
ラベルのフォントカラーやフォントサイズ、テキスト内容、背景色etc...
これらを変更した際には全てのサイズに反映されます。
(レアケースだとは思いますが)
もし、上記のような事をしたい場合は
指定したサイズにオブジェクトを追加しましょう!
余談
このブログにVary for Traitsについて全て書ききろうと思っていましたが、
基本編だけで壮大になってしまったので、
応用編(作成のコツ)は次回にまわしたいと思います。
ちなみに、応用編のモックアップはこんな感じにしようと思っています。
次はiPhoneの縦と横でレイアウトを変える予定です。
「Vary for Traits」と聞いて頭に思い浮かぶのは、 ばりぃさんですね♪
ばりぃさんを調べてみると
好きなものが焼き鳥、お酒、甘いもの、ハラマキ、貯金、犬なんですね。
ハラマキ以外は話が合いそうです♪