Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
詳解 RelativeLayoutの内部実装
Search
HiroYUKI Seto
February 03, 2018
Technology
0
3.1k
詳解 RelativeLayoutの内部実装
2018/2/9
DroidKaigi 2018 DAY02 room1 10:30~
発表の付録1
HiroYUKI Seto
February 03, 2018
Tweet
Share
More Decks by HiroYUKI Seto
See All by HiroYUKI Seto
Androidアプリの 安全なリファクタリングを行うパターン集
seto_hi
2
4.9k
UI TestやVisual Regression Testを コスパ良くやる
seto_hi
3
1.8k
事業支援というお仕事
seto_hi
0
410
MDCの内部実装から学ぶ 表現力の高いViewの作り方
seto_hi
5
1.8k
CoordinatorLayoutのBehaviorを使い倒す
seto_hi
1
390
Jetpack Compose
seto_hi
2
780
UI改善に繋がるエンジニアの立ち回り
seto_hi
2
4.7k
MDCのButtonのCorner Family
seto_hi
1
190
MDCのBottomAppBarのShadowの実現方法
seto_hi
0
970
Other Decks in Technology
See All in Technology
TLSから見るSREの未来
atpons
2
310
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
290
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
670
Figma Dev Mode MCP Serverを用いたUI開発
zoothezoo
0
230
Introduction to Bill One Development Engineer
sansan33
PRO
0
260
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
18
7.6k
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
130
サービスを止めるな! DDoS攻撃へのスマートな備えと最前線の事例
coconala_engineer
1
180
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.7k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
1
320
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Producing Creativity
orderedlist
PRO
346
40k
Optimizing for Happiness
mojombo
379
70k
A designer walks into a library…
pauljervisheath
207
24k
RailsConf 2023
tenderlove
30
1.1k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Navigating Team Friction
lara
187
15k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Transcript
DroidKaigi 2018付録1 詳解 RelativeLayoutの 内部実装 株式会社ノハナ 瀬戸優之 @seto_hi
RelativeLayoutのポイント =Graph
Graph グラフ(英: Graph)とは、 ノード(頂点)群とノード間の連結関係を表す エッジ(枝)群で構成される抽象データ型、 and・orその実装である具象データ型である。 (wikipedia)
DependencyGraph • 有向グラフ • mNodes = 子Viewすべて、ArrayList • mKeyNodes =
IDを持つ子View、SparseArray Node • dependents = 参照しているNode • dependencies = 参照されているNode
RelativeLayout#onMeasure
RelativeLayout#onMeasure 1. DependencyGraphを作る 2. 横方向でGraphのrootからmeasure、仮レイアウト 3. 縦方向でGraphのrootからmeasure、仮レイアウト ◦ 自身のサイズも仮決定
RelativeLayout#onMeasure 4. 自身がwrap_contentなら ◦ 子のサイズとMeasureSpecから自身のサイズを修正 ◦ 中央寄せのViewの位置を修正 5. Gravityによって位置を本決め 6.
setMeasuredDimensions
mesureでの仮レイアウト • 参照のGraphのrootからmeasure + 仮レイアウトしていく • measure対象のViewが参照しているViewは 必ず仮レイアウト済み • measureさえすればmeasure対象のViewの
仮レイアウト位置が確定できる
子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
RelativeLayout#onLayout
RelativeLayout#onLayout • measure通りにレイアウトするだけ ◦ RelativeLayout.LayoutParamsが位置と座標を持つ ▪ mLeft, mTop, mRight, mBottom
• シンプル!
循環参照の検知
循環参照の検知 • RelativeLayoutで循環参照は禁止 ◦ rightOfのleftOfが自身のような場合 ◦ ConstraintLayoutは一部OK(Chainになる) • グラフの参照で解決
DependencyGraph • mNodes = 子Viewすべて、ArrayList • mKeyNodes = IDを持つ子View、SparseArray Node
• dependents = 参照しているNode • dependencies = 参照されているNode
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に追加できていない場合は 例外を投げる
循環参照の検知(正常系) A B C Dequeue
循環参照の検知(正常系) A B C Dequeue A 1.RootをDequeueに追加
循環参照の検知(正常系) A B C Dequeue B 2.pollして消去 3.1.Dequeueに追加
循環参照の検知(正常系) B C Dequeue C 3.1.Dequeueに追加 2.pollして消去
循環参照の検知(正常系) C Dequeue 2.pollして消去
循環参照の検知(正常系) Dequeue 5.Dequeueが空で すべてのEdgeを参照したので終了
循環参照の検知(異常系) A B C Dequeue 循環参照
循環参照の検知(異常系) A B C Dequeue A 1.RootをDequeueに追加
循環参照の検知(異常系) A B C Dequeue 2.pollして消去 3.2.参照があるので Dequeueに追加しない
循環参照の検知(異常系) B C Dequeue 5.Dequeueが空なのにすべてのEdgeが参照できていない 例外を投げる