asky

主にAndroidやiOSの開発について綴っています。また、使っている好きなアプリや全く関係のない話はDiaryで書いていきたいです。

Xcode:Vary for Traitsの使い方 〜 基本編 〜

バイスによってUIをガラリと変えたい時に使える技が
Vary for Traits!!

以前、使う機会があったので習得しようと試してみましたが、
上手いこといかずに挫折していました。

数ヶ月が経ち、また使う機会ができたので
今度はと意気込み、無事にマスターできました♪

という事で、使い方の備忘録。


新しい画面を作った際にはデフォルトで
"Use Trait Variations"にチェックが入っているかと思います。

Xcode Vary for Traitsの使い方

ここにチェックが入っていれば、
ある規則でグルーピングした端末ごとでUIを作成することができます。

端末のグルーピングって?

xibやstoryboardの画面を開くと、
下の方に端末別の画像が表示されています。

Xcode Vary for Traitsの使い方

動画で変化を見てみましょう。

Xcode Vary for Traitsの使い方

現時点(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 縦 / 横向き】で
レイアウトを変えたいと思います。

Xcode Vary for Traitsの使い方

まずは【iPhone 縦向き】から指定してみましょう。

1. Vary for Traits:サイズを指定する
前述でグルーピングした表をみてみると、
iPhone×縦向きの場合 → wC hR
iPhone×横向きの場合 → wC hC
iPad×縦 / 横向き → wR hR
になります。

iPhone 8 Plusの横向きだけはwR hCになっていますが、
ここでは説明短縮のため省きます。

下画像の手順で、設定したいサイズを選択します。

Xcode Vary for Traitsの使い方

Xcode Vary for Traitsの使い方

Xcode Vary for Traitsの使い方

これでサイズを指定している状態なので、次の作業に移ります。

2. UIを整え、確定する
ここでの作業は、オブジェクトを配置して編集(色やAutoLayoutの設定など)し、
「UI決まったぞー!!」と思ったら、"Done Varying"をタップして確定します。

Xcode Vary for Traitsの使い方

一連の流れのGIF動画です٩( 'ω' )و

Xcode Vary for Traitsの使い方

動画の後半でも分かるように、
現時点では【iPhone 縦向き】以外を選択してUIを見ると、
何もない状態になっています。

では、まだ設定されていない【iPhone 横向き】、【iPad 縦 / 横向き】も
同じように設定していきます。

このサイズ別で行う繰り返し作業時のポイント!!

例えば、【iPhone 横向き】にした時、
iPhone 縦向き】で設定していたラベルがどこにも見当たらない!
という事に遭遇すると思います。

Xcode Vary for Traitsの使い方

よーく見てみると、ラベルはグレーアウトになっています。

Xcode Vary for Traitsの使い方

いや、私はこのラベルを使いたいんだ!!
そう思ったら、次の操作をします。

Xcode Vary for Traitsの使い方

では、これも一連の操作をGIF動画にしてみました。

Xcode Vary for Traitsの使い方

インストールした事で、ひょっこりとラベルが出現しました♪

iPadも設定してあげると、無事に完成です♪
(下画像はXcodeiPhone 8の縦横、iPad Pro 9.7の縦横をプレビュー表示してみました。)

Xcode Vary for Traitsの使い方

ちなみに、
Vary for Traitsを使うと何でもレイアウトを変えられる!
というわけではないんです。

あくまでもオブジェクトの位置関係や大きさを変えられます。
例えば、以下の事はできません。
ラベルのフォントカラーやフォントサイズ、テキスト内容、背景色etc... これらを変更した際には全てのサイズに反映されます。

(レアケースだとは思いますが)
もし、上記のような事をしたい場合は
指定したサイズにオブジェクトを追加しましょう!

余談

このブログにVary for Traitsについて全て書ききろうと思っていましたが、
基本編だけで壮大になってしまったので、
応用編(作成のコツ)は次回にまわしたいと思います。

ちなみに、応用編のモックアップはこんな感じにしようと思っています。

Xcode Vary for Traitsの使い方

次はiPhoneの縦と横でレイアウトを変える予定です。

「Vary for Traits」と聞いて頭に思い浮かぶのは、 ばりぃさんですね♪

ばりぃさんを調べてみると
好きなものが焼き鳥、お酒、甘いもの、ハラマキ、貯金、犬なんですね。

ハラマキ以外は話が合いそうです♪