Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ConstraintLayout & Android Studio Design Tools
Search
Daichi Furiya (Wasabeef)
May 19, 2018
Programming
2
880
ConstraintLayout & Android Studio Design Tools
Daichi Furiya (Wasabeef)
May 19, 2018
Tweet
Share
More Decks by Daichi Furiya (Wasabeef)
See All by Daichi Furiya (Wasabeef)
DevFest Tokyo 2025 - Flutter のアプリアーキテクチャ現在地点
wasabeef
6
2k
About Flutter Architecture
wasabeef
1
260
2023 Flutter/Dart Summary
wasabeef
0
82
I/O Extended 2023 - Dart と Flutter の新機能
wasabeef
0
190
I/O Extended 2023 - Flutter 活用事例
wasabeef
10
3k
What it Takes to be a Flutter Developer
wasabeef
0
200
FlutterKaigi 2022 Keynote
wasabeef
1
620
Flutter Hooks を使ったアプリ開発 / App Development with the Flutter Hooks
wasabeef
2
1.4k
Flutter 2021 の振り返りと今後のアプリ開発に向けて / Looking back on Flutter 2021 and for future app development.
wasabeef
4
2.2k
Other Decks in Programming
See All in Programming
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
500
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
240
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
680
print("Hello, World")
eddie
2
530
Deep Dive into Kotlin Flow
jmatsu
1
320
速いWebフレームワークを作る
yusukebe
5
1.7k
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
360
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
320
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
testingを眺める
matumoto
1
140
Kiroで始めるAI-DLC
kaonash
2
580
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Optimizing for Happiness
mojombo
379
70k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
112
20k
Speed Design
sergeychernyshev
32
1.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Being A Developer After 40
akosma
90
590k
Building Applications with DynamoDB
mza
96
6.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Git: the NoSQL Database
bkeepers
PRO
431
66k
Six Lessons from altMBA
skipperchong
28
4k
Transcript
ConstraintLayout & Android Studio Design Tools wasabeef GDG Fukuoka 2018
About me Daichi Furiya Google Developer Expert CyberAgent, Inc. @wasabeef_jp
wasabeef
まずは 5 分でおさらい IO18 Android announcements
1. Android Jetpack
Jetpack
Jetpack - Navigation
2. Android App Bundle
複数 apk の管理をなくす apk サイズを小さくする インストール後でも機能をできる インストールしなくても実行できる Android App Bundle
Android App Bundle
Android App Bundle aab生成方法 $ ./gradlew assemble{Variables} $ ./gradlew bundle{Variables}
3. Kotlin
Concise Safe Interoperable Tool-Friendly Kotlin Kotlin Koans Online https://try.kotlinlang.org
Android KTX view.viewTreeObserver.addOnPreDrawListener( object : ViewTreeObserver.OnPreDrawListener { override fun onPreDraw():
Boolean { viewTreeObserver.removeOnPreDrawListener(this) actionToBeTriggered() return true } }); view.doOnPreDraw { actionToBeTriggered() }
4. Slices
Slices Google検索結果の中に自分のアプリのUI、 アクションなど表示することができる
5. App Actions
App Actions ホーム画面やスマートテキスト選択などに 自分のアプリのアクションを設定できる
Android Studio Design Tools Android Studio 3.2 Canary 15
CustomViewがエディタから選択できるように
既存のViewGroupから変換できるように
<include>先のレイアウト確認が楽に
Tools attributes
知らなかったものもたくさんあります tools:ignore tools:targetApi tools:layout tools:context tools:listitem tools:showIn tools:itemCount tools:openDrawer Tools:text
tool:menu tools:locale tools:keep and more…
頻繁に使うであろう tools attributes tools:ignore tools:targetApi tools:layout tools:context tools:listitem tools:showIn tools:itemCount
tools:openDrawer Tools:text tool:menu tools:locale tools:keep and more…
レイアウト確認で空のandroid:textだと不便な場合など <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height=“wrap_content" android:text=“TextView” app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"/>
<TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height=“wrap_content" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"/> レイアウト確認で空のandroid:textだと不便な場合など
tools:text を活用すればデザイン確認も少し楽に <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height=“wrap_content" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf=“parent" tools:text=“わさびーふ”/>
RecycierView はエディタ上だと確認しずらい
サンプルデータを表示することができる
設定もエディタ上から簡単に
わかりやすい見た目になり、データ数の調整も可能 <androidx.recyclerview.widget.RecyclerView android:layout_width="0dp" android:layout_height="wrap_content" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf=“@+id/bookmark" tools:listitem=“@layout/recycler_view_item_5” tools:itemCount=“5" />
Sample Data
Sample Data サンプル画像が用意されている
Sample Data 背景用サンプル画像も
Sample Data 自分で用意したサンプル画像も
独自で用意した画像などは フォルダを作って格納する sampledata/myavatars
カラーのサンプルデータ #f44336 #9c28b0 #3f51b5 #673ab7 sampledata/colors
sampledata/full_names ユーザ名のサンプルデータ Taro yamada Sho Otani Daichi Furiya
用意したカラーをエディタ上だけ反映してみる <ImageView android:id="@+id/imageView" android:layout_width="128dp" android:layout_height="128dp" android:src="@drawable/jetpack_hero"/>
<ImageView android:id="@+id/imageView" android:layout_width="128dp" android:layout_height="128dp" android:src="@drawable/jetpack_hero" tools:tint="@sample/colors" /> 用意したカラーをエディタ上だけ反映してみる
Names @tools:sample/first_names Cities @tools:sample/us_cities Lorem ipsum @tools:sample/lorem Avatars @tools:sample/avatars …
Predefined Sample Data
Demo
ConstraintLayout 2.0
柔軟なレイアウト ViewGroupの階層を深くしない UI Builderが充実 API 9 から利用可能で 99.99% の端末で動作 ライブラリサイズが
160kb 未満 ConstraintLayout
ConstraintLayout 1.1 (2018) dependencies { implementation 'androidx.constraintlayout:constraintlayout:1.1.0' }
相対・センタリング・バイアス グルーピング 非表示時のハンドリング ガイドライン ConstraintSet ConstraintLayout 1.0 (2017)
Chain サポートの向上 New Optimizer Barrier … more ConstraintLayout 1.1 (2018)
Helper
UIの作成を楽にするもの GuidlineやBarrier 各Viewの参照をまとめたりもできる Helper
Barrier 例えば文字が長くなっ た方に右側の要素を合 わせたりできる
Guidline 例えば文字が長くなっ た方に右側の要素を合 わせたりできる
Layout Manipulation Post-Layout Manipulation Rendering or Decorating Helper
Layer
表示・非表示サポート 変形アニメーションサポート Layer
Layer
Circular Revel
Circular Revel 自分で実装するとなる と難しい、このアニ メーションも簡単にで きる
Decorators
Lava Decorator
Lava Decorator Floating Action Button のアニメーションに応 用したりできる
Next future
MotionLayout
MotionLayout ConstraintLayoutのサブクラス MotionScene ConstraintLayoutStatesのアニ メーションをやってくれる
MotionLayout CustomViewのアニメーションサ ポート Custom attributeのサポート
MotionLayout
Motion Editor
Motion Editor
Motion Editor
Conclusion
2018/06/08(金) 19:00 〜 (株)メルカリ 福岡オフィス http://bit.ly/HKT-IO18
Thank you. twitter.com/wasabeef_jp wasabeef.jp github.com/wasabeef