How to measure UIView position on Native App

UIViewにまつわるあれこれ株式会社BizReach

プロダクトマーケティング本部 山下大輔

自己紹介・山下大輔（やました　だいすけ） ・2015年１月よりビズリーチのiOSエンジニア

https://itunes.apple.com/jp/app/haikurasu-ren-cainokyaria/id972002786?mt=8

開発初期段階でよくある風景

デザイナ

エンジニア

プロトタイプ レイアウト指示書

デザイン反映

比較配布

テスター （チームメンバ）

フィードバック

ポテトチップスについて

レイアウト指示書 実際の実装（テスト配布アプリ）

比較

60×60

8

こういう状況で問題点をみつけないといけない

14pt #0000008

ポテトチップスはしお味よりものりしお味を選ぶ傾向にあります。コンソメ味も捨てがたいですがのりしお味が食べたい。

ポテトチップスについて

ポテトチップスはしお味よりものりしお味を選ぶ傾向にあります。コンソメ味も捨てがたいですがのりしお味が食べたい。

13pt #0000008

背景 #FFFFFF

位置がズレてる？サイズ合ってる？フォント合ってる？

課題デザイナさんが作成したレイアウト指示書を参考に目視で確認

->テスターのセンスに依存

->微妙なレイアウト崩れを発見しにくい

->色の違いなどあっているか不安

->フィードバックの質の低下

テスト配布したアプリからでも 各View要素の詳細が確認できるようにしたい

という野望

・Debug view Hierarchy from Xcode 6

view構造っぽいやつがでる

viewの位置情報

Xcodeを使う

コード上から

view.recursiveDescription()

objective-cのprivate method(recursiveDescription)を叩く

ログを表示させる

コード上から

view.recursiveDescription()

objective-cのprivate method(recursiveDescription)を叩く

ログを表示させる

<UILayoutContainerView: 0x7f8cf0d6a720; frame = (0 0; 375 667); autoresize = W+H; layer = <CALayer: 0x7f8cf0d41da0>> | <UITransitionView: 0x7f8cf0d6bff0; frame = (0 0; 375 667); clipsToBounds = YES; autoresize = W+H; layer = <CALayer: 0x7f8cf0d2a780>> | | <UIViewControllerWrapperView: 0x7f8cf0d6f6e0; frame = (0 0; 375 667); autoresize = W+H; layer = <CALayer: 0x7f8cf0d6c550>> | | | <UIView: 0x7f8cf0d70060; frame = (0 0; 375 667); autoresize = W+H; layer = <CALayer: 0x7f8cf0d6f100>> | | | | <UIImageView: 0x7f8cf0d703b0; frame = (16 20; 290 200); autoresize = RM+BM; userInteractionEnabled = NO; layer = <CALayer: 0x7f8cf0d6f0b0>> | | | | <UIButton: 0x7f8cf0d70e50; frame = (21 228; 46 30); opaque = NO; autoresize = RM+BM; layer = <CALayer: 0x7f8cf0d6f6c0>> | | | | | <UIButtonLabel: 0x7f8cf0f70160; frame = (0 6; 46 18); text = 'Button'; opaque = NO; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x7f8cf0f70320>> | | | | <UIButton: 0x7f8cf0d72020; frame = (21 266; 324 113); opaque = NO; autoresize = RM+BM; layer = <CALayer: 0x7f8cf0d72240>> | | | | | <UIButtonLabel: 0x7f8cf0f6e750; frame = (139 47.5; 46 18); text = 'Button'; opaque = NO; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x7f8cf0f6e910>> | | | | <UIButton: 0x7f8cf0d70170; frame = (21 258; 46 30); opaque = NO; autoresize = RM+BM; layer = <CALayer: 0x7f8cf0d70390>> | | | | | <UIButtonLabel: 0x7f8cf0f6bed0; frame = (0 6; 46 18); text = 'Button'; opaque = NO; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x7f8cf0f6c210>> | | | | <UIView: 0x7f8cf0d6a980; frame = (314 20; 51 143); autoresize = RM+BM; layer = <CALayer: 0x7f8cf0d70a90>> | | | | <_UILayoutGuide: 0x7f8cf0d64380; frame = (0 0; 0 20); hidden = YES; layer = <CALayer: 0x7f8cf0d64530>> | | | | <_UILayoutGuide: 0x7f8cf0d71070; frame = (0 618; 0 49); hidden = YES; layer = <CALayer: 0x7f8cf0d6c570>> | <UITabBar: 0x7f8cf0c35b10; frame = (0 618; 375 49); autoresize = W+TM; layer = <CALayer: 0x7f8cf0c31ae0>> | | <_UITabBarBackgroundView: 0x7f8cf0f77590; frame = (0 0; 375 49); autoresize = W; userInteractionEnabled = NO; layer = <CALayer: 0x7f8cf0f77910>> | | | <_UIBackdropView: 0x7f8cf0f77d90; frame = (0 0; 375 49); opaque = NO; autoresize = W+H; userInteractionEnabled = NO; layer = <_UIBackdropViewLayer: 0x7f8cf0d74a60>> | | | | <_UIBackdropEffectView: 0x7f8cf0d75c50; frame = (0 0; 375 49); clipsToBounds = YES; opaque = NO; autoresize = W+H; userInteractionEnabled = NO; animations = { filters.colorMatrix.inputColorMatrix=<CABasicAnimation: 0x7f8cf0c02ed0>; }; layer = <CABackdropLayer: 0x7f8cf0d76390>> | | | | <UIView: 0x7f8cf0d77200; frame = (0 0; 375 49); hidden = YES; opaque = NO; autoresize = W+H; userInteractionEnabled = NO; layer = <CALayer: 0x7f8cf0d77310>> | | <UITabBarButton: 0x7f8cf0f48890; frame = (2 1; 184 48); opaque = NO; layer = <CALayer: 0x7f8cf0f579a0>> | | | <UITabBarButtonLabel: 0x7f8cf0f4cc70; frame = (77 35; 29.5 12); text = 'Item 1'; opaque = NO; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x7f8cf0f47ef0>> | | <UITabBarButton: 0x7f8cf0d620d0; frame = (190 1; 183 48); opaque = NO; layer = <CALayer: 0x7f8cf0d61e50>> | | | <UITabBarButtonLabel: 0x7f8cf0d623c0; frame = (76.5 35; 29.5 12); text = 'Item 2'; opaque = NO; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x7f8cf0d57560>> | | <UIImageView: 0x7f8cf0d788d0; frame = (0 -0.5; 375 0.5); autoresize = W; userInteractionEnabled = NO; layer = <CALayer: 0x7f8cf0d78380>>

ライブラリとして作ってみる

方針

let window = UIApplication.sharedApplication().keyWindow rootView = window?.rootViewController?.view

・表示中のアプリのrootViewを取得

・取得したviewから再帰的に子viewを取得していく

let childViews = view.subviews

・viewが取得できればあとは表示するだけ！

DEMO

view表示時に スイッチを追加

観測できるview にマーカーが付く

ポチポチすると viewの詳細が観れる！！

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool { ViewMonitor.start() return true }

使い方

まとめ・できるようになったこと

感覚による確認 数値による確認

おわりに・以下で公開してますので気軽にご意見お願いします。スターほしい ViewMonitor https://github.com/daisuke0131/ViewMonitor ・勉強会主催してたりするのでご興味あったらご参加ください http://d-cube.connpass.com/

daisuke0131