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
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
330
OPENLOGI Company Profile for engineer
hr01
1
33k
モバイル界のMCPを考える
naoto33
0
380
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
4
280
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
2
840
Lambda Web Adapterについて自分なりに理解してみた
smt7174
5
150
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
1
3k
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
180
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
110
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
380
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
170
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
130
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Making Projects Easy
brettharned
116
6.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Bash Introduction
62gerente
614
210k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Optimizing for Happiness
mojombo
379
70k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
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が参照できていない 例外を投げる