Upgrade to Pro — share decks privately, control downloads, hide ads and more …

詳解 RelativeLayoutの内部実装

Ad449f3f4e595ade283a30c4f66010be?s=47 HiroYUKI Seto
February 03, 2018
Technology
0
2.8k

詳解 RelativeLayoutの内部実装

2018/2/9
DroidKaigi 2018 DAY02 room1 10:30~
発表の付録1

Ad449f3f4e595ade283a30c4f66010be?s=128

HiroYUKI Seto

February 03, 2018
Tweet

More Decks by HiroYUKI Seto

See All by HiroYUKI Seto
Androidアプリの 安全なリファクタリングを行うパターン集
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
1
4.6k
UI TestやVisual Regression Testを コスパ良くやる
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
3
1.4k
事業支援というお仕事
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
0
310
MDCの内部実装から学ぶ
表現力の高いViewの作り方
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
5
1.5k
CoordinatorLayoutのBehaviorを使い倒す
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
1
230
Jetpack Compose
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
2
520
UI改善に繋がるエンジニアの立ち回り
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
2
3.9k
MDCのButtonのCorner Family
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
1
120
MDCのBottomAppBarのShadowの実現方法
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
0
690

Other Decks in Technology

See All in Technology
疎ベクトル検索と密ベクトル検索: 第68回 Machine Learning 15minutes! Broadcast
B773daeab435018f26c39bb4e964804a?s=48 keyakkie
1
240
OpenShiftのサポートを始めるぞ！高頻度で更新されるOSSを効果的にキャッチアップする仕組みを考えました！
4cb5b950cfd0eabf5d6b828c951d4549?s=48 loftkun
0
330
Power BI のうらがわ
0cc2ebc5781bcb2cae5f9ab7efa40ff2?s=48 hanaseleb
1
130
CityGMLとFBXの連携で地理空間のエンタメ化
A3990cfe49309642cb8d1f50b617c141?s=48 soh_mitian
0
670
Cloud Foundryの移行先はどこか？ オープンソースPaaS探し
49844569246a6d183a5551bb74895e2a?s=48 kolinz
0
350
データをコネコネ！メール配信用データ生成の仕組み
Cdb7fe48c050935995f8a6a58a5ceba9?s=48 kappezoro
0
110
私のAWS愛を聞け！ ~ここが好きだよStep Functions~ #devio2022
808ce3d41280c085f8bdc27dce7ea8fb?s=48 kongmingstrap
0
280
データ分析のためのAWS Well-Architected -Data Analytics Lens-
Eefeb193691fd905cf9edafc98f7198d?s=48 maru1981
0
220
ロボットの実行すらメンドクサイ！？
3a06a93a8db01666fd2b822484930594?s=48 kou12092
0
120
EC／CRMの自社サービス開発をマネジメントするようになって1年でやってきたこととこれから / devio2022-takano-sho-road-to-good-development-team-management
Fee058832252e72722b8b03073ff6324?s=48 masaru_b_cl
0
390
ソフトウェアアーキテクチャの基礎: Software Architecture in a Nutshell
941b170e5a115a295cccb5f5cdf0a800?s=48 snoozer05
28
8.4k
Backlog × RPAでいろいろ捗った話
87470304247051028bed32895e4816cd?s=48 z_tetsu
0
370

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
237
19k
How GitHub (no longer) Works
78b475797a14c84799063c7cd073962f?s=48 holman
297
140k
Intergalactic Javascript Robots from Outer Space
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
260
25k
Typedesign – Prime Four
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
34
1.4k
Bash Introduction
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
598
210k
Making Projects Easy
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
98
4.4k
Art Directing for the Web. Five minutes with CSS Template Areas
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
196
9.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
88f4e84b94fe07cddbd9e6479d689192?s=48 soudai
39
13k
Visualization
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
125
12k
Raft: Consensus for Rubyists
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
127
5.5k
Dealing with People You Can't Stand - Big Design 2015
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
351
21k
Side Projects
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
450
37k

Transcript

  1. DroidKaigi 2018付録1 詳解 RelativeLayoutの 内部実装 株式会社ノハナ 瀬戸優之 @seto_hi

  2. RelativeLayoutのポイント ＝Graph

  3. Graph グラフ（英: Graph）とは、 ノード（頂点）群とノード間の連結関係を表す エッジ（枝）群で構成される抽象データ型、 and・orその実装である具象データ型である。 (wikipedia)

  4. DependencyGraph • 有向グラフ • mNodes = 子Viewすべて、ArrayList • mKeyNodes =

    IDを持つ子View、SparseArray Node • dependents = 参照しているNode • dependencies = 参照されているNode

  5. RelativeLayout#onMeasure

  6. RelativeLayout#onMeasure 1. DependencyGraphを作る 2. 横方向でGraphのrootからmeasure、仮レイアウト 3. 縦方向でGraphのrootからmeasure、仮レイアウト ◦ 自身のサイズも仮決定

  7. RelativeLayout#onMeasure 4. 自身がwrap_contentなら ◦ 子のサイズとMeasureSpecから自身のサイズを修正 ◦ 中央寄せのViewの位置を修正 5. Gravityによって位置を本決め 6.

    setMeasuredDimensions

  8. mesureでの仮レイアウト • 参照のGraphのrootからmeasure + 仮レイアウトしていく • measure対象のViewが参照しているViewは 必ず仮レイアウト済み • measureさえすればmeasure対象のViewの

    仮レイアウト位置が確定できる

  9. 子ViewのmeasureSpec 1. 左右(or上下)ともに参照しているViewがある ◦ 左右(or上下)のViewの間のサイズ + EXACTLY 2. 1.でない場合 ◦

    子Viewがサイズ決め打ち ▪ 子Viewのサイズと余りサイズの最小値 + EXACTLY ◦ 子Viewがmatch_parent ▪ RelativeLayoutの余りサイズ + EXACTLY※ ◦ 子Viewがwrap_content ▪ RelativeLayoutの余りサイズ + AT_MOST※ ※余りがなければ0 + UNSPECIFIED

  10. RelativeLayout#onLayout

  11. RelativeLayout#onLayout • measure通りにレイアウトするだけ ◦ RelativeLayout.LayoutParamsが位置と座標を持つ ▪ mLeft, mTop, mRight, mBottom

    • シンプル！

  12. 循環参照の検知

  13. 循環参照の検知 • RelativeLayoutで循環参照は禁止 ◦ rightOfのleftOfが自身のような場合 ◦ ConstraintLayoutは一部OK(Chainになる) • グラフの参照で解決

  14. DependencyGraph • mNodes = 子Viewすべて、ArrayList • mKeyNodes = IDを持つ子View、SparseArray Node

    • dependents = 参照しているNode • dependencies = 参照されているNode

  15. DependencyGraph#getSortedViews 1. GraphのrootをDequeに入れる 2. Dequeからグラフの頂点のNodeをpoll 3. 2.を参照している子Nodeに対して 3.1. 参照されているNodeがないならばDequeに追加 3.2.

    参照されているNodeがあれば何もしない 4. Dequeが空ならば5、 Dequeが空でないならば2.に戻る 5. すべてのEdgeをDequeに追加できていない場合は 例外を投げる

  16. 循環参照の検知(正常系) A B C Dequeue

  17. 循環参照の検知(正常系) A B C Dequeue A 1.RootをDequeueに追加

  18. 循環参照の検知(正常系) A B C Dequeue B 2.pollして消去 3.1.Dequeueに追加

  19. 循環参照の検知(正常系) B C Dequeue C 3.1.Dequeueに追加 2.pollして消去

  20. 循環参照の検知(正常系) C Dequeue 2.pollして消去

  21. 循環参照の検知(正常系) Dequeue 5.Dequeueが空で すべてのEdgeを参照したので終了

  22. 循環参照の検知(異常系) A B C Dequeue 循環参照

  23. 循環参照の検知(異常系) A B C Dequeue A 1.RootをDequeueに追加

  24. 循環参照の検知(異常系) A B C Dequeue 2.pollして消去 3.2.参照があるので Dequeueに追加しない

  25. 循環参照の検知(異常系) B C Dequeue 5.Dequeueが空なのにすべてのEdgeが参照できていない 例外を投げる