What’s new with ConstraintLayout 2.0

by HiroYUKI Seto

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介 ● 瀬戸優之 Seto HiroYUKI @seto_hi ● Androidエンジニア兼アプリデザイナー ● 株式会社ノハナ ○ 一組でも多くの家族に笑顔を届ける ● Material Design大好き ● DroidKaigi 2018でConstraintLayoutの内部実装を解説 ● Google I/O 2018 参加組

Slide 3

Slide 3 text

ConstraintLayout 2.0 正式発表！

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

1.Layout Manipulation ● Viewのレイアウトを簡単にする機能 ○ ex. Barrier(1.1~) ● app:constaint_referenced_ids に対象のViewのidを指定するだけ ● Linear(LinearLayout風) ● Flow(FlexboxLayout風)

Slide 7

Slide 7 text

2.Post-Layout Manipulation ● レイアウト後の操作 ● app:constaint_referenced_ids に対象のViewのidを指定するだけ ● Fly-in ○ 初回レイアウト時にアニメーションする ● Layer ○ 指定したViewにアニメーションなどをかけれる ● Circler Reveal ○ Circler Reveal

Slide 8

Slide 8 text

3.Rendering or Decorating ● Viewの背景などに描画ができる ● app:constaint_referenced_ids に対象のViewのidを指定するだけ

Slide 9

Slide 9 text

Layout Management

Slide 10

Slide 10 text

Layout Management ● ~1.1 ○ layoutファイルを2つ用意 ○ ConstraintSetを使ってコード上で管理 ■ 各状態ごとに ConstraintSet.clone(context, layout) ■ 状態を変える場合には ConstraintSet.applyTo(ConstrainLayout)

Slide 11

Slide 11 text

Layout Management ● 2.0~ ○ layoutファイルを2つ用意 ○ xmlにStateを書く ○ ConstraintLayout.setLayoutDescription(xml) ○ 状態を変える場合には ConstraintLayout.setState(id)

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

新ViewGroup MotionLayout

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

MotionLayout ● Animationが簡単にできるView ○ ConstraintLayoutを継承 ● 2つ以上の状態間をアニメーションできる ○ KeyFrameの追加もできる ● Android Studio側のUIも便利 ○ KeyFrameの追加 ○ 開始・終了タイミングの変更 ○ デザイナーでもアニメーション組めるのでは？

Slide 17

Slide 17 text