Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
詳解 RelativeLayoutの内部実装
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
HiroYUKI Seto
February 03, 2018
Technology
3.2k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
詳解 RelativeLayoutの内部実装
2018/2/9
DroidKaigi 2018 DAY02 room1 10:30~
発表の付録1
HiroYUKI Seto
February 03, 2018
More Decks by HiroYUKI Seto
See All by HiroYUKI Seto
Androidアプリの 安全なリファクタリングを行うパターン集
seto_hi
2
5k
UI TestやVisual Regression Testを コスパ良くやる
seto_hi
3
2k
事業支援というお仕事
seto_hi
0
470
MDCの内部実装から学ぶ 表現力の高いViewの作り方
seto_hi
5
1.9k
CoordinatorLayoutのBehaviorを使い倒す
seto_hi
1
480
Jetpack Compose
seto_hi
2
900
UI改善に繋がるエンジニアの立ち回り
seto_hi
2
4.9k
MDCのButtonのCorner Family
seto_hi
1
270
MDCのBottomAppBarのShadowの実現方法
seto_hi
0
1.1k
Other Decks in Technology
See All in Technology
Patterns in AI Driven Software Development
akosma
PRO
0
430
"計画的無茶振り"を通してAIネイティブ世代の新人を育てる
subroh0508
1
140
デザインレビューは自動化できるのか?─ Flutter × Figma で UI 品質保証を考える
techiro
2
720
AIテスト自動化と評価駆動開発EDD
happysamurai294
0
130
AIで選択肢が広がった組織設計の理想と現実
konifar
16
7.5k
E2Eってつらくないですか?E2Eの管理コストを下げる手段とその実践
akaboshinit
6
2.9k
構造で守らせる データ・法務・セキュリティ・開発チームとつくる AI時代のデータガバナンスとデータ基盤のリアル
legalontechnologies
PRO
3
720
FinOpsを導入してマルチプロダクトのコスト最適化を実現する
kworkdev
PRO
0
110
「作れる」と「リリースできる」の間にあったもの── PdMを外して見えた、PdMがやるべき仕事/Buildable ≠ Shippable: What Removing the PM Taught Me About the PM’s Job
yappli_developers
0
420
2拠点SRE活動始めてみた | sogaoh's LT @ ホンマでっかSRE勉強会 #3
sogaoh
PRO
0
230
Agent Loopを組み込んだ アンビエントなAI機能を実現する / Ambient AI fetures with Agent Loop
nekorush14
0
130
Vibe-to-Spec開発_実践ガイド
happysamurai294
0
140
Featured
See All Featured
For a Future-Friendly Web
brad_frost
184
11k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Product Roadmaps are Hard
iamctodd
55
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
23k
Code Review Best Practice
trishagee
74
20k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.4k
Utilizing Notion as your number one productivity tool
mfonobong
4
630
The World Runs on Bad Software
bkeepers
PRO
72
12k
Thoughts on Productivity
jonyablonski
76
5.4k
brightonSEO & MeasureFest 2025 - Winning Strategies for Black Friday CRO & PPC - Christian Goodrich
cargoodrich
3
890
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
1
550
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
550
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が参照できていない 例外を投げる