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.8k
事業支援というお仕事
seto_hi
0
400
MDCの内部実装から学ぶ 表現力の高いViewの作り方
seto_hi
5
1.7k
CoordinatorLayoutのBehaviorを使い倒す
seto_hi
1
360
Jetpack Compose
seto_hi
2
730
UI改善に繋がるエンジニアの立ち回り
seto_hi
2
4.6k
MDCのButtonのCorner Family
seto_hi
1
160
MDCのBottomAppBarのShadowの実現方法
seto_hi
0
930
Other Decks in Technology
See All in Technology
今年一年で頑張ること / What I will do my best this year
pauli
1
220
デザインシステムを始めるために取り組んだこと - TechTrain x ゆめみ ここを意識してほしい!リファクタリング勉強会
kajitack
1
100
完全自律型AIエージェントとAgentic Workflow〜ワークフロー構築という現実解
pharma_x_tech
0
350
デジタルアイデンティティ人材育成推進ワーキンググループ 翻訳サブワーキンググループ 活動報告 / 20250114-OIDF-J-EduWG-TranslationSWG
oidfj
0
540
月間60万ユーザーを抱える 個人開発サービス「Walica」の 技術スタック変遷
miyachin
1
140
20250116_JAWS_Osaka
takuyay0ne
2
200
AWSサービスアップデート 2024/12 Part3
nrinetcom
PRO
0
140
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
kubode
0
250
Oracle Exadata Database Service(Dedicated Infrastructure):サービス概要のご紹介
oracle4engineer
PRO
0
12k
dbtを中心にして組織のアジリティとガバナンスのトレードオンを考えてみた
gappy50
0
300
Evolving Architecture
rainerhahnekamp
3
260
デジタルアイデンティティ技術 認可・ID連携・認証 応用 / 20250114-OIDF-J-EduWG-TechSWG
oidfj
2
690
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
Producing Creativity
orderedlist
PRO
343
39k
Designing Experiences People Love
moore
139
23k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
Fireside Chat
paigeccino
34
3.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
jQuery: Nuts, Bolts and Bling
dougneiner
62
7.6k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
570
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の位置に配置