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
ConstraintLayoutの機能の実現
Search
HiroYUKI Seto
February 03, 2018
Technology
0
3.3k
ConstraintLayoutの機能の実現
2018/2/9
DroidKaigi 2018 DAY02 room1 10:30~
発表の付録2
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
400
MDCの内部実装から学ぶ 表現力の高いViewの作り方
seto_hi
5
1.8k
CoordinatorLayoutのBehaviorを使い倒す
seto_hi
1
380
Jetpack Compose
seto_hi
2
750
UI改善に繋がるエンジニアの立ち回り
seto_hi
2
4.6k
MDCのButtonのCorner Family
seto_hi
1
170
MDCのBottomAppBarのShadowの実現方法
seto_hi
0
950
Other Decks in Technology
See All in Technology
Compose MultiplatformにおけるiOSネイティブ実装のベストプラクティス
enomotok
1
210
モノリスの認知負荷に立ち向かう、コードの所有者という思想と現実
kzkmaeda
0
110
PostgreSQL Unconference #52 pg_tde
nori_shinoda
1
220
LINEギフトのLINEミニアプリアクセシビリティ改善事例
lycorptech_jp
PRO
0
240
Javaの新しめの機能を知ったかぶれるようになる話 #kanjava
irof
3
4.9k
グループポリシー再確認
murachiakira
0
170
頻繁リリース × 高品質 = 無理ゲー? いや、できます!/20250306 Shoki Hyo
shift_evolve
0
150
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略
ryu955
2
440
DevOps文化を育むQA 〜カルチャーバブルを生み出す戦略〜 / 20250317 Atsushi Funahashi
shift_evolve
1
110
[CATS]Amazon Bedrock GenUハンズオン座学資料 #2 GenU環境でRAGを体験してみよう
tsukuboshi
0
140
データベースで見る『家族アルバム みてね』の変遷 / The Evolution of Family Album Through the Lens of Databases
kohbis
2
130
ウェブアクセシビリティとは
lycorptech_jp
PRO
0
260
Featured
See All Featured
Facilitating Awesome Meetings
lara
53
6.3k
A better future with KSS
kneath
238
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
28
2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
How GitHub (no longer) Works
holman
314
140k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
A Philosophy of Restraint
colly
203
16k
Speed Design
sergeychernyshev
28
860
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
30
1.1k
Transcript
DroidKaigi 2018付録2 ConstraintLayout の 機能の実現 株式会社ノハナ 瀬戸優之 @seto_hi
略解 ConstraintLayoutの 機能の内部実装 https://qiita.com/hiroyuki-seto/items/7b8781b336efba14872e のもう少し深い話
Guideline
Guideline • 実態はView • constraint-layout側はほぼ空実装 ◦ 描画されないようにだけ実装されている ◦ ConstraintLayoutがmeasureをskipする •
solver側はLinearSystemにSolverVariableを追加している ◦ Vertical or Horizontal or Percent で条件分け
Group
の前に
ConstraintHelper
ConstraintHelper • 実態はView • 参照されているViewのidの一覧を持つ • updatePreMeasure、updatePostMeasure • updatePreLayout、updatePostLayout •
measureされない ◦ if文ですべてskipされている
Group
Group • View、ConstraintHelper • updatePreLayout ◦ 対象Viewのvisibilityとelevationを変更 • updatePostLayout ◦
自身の幅と高さを0 ▪ VisibilityがGONEでないため レイアウトされる可能性がある その際に幅と高さを持たないため
Barrier
Barrier • View、ConstraintHelper • Typeを持つだけ ◦ 対象ViewのどこにBarrierを張るか
Barrier • LinearSystemへの追加 ◦ 条件 ▪ LeftとTopの場合はGreaterThan ▪ RightとBottomの場合はLowerThan ◦
strength ▪ match_constraintなWidgetがある場合LOW(1) ▪ match_constraintなWidgetがない場合BARRIER(7)
Placeholder
Placeholder • solver側に対応するクラスがない • updatePostMeasure ◦ contentのvisibilityをVISIBLE →自身のサイズに子Viewのサイズを代入 →contentのvisibilityをGONE ▪
ConstraintWidgetはvisibilityがGONEだとsizeが0 • updatePreLayout ◦ contentにisInPlaceholderフラグを立てる ◦ 自身とcontentのvisibilityをVISIBLE
Placeholderレイアウト • ConstraintLayout#onLayoutにif文 ◦ isInPlaceholderのViewはレイアウトをskip ◦ Placeholderのレイアウト時に 代わりにcontentのViewをレイアウト ◦ 恐らくレイアウトの順番を守るため
▪ 描画の上下関係が崩れないように
Chain
Chain • staticメソッドが2つ ◦ beta3からクラス化、beta2まではOptimizer内にあった • 300行くらいあって複雑!
Chain • ConstraintWidgetContainer#addChildrenToSolverで LinearSystemに数値を追加する最後に Chain.applyChainConstraints(3引数)を呼ぶ • Chain.applyChainConstraints(3引数)では chainそれぞれにChain.applyChainConstraints(5引数)を呼 ぶ
Chain.applyChainConstraints(5引数) 1. chainの要素でwhile文 ◦ LinearSystemに追加 2. chainの端の制約をLinearSystemに追加 3. ConstraintLayoutがwrap_content ◦
chainの端が親をはみ出さない制約を LinearSystemに追加 4. match_constraintなwidget ◦ MATCH_CONSTRAINT_SPREADか MATCH_CONSTRAINT_RAITOの場合は等分にする
Chain.applyChainConstraints(5引数) 5. packed, spread, spreadInsideの処理 • packed or 要素Chainの1個 ◦
先頭の項目を中央揃え(bias考慮)で配置 ◦ packedは1.の時に各要素が隣接するように配置 • spread ◦ Chainの要素を中央寄せで配置 • spreadInside ◦ Chainの端以外の要素を中央寄せで配置 ◦ Chainの端の要素をmarginの位置に配置