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

What’s new with ConstraintLayout 2.0

What’s new with ConstraintLayout 2.0

2018/5/22
CA.apk #6 - Google I/O 2018 報告会

Ad449f3f4e595ade283a30c4f66010be?s=128

HiroYUKI Seto

May 22, 2018
Tweet

Transcript

  1. What’s new with ConstraintLayout 2.0 CA.apk #6 株式会社ノハナ 瀬戸優之 @seto_hi

  2. 自己紹介 • 瀬戸優之 Seto HiroYUKI @seto_hi • Androidエンジニア 兼 アプリデザイナー

    • 株式会社ノハナ ◦ 一組でも多くの家族に笑顔を届ける • Material Design大好き • DroidKaigi 2018でConstraintLayoutの内部実装を解説 • Google I/O 2018 参加組
  3. ConstraintLayout 2.0 正式発表!

  4. ConstraintLayout 2.0 正式発表! ライブラリの公開はまだ

  5. Helper機能追加 1. Layout Manipulation 2. Post-Layout Manipulation 3. Rendering or

    Decorating
  6. 1.Layout Manipulation • Viewのレイアウトを簡単にする機能 ◦ ex. Barrier(1.1~) • app:constaint_referenced_ids に対象のViewのidを指定するだけ

    • Linear(LinearLayout風) • Flow(FlexboxLayout風)
  7. 2.Post-Layout Manipulation • レイアウト後の操作 • app:constaint_referenced_ids に対象のViewのidを指定するだけ • Fly-in ◦

    初回レイアウト時にアニメーションする • Layer ◦ 指定したViewにアニメーションなどをかけれる • Circler Reveal ◦ Circler Reveal
  8. 3.Rendering or Decorating • Viewの背景などに描画ができる • app:constaint_referenced_ids に対象のViewのidを指定するだけ

  9. Layout Management

  10. Layout Management • ~1.1 ◦ layoutファイルを2つ用意 ◦ ConstraintSetを使ってコード上で管理 ▪ 各状態ごとに

    ConstraintSet.clone(context, layout) ▪ 状態を変える場合には ConstraintSet.applyTo(ConstrainLayout)
  11. Layout Management • 2.0~ ◦ layoutファイルを2つ用意 ◦ xmlにStateを書く ◦ ConstraintLayout.setLayoutDescription(xml)

    ◦ 状態を変える場合には ConstraintLayout.setState(id)
  12. None
  13. None
  14. 新ViewGroup MotionLayout

  15. セッション動画を見て! (29:10~) https://youtu.be/ytZteMo4ETk

  16. MotionLayout • Animationが簡単にできるView ◦ ConstraintLayoutを継承 • 2つ以上の状態間をアニメーションできる ◦ KeyFrameの追加もできる •

    Android Studio側のUIも便利 ◦ KeyFrameの追加 ◦ 開始・終了タイミングの変更 ◦ デザイナーでもアニメーション組めるのでは?
  17. セッション動画を見て! (29:10~) https://youtu.be/ytZteMo4ETk

  18. 1.1と 何が変わるか

  19. 何が変わるか • ~1.1 ◦ 柔軟にレイアウトできる ネストを浅くするためのViewGroup • 2.0~ ◦ 他のViewGroupの機能を網羅

    ◦ 更に+αの機能がある ▪ Layout、Decoration、Animation ◦ アニメーションに特化したMotionLayout
  20. 結論 すべてのViewGroupを ConstraintLayoutに 置き換える時が来た

  21. 結論 すべてのViewGroupを ConstraintLayoutに 置き換える時が来た かもしれない

  22. ※Stableでない ライブラリの ご利用は計画的に

  23. 以上!