Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
What’s new with ConstraintLayout 2.0
Search
HiroYUKI Seto
May 22, 2018
Programming
3
980
What’s new with ConstraintLayout 2.0
2018/5/22
CA.apk #6 - Google I/O 2018 報告会
HiroYUKI Seto
May 22, 2018
Tweet
Share
More Decks by HiroYUKI Seto
See All by HiroYUKI Seto
Androidアプリの 安全なリファクタリングを行うパターン集
seto_hi
2
5k
UI TestやVisual Regression Testを コスパ良くやる
seto_hi
3
1.9k
事業支援というお仕事
seto_hi
0
420
MDCの内部実装から学ぶ 表現力の高いViewの作り方
seto_hi
5
1.8k
CoordinatorLayoutのBehaviorを使い倒す
seto_hi
1
410
Jetpack Compose
seto_hi
2
840
UI改善に繋がるエンジニアの立ち回り
seto_hi
2
4.7k
MDCのButtonのCorner Family
seto_hi
1
210
MDCのBottomAppBarのShadowの実現方法
seto_hi
0
1k
Other Decks in Programming
See All in Programming
全員アーキテクトで挑む、 巨大で高密度なドメインの紐解き方
agatan
8
18k
配送計画の均等化機能を提供する取り組みについて(⽩⾦鉱業 Meetup Vol.21@六本⽊(数理最適化編))
izu_nori
0
120
TVerのWeb内製化 - 開発スピードと品質を両立させるまでの道のり
techtver
PRO
3
1.4k
React Native New Architecture 移行実践報告
taminif
1
130
複数人でのCLI/Infrastructure as Codeの暮らしを良くする
shmokmt
5
2.1k
GeistFabrik and AI-augmented software development
adewale
PRO
0
250
ZOZOにおけるAI活用の現在 ~モバイルアプリ開発でのAI活用状況と事例~
zozotech
PRO
8
4.1k
TypeScriptで設計する 堅牢さとUXを両立した非同期ワークフローの実現
moeka__c
6
2.9k
dotfiles 式年遷宮 令和最新版
masawada
1
670
俺流レスポンシブコーディング 2025
tak_dcxi
13
7.7k
ローターアクトEクラブ アメリカンナイト:川端 柚菜 氏(Japan O.K. ローターアクトEクラブ 会長):2720 Japan O.K. ロータリーEクラブ2025年12月1日卓話
2720japanoke
0
440
Reactive Thinking with Signals and the new Resource API
manfredsteyer
PRO
0
160
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.1k
Six Lessons from altMBA
skipperchong
29
4.1k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3k
How to Think Like a Performance Engineer
csswizardry
28
2.3k
Music & Morning Musume
bryan
46
7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.1k
Statistics for Hackers
jakevdp
799
230k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.3k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Producing Creativity
orderedlist
PRO
348
40k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Transcript
What’s new with ConstraintLayout 2.0 CA.apk #6 株式会社ノハナ 瀬戸優之 @seto_hi
自己紹介 • 瀬戸優之 Seto HiroYUKI @seto_hi • Androidエンジニア 兼 アプリデザイナー
• 株式会社ノハナ ◦ 一組でも多くの家族に笑顔を届ける • Material Design大好き • DroidKaigi 2018でConstraintLayoutの内部実装を解説 • Google I/O 2018 参加組
ConstraintLayout 2.0 正式発表!
ConstraintLayout 2.0 正式発表! ライブラリの公開はまだ
Helper機能追加 1. Layout Manipulation 2. Post-Layout Manipulation 3. Rendering or
Decorating
1.Layout Manipulation • Viewのレイアウトを簡単にする機能 ◦ ex. Barrier(1.1~) • app:constaint_referenced_ids に対象のViewのidを指定するだけ
• Linear(LinearLayout風) • Flow(FlexboxLayout風)
2.Post-Layout Manipulation • レイアウト後の操作 • app:constaint_referenced_ids に対象のViewのidを指定するだけ • Fly-in ◦
初回レイアウト時にアニメーションする • Layer ◦ 指定したViewにアニメーションなどをかけれる • Circler Reveal ◦ Circler Reveal
3.Rendering or Decorating • Viewの背景などに描画ができる • app:constaint_referenced_ids に対象のViewのidを指定するだけ
Layout Management
Layout Management • ~1.1 ◦ layoutファイルを2つ用意 ◦ ConstraintSetを使ってコード上で管理 ▪ 各状態ごとに
ConstraintSet.clone(context, layout) ▪ 状態を変える場合には ConstraintSet.applyTo(ConstrainLayout)
Layout Management • 2.0~ ◦ layoutファイルを2つ用意 ◦ xmlにStateを書く ◦ ConstraintLayout.setLayoutDescription(xml)
◦ 状態を変える場合には ConstraintLayout.setState(id)
None
None
新ViewGroup MotionLayout
セッション動画を見て! (29:10~) https://youtu.be/ytZteMo4ETk
MotionLayout • Animationが簡単にできるView ◦ ConstraintLayoutを継承 • 2つ以上の状態間をアニメーションできる ◦ KeyFrameの追加もできる •
Android Studio側のUIも便利 ◦ KeyFrameの追加 ◦ 開始・終了タイミングの変更 ◦ デザイナーでもアニメーション組めるのでは?
セッション動画を見て! (29:10~) https://youtu.be/ytZteMo4ETk
1.1と 何が変わるか
何が変わるか • ~1.1 ◦ 柔軟にレイアウトできる ネストを浅くするためのViewGroup • 2.0~ ◦ 他のViewGroupの機能を網羅
◦ 更に+αの機能がある ▪ Layout、Decoration、Animation ◦ アニメーションに特化したMotionLayout
結論 すべてのViewGroupを ConstraintLayoutに 置き換える時が来た
結論 すべてのViewGroupを ConstraintLayoutに 置き換える時が来た かもしれない
※Stableでない ライブラリの ご利用は計画的に
以上!