Pro Yearly is on sale from $80 to $50! »

ConstraintLayout & Android Studio Design Tools

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