Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to measure UIView position on Native App

2,450 views

Published on

potatotips #18

Published in: Engineering
  • Be the first to comment

How to measure UIView position on Native App

  1. 1. UIViewにまつわるあれこれ 株式会社BizReach プロダクトマーケティング本部 山下大輔
  2. 2. 自己紹介 ・山下大輔(やました だいすけ) ・2015年1月よりビズリーチのiOSエンジニア https://itunes.apple.com/jp/app/haikurasu-ren-cainokyaria/id972002786?mt=8
  3. 3. 開発初期段階でよくある風景 デザイナ エンジニア プロトタイプ レイアウト指示書 デザイン反映 比較 配布 テスター (チームメンバ) フィードバック
  4. 4. ポテトチップスについて レイアウト指示書 実際の実装(テスト配布アプリ) 比較 60 60 8 こういう状況で問題点をみつけないといけない 14pt #000000 8 ポテトチップスはしお味よりものりしお味 を選ぶ傾向にあります。コンソメ味も捨て がたいですがのりしお味が食べたい。 ポテトチップスについて ポテトチップスはしお味よりものりしお味 を選ぶ傾向にあります。コンソメ味も捨て がたいですがのりしお味が食べたい。 13pt #0000008 背景 #FFFFFF 位置がズレてる?サイズ合ってる?フォント合ってる?
  5. 5. 課題 デザイナさんが作成したレイアウト指示書を参考に 目視で確認 ->テスターのセンスに依存 ->微妙なレイアウト崩れを発見しにくい ->色の違いなどあっているか不安 ->フィードバックの質の低下
  6. 6. テスト配布したアプリからでも 各View要素の詳細が確認できるようにしたい という野望
  7. 7. ・Debug view Hierarchy from Xcode 6 view構造っぽいやつがでる viewの位置情報 Xcodeを使う
  8. 8. コード上から view.recursiveDescription() objective-cのprivate method(recursiveDescription)を叩く ログを表示させる
  9. 9. コード上から 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>>
  10. 10. ライブラリとして作ってみる 方針 let window = UIApplication.sharedApplication().keyWindow rootView = window?.rootViewController?.view ・表示中のアプリのrootViewを取得 ・取得したviewから再帰的に子viewを取得していく let childViews = view.subviews ・viewが取得できればあとは表示するだけ!
  11. 11. DEMO
  12. 12. view表示時に スイッチを追加
  13. 13. 観測できるview にマーカーが付く
  14. 14. ポチポチすると viewの詳細が観れる!!
  15. 15. func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool { ViewMonitor.start() return true } 使い方
  16. 16. まとめ ・できるようになったこと 感覚による確認 数値による確認
  17. 17. おわりに ・以下で公開してますので気軽にご意見お願いします。スターほしい ViewMonitor https://github.com/daisuke0131/ViewMonitor ・勉強会主催してたりするのでご興味あったらご参加ください http://d-cube.connpass.com/ daisuke0131

×