Layout Debug with Reveal.app

Profile• 宇佐見 公輔

• フェンリル株式会社

• iOS アプリ開発

REVEAL(http://revealapp.com/)

Layout Debug for iOS

Xcode との違い• Reveal は break しなくてもレイアウト確認できる

• Live Edit : Reveal はその場で値（frame や color など）を書き換えることができる

For Auto Layout

Auto Layout inspection

Auto Layout の Live Edit• 各 Constraint に対して・・・

• Constant 値の変更

• Active / NonActive 切り替え

• コードでできることと同じ

例• デザイナーさんからのレイアウト指示だと iPhone 4S で見切れる

• よくある。

• デザイナーさんは iPhone 4S の表示にこだわりがない

• 僕「じゃあこっちでマージンとか調整しますね」

（余談）• デザイナーさんは iPhone 4S を切りたいとよく言う

• うん、わかる。

• ただ、iPad の iPhone 互換表示も同じ縦横比

• iPad でボタンがはみ出て押せない → リジェクト

調整• iPhone 4S + Reveal で目的の画面を表示

• マージンの Constant を変更して良さそうな値を探す

• この作業が Reveal だとわりと楽で良い

実装• 例 : マージンが通常 30 pt / 4S だけ 15 pt

• マージン >= 15 pt の制約をつける

• マージン == 30 pt の制約をつける（優先度下げる）

• できたら Reveal で再確認

補足• 4S 向けにガチガチの値を指定するというのはなんか違う・・・

• 実際のちょうどの値より少し緩めの制約にしたほうが精神的に落ち着く

• 「ここは最低限これだけのスペースがないとレイアウト的におかしい」という風に、意味的につじつまが合うような制約にする

Tips : Reveal 導入

Tips : Reveal 導入• Reveal を使うには、iOS アプリに Reveal ライブラリをリンクする必要がある（CocoaPods を利用できる）

• LLDB でロード : Integrating Reveal without modifying your Xcode project - Itty Bitty Labs

iOS シミュレータの場合• 事前にリンクしてなくても LLDB でロードできるexpr (void*)dlopen( "/Applications/Reveal.app/Contents/SharedSupport/iOS-Libraries/libReveal.dylib", 0x2);

expr [(NSNotificationCenter*)[NSNotificationCenter defaultCenter] postNotificationName:@"IBARevealRequestStart" object:nil];

iOS 実機の場合• 事前に Copy Resources が必要だけど、Link は不要expr (void*)dlopen(

[(NSString*)[(NSBundle*)[NSBundle mainBundle]

pathForResource:@"libReveal" ofType:@"dylib"] cStringUsingEncoding:0x4],

0x2);

expr [(NSNotificationCenter*)[NSNotificationCenter defaultCenter]

postNotificationName:@"IBARevealRequestStart" object:nil];

AppCode integration• AppCode なら、Debug Condigurations で Inject

Reveal library on launch を有効にしておけば OK

• おそらく前述の方法を自動的にやってくれている

Have a happy REVEAL life!