Upload
daisuke-yamashita
View
1.223
Download
4
Embed Size (px)
Citation preview
UIViewにまつわるあれこれ株式会社BizReach
プロダクトマーケティング本部 山下大輔
自己紹介・山下大輔(やました だいすけ) ・2015年1月よりビズリーチの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