Submit Search
How to measure UIView position on Native App
2 likes
2,846 views
D
Daisuke Yamashita
potatotips #18
Engineering
Read more
1 of 18
Download now
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
More Related Content
PDF
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
PDF
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
PDF
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
PDF
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
PDF
Alternative WebView
Shigeki Yamato
PDF
[potatotips #18] Android M Developer Preview & Wear 最新トピック
Kenichi Kambara
PDF
appcode_potatotips
Hiroki Kouchi
PDF
Isucon makers casual talks
Masahiro Nagano
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
Alternative WebView
Shigeki Yamato
[potatotips #18] Android M Developer Preview & Wear 最新トピック
Kenichi Kambara
appcode_potatotips
Hiroki Kouchi
Isucon makers casual talks
Masahiro Nagano
Viewers also liked
(20)
PDF
SQLiteDatabaseを無理矢理覗く
Takao Sumitomo
PDF
watchOS 2 新機能の細かい話
Shuichi Tsutsumi
PDF
AppStore申請を一式まるっと自動化する
Tomoki Hasegawa
PDF
殺しても死なないアプリ 〜Core Bluetooth の「状態の保存と復元」機能〜
Shuichi Tsutsumi
PDF
意外と苦労する、一部の画面のみ ランドスケープ表示を許容する方法 (potatotips 第17回)
将之 小野
PDF
Activity, Fragment, CustomView の使い分け - マッチョなActivityにさよならする方法 -
Yuki Anzai
PDF
Androidアプリ開発を楽にするために
Shuichi Takaya
PDF
Em synchrony について
Tomoya Kawanishi
PDF
山戸家の家庭内情報共有
Shigeki Yamato
PDF
既存プロジェクトにSwiftLintを導入した話
akatsuki174
PDF
ゲンバのSwift
Yuichi Adachi
PDF
Google Maps を使ったアプリを作ってみた
Shigeki Yamato
PDF
KotlinつかってQiitaクライアント作った時の話
shinnosuke kugimiya
PDF
3D touch for iOS
toyship
PPTX
DeviceOwnerのお話
まえすとろ
PDF
Activity Transition Animation #potatotips 33
bina1204 Hozuki
PDF
PUSH通知証明書作成ツールを作った
Tomoki Hasegawa
PDF
TestFlightみたいなのを自作する
Tomoki Hasegawa
PDF
バグのことは嫌いになってもXcodeのことは嫌いにならないでください。
Daisuke Yamashita
PDF
iOSアプリのライブラリ依存管理ツールとして Swift Package Managerを使うのは まだしばらく先かなと思った話
将之 小野
SQLiteDatabaseを無理矢理覗く
Takao Sumitomo
watchOS 2 新機能の細かい話
Shuichi Tsutsumi
AppStore申請を一式まるっと自動化する
Tomoki Hasegawa
殺しても死なないアプリ 〜Core Bluetooth の「状態の保存と復元」機能〜
Shuichi Tsutsumi
意外と苦労する、一部の画面のみ ランドスケープ表示を許容する方法 (potatotips 第17回)
将之 小野
Activity, Fragment, CustomView の使い分け - マッチョなActivityにさよならする方法 -
Yuki Anzai
Androidアプリ開発を楽にするために
Shuichi Takaya
Em synchrony について
Tomoya Kawanishi
山戸家の家庭内情報共有
Shigeki Yamato
既存プロジェクトにSwiftLintを導入した話
akatsuki174
ゲンバのSwift
Yuichi Adachi
Google Maps を使ったアプリを作ってみた
Shigeki Yamato
KotlinつかってQiitaクライアント作った時の話
shinnosuke kugimiya
3D touch for iOS
toyship
DeviceOwnerのお話
まえすとろ
Activity Transition Animation #potatotips 33
bina1204 Hozuki
PUSH通知証明書作成ツールを作った
Tomoki Hasegawa
TestFlightみたいなのを自作する
Tomoki Hasegawa
バグのことは嫌いになってもXcodeのことは嫌いにならないでください。
Daisuke Yamashita
iOSアプリのライブラリ依存管理ツールとして Swift Package Managerを使うのは まだしばらく先かなと思った話
将之 小野
Ad
More from Daisuke Yamashita
(17)
PDF
potatotips_77.pdf
Daisuke Yamashita
PDF
State management for ios development
Daisuke Yamashita
PDF
Static analysis for go lang
Daisuke Yamashita
PDF
Convert the notification feature to the notification microservice
Daisuke Yamashita
PDF
歯磨き.go #2
Daisuke Yamashita
PDF
歯磨き.go Go言語の静的解析とコード生成勉強会
Daisuke Yamashita
PDF
ライブラリを作って5年たったので振り返る
Daisuke Yamashita
PDF
Tensorflow
Daisuke Yamashita
PDF
Introduction of ios-chart in oss-labs#3
Daisuke Yamashita
PDF
About SnapKit - Open source lab -
Daisuke Yamashita
PDF
View Monitoring Tips
Daisuke Yamashita
PDF
Swift open source library - ViewMonitor -
Daisuke Yamashita
PDF
Let's Start Swift Open Source Activity.
Daisuke Yamashita
PDF
Unity Introduction from 2D shooting game.
Daisuke Yamashita
PDF
OpenCV on mobile
Daisuke Yamashita
PDF
Introduction of Swift from Machine Learning
Daisuke Yamashita
PDF
Introduction of Swift from Game Development
Daisuke Yamashita
potatotips_77.pdf
Daisuke Yamashita
State management for ios development
Daisuke Yamashita
Static analysis for go lang
Daisuke Yamashita
Convert the notification feature to the notification microservice
Daisuke Yamashita
歯磨き.go #2
Daisuke Yamashita
歯磨き.go Go言語の静的解析とコード生成勉強会
Daisuke Yamashita
ライブラリを作って5年たったので振り返る
Daisuke Yamashita
Tensorflow
Daisuke Yamashita
Introduction of ios-chart in oss-labs#3
Daisuke Yamashita
About SnapKit - Open source lab -
Daisuke Yamashita
View Monitoring Tips
Daisuke Yamashita
Swift open source library - ViewMonitor -
Daisuke Yamashita
Let's Start Swift Open Source Activity.
Daisuke Yamashita
Unity Introduction from 2D shooting game.
Daisuke Yamashita
OpenCV on mobile
Daisuke Yamashita
Introduction of Swift from Machine Learning
Daisuke Yamashita
Introduction of Swift from Game Development
Daisuke Yamashita
Ad
How to measure UIView position on Native App
1.
UIViewにまつわるあれこれ 株式会社BizReach プロダクトマーケティング本部 山下大輔
2.
自己紹介 ・山下大輔(やました だいすけ) ・2015年1月よりビズリーチのiOSエンジニア https://itunes.apple.com/jp/app/haikurasu-ren-cainokyaria/id972002786?mt=8
3.
開発初期段階でよくある風景 デザイナ エンジニア プロトタイプ レイアウト指示書 デザイン反映 比較 配布 テスター (チームメンバ) フィードバック
4.
ポテトチップスについて レイアウト指示書 実際の実装(テスト配布アプリ) 比較 60 60 8 こういう状況で問題点をみつけないといけない 14pt
#000000 8 ポテトチップスはしお味よりものりしお味 を選ぶ傾向にあります。コンソメ味も捨て がたいですがのりしお味が食べたい。 ポテトチップスについて ポテトチップスはしお味よりものりしお味 を選ぶ傾向にあります。コンソメ味も捨て がたいですがのりしお味が食べたい。 13pt #0000008 背景 #FFFFFF 位置がズレてる?サイズ合ってる?フォント合ってる?
5.
課題 デザイナさんが作成したレイアウト指示書を参考に 目視で確認 ->テスターのセンスに依存 ->微妙なレイアウト崩れを発見しにくい ->色の違いなどあっているか不安 ->フィードバックの質の低下
6.
テスト配布したアプリからでも 各View要素の詳細が確認できるようにしたい という野望
7.
・Debug view Hierarchy
from Xcode 6 view構造っぽいやつがでる viewの位置情報 Xcodeを使う
8.
コード上から view.recursiveDescription() objective-cのprivate method(recursiveDescription)を叩く ログを表示させる
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.
ライブラリとして作ってみる 方針 let window =
UIApplication.sharedApplication().keyWindow rootView = window?.rootViewController?.view ・表示中のアプリのrootViewを取得 ・取得したviewから再帰的に子viewを取得していく let childViews = view.subviews ・viewが取得できればあとは表示するだけ!
11.
DEMO
13.
view表示時に スイッチを追加
14.
観測できるview にマーカーが付く
15.
ポチポチすると viewの詳細が観れる!!
16.
func application(application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool { ViewMonitor.start() return true } 使い方
17.
まとめ ・できるようになったこと 感覚による確認 数値による確認
18.
おわりに ・以下で公開してますので気軽にご意見お願いします。スターほしい ViewMonitor https://github.com/daisuke0131/ViewMonitor ・勉強会主催してたりするのでご興味あったらご参加ください http://d-cube.connpass.com/ daisuke0131
Download