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.2k
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.7k
事業支援というお仕事
seto_hi
0
390
MDCの内部実装から学ぶ 表現力の高いViewの作り方
seto_hi
5
1.7k
CoordinatorLayoutのBehaviorを使い倒す
seto_hi
1
330
Jetpack Compose
seto_hi
2
700
UI改善に繋がるエンジニアの立ち回り
seto_hi
2
4.5k
MDCのButtonのCorner Family
seto_hi
1
140
MDCのBottomAppBarのShadowの実現方法
seto_hi
0
900
Other Decks in Technology
See All in Technology
四国クラウドお遍路 2024 in 高知 エンディング
yukataoka
0
130
[RSJ24] Object Segmentation from Open-Vocabulary Manipulation Instructions Based on Optimal Transport Polygon Matching with Foundation Models
keio_smilab
PRO
0
130
AWS SAW を広めたい @四国クラウドお遍路
kazzpapa3
0
170
Our Journey from in-House CD System to Open Source
ffjlabo
0
110
中規模・ミドルTier開発組織におけるDevRelの戦略と実行と成果 - DevRel Guild Conference Mini -
leveragestech
2
280
Javaにおける関数型プログラミンへの取り組み
skrb
7
270
音声AIエージェントの世界とRetell AI入門 / Introduction to the World of Voice AI Agents and Retell AI
rkaga
4
810
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
41k
リクルート新人研修2024 テキスト生成AI活用
recruitengineers
PRO
10
460
CRTO/CRTL/OSEPの比較・勉強法とAV/EDRの検知実験
chayakonanaika
1
930
タイミーのBraze活用 ~PUSH通知を活用したレコメンド~
ozeshun
2
130
なぜクラウドサービスで Web コンソールを提供するのか
shuta13
4
1.9k
Featured
See All Featured
Producing Creativity
orderedlist
PRO
340
39k
Making Projects Easy
brettharned
113
5.8k
Fireside Chat
paigeccino
31
2.9k
It's Worth the Effort
3n
182
27k
Infographics Made Easy
chrislema
239
18k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
What's in a price? How to price your products and services
michaelherold
242
11k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
RailsConf 2023
tenderlove
27
800
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
The Cost Of JavaScript in 2023
addyosmani
40
5.2k
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の位置に配置