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