Slide 1
Slide 1 text
ConstraintLayout &
Android Studio Design Tools
wasabeef
GDG Fukuoka 2018
Slide 2
Slide 2 text
About me
Daichi Furiya
Google Developer Expert
CyberAgent, Inc.
@wasabeef_jp wasabeef
Slide 3
Slide 3 text
まずは 5 分でおさらい
IO18 Android announcements
Slide 4
Slide 4 text
1. Android Jetpack
Slide 5
Slide 5 text
Jetpack
Slide 6
Slide 6 text
Jetpack - Navigation
Slide 7
Slide 7 text
2. Android App Bundle
Slide 8
Slide 8 text
複数 apk の管理をなくす
apk サイズを小さくする
インストール後でも機能をできる
インストールしなくても実行できる
Android App Bundle
Slide 9
Slide 9 text
Android App Bundle
Slide 10
Slide 10 text
Android App Bundle
aab生成方法
$ ./gradlew assemble{Variables}
$ ./gradlew bundle{Variables}
Slide 11
Slide 11 text
3. Kotlin
Slide 12
Slide 12 text
Concise
Safe
Interoperable
Tool-Friendly
Kotlin
Kotlin Koans Online
https://try.kotlinlang.org
Slide 13
Slide 13 text
Android KTX
view.viewTreeObserver.addOnPreDrawListener(
object : ViewTreeObserver.OnPreDrawListener {
override fun onPreDraw(): Boolean {
viewTreeObserver.removeOnPreDrawListener(this)
actionToBeTriggered()
return true
}
});
view.doOnPreDraw { actionToBeTriggered() }
Slide 14
Slide 14 text
4. Slices
Slide 15
Slide 15 text
Slices
Google検索結果の中に自分のアプリのUI、
アクションなど表示することができる
Slide 16
Slide 16 text
5. App Actions
Slide 17
Slide 17 text
App Actions
ホーム画面やスマートテキスト選択などに
自分のアプリのアクションを設定できる
Slide 18
Slide 18 text
Android Studio
Design Tools
Android Studio 3.2 Canary 15
Slide 19
Slide 19 text
CustomViewがエディタから選択できるように
Slide 20
Slide 20 text
既存のViewGroupから変換できるように
Slide 21
Slide 21 text
先のレイアウト確認が楽に
Slide 22
Slide 22 text
Tools attributes
Slide 23
Slide 23 text
知らなかったものもたくさんあります
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…
Slide 24
Slide 24 text
頻繁に使うであろう 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…
Slide 25
Slide 25 text
レイアウト確認で空のandroid:textだと不便な場合など
Slide 26
Slide 26 text
レイアウト確認で空のandroid:textだと不便な場合など
Slide 27
Slide 27 text
tools:text を活用すればデザイン確認も少し楽に
Slide 28
Slide 28 text
RecycierView はエディタ上だと確認しずらい
Slide 29
Slide 29 text
サンプルデータを表示することができる
Slide 30
Slide 30 text
設定もエディタ上から簡単に
Slide 31
Slide 31 text
わかりやすい見た目になり、データ数の調整も可能
Slide 32
Slide 32 text
Sample Data
Slide 33
Slide 33 text
Sample Data
サンプル画像が用意されている
Slide 34
Slide 34 text
Sample Data
背景用サンプル画像も
Slide 35
Slide 35 text
Sample Data
自分で用意したサンプル画像も
Slide 36
Slide 36 text
独自で用意した画像などは
フォルダを作って格納する
sampledata/myavatars
Slide 37
Slide 37 text
カラーのサンプルデータ
#f44336
#9c28b0
#3f51b5
#673ab7
sampledata/colors
Slide 38
Slide 38 text
sampledata/full_names
ユーザ名のサンプルデータ
Taro yamada
Sho Otani
Daichi Furiya
Slide 39
Slide 39 text
用意したカラーをエディタ上だけ反映してみる
Slide 40
Slide 40 text
用意したカラーをエディタ上だけ反映してみる
Slide 41
Slide 41 text
Names @tools:sample/first_names
Cities @tools:sample/us_cities
Lorem ipsum @tools:sample/lorem
Avatars @tools:sample/avatars
…
Predefined Sample Data
Slide 42
Slide 42 text
Demo
Slide 43
Slide 43 text
ConstraintLayout 2.0
Slide 44
Slide 44 text
柔軟なレイアウト
ViewGroupの階層を深くしない
UI Builderが充実
API 9 から利用可能で 99.99% の端末で動作
ライブラリサイズが 160kb 未満
ConstraintLayout
Slide 45
Slide 45 text
ConstraintLayout 1.1 (2018)
dependencies {
implementation 'androidx.constraintlayout:constraintlayout:1.1.0'
}
Slide 46
Slide 46 text
相対・センタリング・バイアス
グルーピング
非表示時のハンドリング
ガイドライン
ConstraintSet
ConstraintLayout 1.0 (2017)
Slide 47
Slide 47 text
Chain サポートの向上
New Optimizer
Barrier
… more
ConstraintLayout 1.1 (2018)
Slide 48
Slide 48 text
Helper
Slide 49
Slide 49 text
UIの作成を楽にするもの
GuidlineやBarrier
各Viewの参照をまとめたりもできる
Helper
Slide 50
Slide 50 text
Barrier
例えば文字が長くなっ
た方に右側の要素を合
わせたりできる
Slide 51
Slide 51 text
Guidline
例えば文字が長くなっ
た方に右側の要素を合
わせたりできる
Slide 52
Slide 52 text
Layout Manipulation
Post-Layout Manipulation
Rendering or Decorating
Helper
Slide 53
Slide 53 text
Layer
Slide 54
Slide 54 text
表示・非表示サポート
変形アニメーションサポート
Layer
Slide 55
Slide 55 text
Layer
Slide 56
Slide 56 text
Circular Revel
Slide 57
Slide 57 text
Circular Revel
自分で実装するとなる
と難しい、このアニ
メーションも簡単にで
きる
Slide 58
Slide 58 text
Decorators
Slide 59
Slide 59 text
Lava Decorator
Slide 60
Slide 60 text
Lava Decorator
Floating Action Button
のアニメーションに応
用したりできる
Slide 61
Slide 61 text
Next future
Slide 62
Slide 62 text
MotionLayout
Slide 63
Slide 63 text
MotionLayout
ConstraintLayoutのサブクラス
MotionScene
ConstraintLayoutStatesのアニ
メーションをやってくれる
Slide 64
Slide 64 text
MotionLayout
CustomViewのアニメーションサ
ポート
Custom attributeのサポート
Slide 65
Slide 65 text
MotionLayout
Slide 66
Slide 66 text
Motion Editor
Slide 67
Slide 67 text
Motion Editor
Slide 68
Slide 68 text
Motion Editor
Slide 69
Slide 69 text
Conclusion
Slide 70
Slide 70 text
2018/06/08(金) 19:00 〜
(株)メルカリ 福岡オフィス
http://bit.ly/HKT-IO18
Slide 71
Slide 71 text
Thank you.
twitter.com/wasabeef_jp
wasabeef.jp
github.com/wasabeef