What’s new with ConstraintLayout 2.0

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. 以上！