ConstraintLayout & Android Studio Design Tools

Transcript

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