Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ConstraintLayoutの機能の実現

HiroYUKI Seto
February 03, 2018

 ConstraintLayoutの機能の実現

2018/2/9
DroidKaigi 2018 DAY02 room1 10:30~
発表の付録2

HiroYUKI Seto

February 03, 2018
Tweet

More Decks by HiroYUKI Seto

Other Decks in Technology

Transcript

  1. DroidKaigi 2018付録2
    ConstraintLayout

    機能の実現
    株式会社ノハナ 瀬戸優之
    @seto_hi

    View Slide

  2. 略解 ConstraintLayoutの
    機能の内部実装
    https://qiita.com/hiroyuki-seto/items/7b8781b336efba14872e
    のもう少し深い話

    View Slide

  3. Guideline

    View Slide

  4. Guideline
    ● 実態はView
    ● constraint-layout側はほぼ空実装
    ○ 描画されないようにだけ実装されている
    ○ ConstraintLayoutがmeasureをskipする
    ● solver側はLinearSystemにSolverVariableを追加している
    ○ Vertical or Horizontal or Percent
    で条件分け

    View Slide

  5. Group

    View Slide

  6. の前に

    View Slide

  7. ConstraintHelper

    View Slide

  8. ConstraintHelper
    ● 実態はView
    ● 参照されているViewのidの一覧を持つ
    ● updatePreMeasure、updatePostMeasure
    ● updatePreLayout、updatePostLayout
    ● measureされない
    ○ if文ですべてskipされている

    View Slide

  9. Group

    View Slide

  10. Group
    ● View、ConstraintHelper
    ● updatePreLayout
    ○ 対象Viewのvisibilityとelevationを変更
    ● updatePostLayout
    ○ 自身の幅と高さを0
    ■ VisibilityがGONEでないため
    レイアウトされる可能性がある
    その際に幅と高さを持たないため

    View Slide

  11. Barrier

    View Slide

  12. Barrier
    ● View、ConstraintHelper
    ● Typeを持つだけ
    ○ 対象ViewのどこにBarrierを張るか

    View Slide

  13. Barrier
    ● LinearSystemへの追加
    ○ 条件
    ■ LeftとTopの場合はGreaterThan
    ■ RightとBottomの場合はLowerThan
    ○ strength
    ■ match_constraintなWidgetがある場合LOW(1)
    ■ match_constraintなWidgetがない場合BARRIER(7)

    View Slide

  14. Placeholder

    View Slide

  15. Placeholder
    ● solver側に対応するクラスがない
    ● updatePostMeasure
    ○ contentのvisibilityをVISIBLE
    →自身のサイズに子Viewのサイズを代入
    →contentのvisibilityをGONE
    ■ ConstraintWidgetはvisibilityがGONEだとsizeが0
    ● updatePreLayout
    ○ contentにisInPlaceholderフラグを立てる
    ○ 自身とcontentのvisibilityをVISIBLE

    View Slide

  16. Placeholderレイアウト
    ● ConstraintLayout#onLayoutにif文
    ○ isInPlaceholderのViewはレイアウトをskip
    ○ Placeholderのレイアウト時に
    代わりにcontentのViewをレイアウト
    ○ 恐らくレイアウトの順番を守るため
    ■ 描画の上下関係が崩れないように

    View Slide

  17. Chain

    View Slide

  18. Chain
    ● staticメソッドが2つ
    ○ beta3からクラス化、beta2まではOptimizer内にあった
    ● 300行くらいあって複雑!

    View Slide

  19. Chain
    ● ConstraintWidgetContainer#addChildrenToSolverで
    LinearSystemに数値を追加する最後に
    Chain.applyChainConstraints(3引数)を呼ぶ
    ● Chain.applyChainConstraints(3引数)では
    chainそれぞれにChain.applyChainConstraints(5引数)を呼

    View Slide

  20. 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の場合は等分にする

    View Slide

  21. Chain.applyChainConstraints(5引数)
    5. packed, spread, spreadInsideの処理
    ● packed or 要素Chainの1個
    ○ 先頭の項目を中央揃え(bias考慮)で配置
    ○ packedは1.の時に各要素が隣接するように配置
    ● spread
    ○ Chainの要素を中央寄せで配置
    ● spreadInside
    ○ Chainの端以外の要素を中央寄せで配置
    ○ Chainの端の要素をmarginの位置に配置

    View Slide