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.9k
事業支援というお仕事
seto_hi
0
420
MDCの内部実装から学ぶ 表現力の高いViewの作り方
seto_hi
5
1.8k
CoordinatorLayoutのBehaviorを使い倒す
seto_hi
1
400
Jetpack Compose
seto_hi
2
790
UI改善に繋がるエンジニアの立ち回り
seto_hi
2
4.7k
MDCのButtonのCorner Family
seto_hi
1
200
MDCのBottomAppBarのShadowの実現方法
seto_hi
0
980
Other Decks in Technology
See All in Technology
PRDの正しい使い方 ~AI時代にも効く思考・対話・成長ツールとして~
techtekt
PRO
0
100
ドキュメントはAIの味方!スタートアップのアジャイルを加速するADR
kawauso
3
470
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
770
Grafana MCPサーバーによるAIエージェント経由でのGrafanaダッシュボード動的生成
hamadakoji
0
720
ソフトウェア エンジニアとしての 姿勢と心構え
recruitengineers
PRO
22
11k
Kubernetes における cgroup v2 でのOut-Of-Memory 問題の解決
pfn
PRO
0
410
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
10
3.4k
Lessons from CVE-2025-22869: Memory Debugging and OSS Vulnerability Reporting
vvatanabe
2
110
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
620
AWS環境のリソース調査を Claude Code で効率化 / aws investigate with cc devio2025
masahirokawahara
2
510
Product Management Conference -AI時代に進化するPdM-
kojima111
0
270
AI時代に非連続な成長を実現するエンジニアリング戦略
sansantech
PRO
3
790
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
900
Git: the NoSQL Database
bkeepers
PRO
431
65k
BBQ
matthewcrist
89
9.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
KATA
mclloyd
32
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Designing Experiences People Love
moore
142
24k
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の位置に配置