$30 off During Our Annual Pro Sale. View Details »

Jetpack Compose さわってみた / tried writing code wit...

kenken
August 15, 2019

Jetpack Compose さわってみた / tried writing code with Jetpack Compose

kenken

August 15, 2019
Tweet

More Decks by kenken

Other Decks in Programming

Transcript

  1. • 高橋 健太 ◦ kenken | @tkhs0604 ◦ https://tkhs0604.hatenablog.com •

    Gunosy Inc. • SI営業→エンジニア(iOS/Android/Web)→Androidエンジニア • アカペラ ◦ 最近ORICON NEWSに少しだけ載りました 自己紹介
  2. • Jetpack Compose とは ◦ 宣言的UIとは • UI生成までの流れ • コンポーネントの作成方法

    ◦ @Composable ◦ @Model • まとめ • さらに知りたい方へ アジェンダ
  3. • Google I/O 2019 • Android Jetpack • Kotlin •

    宣言的UI ◦ cf. Flutter、React Native、Litho、Vue.js • Pre-alpha版 (2019/8/12時点) ◦ ⚠大きく変更が入る可能性があります Jetpack Compose とは
  4. • Concise and Idiomatic Kotlin ◦ Kotlinにより簡潔に記述可能 • Declarative ◦

    フレームワークによる描画の最適化 • Compatible ◦ 既存のView (Android API)と併用可能 • Enable Beautiful Apps ◦ Material Designやアニメーションが利用可能 • Accelerate Development ◦ Apply Changes、Live Previewの活用 → 未だなさそう? コアコンセプト
  5. • Concise and Idiomatic Kotlin ◦ Kotlinにより簡潔に記述可能 • Declarative ◦

    フレームワークによる描画の最適化 • Compatible ◦ 既存のView (Android API)と併用可能 • Enable Beautiful Apps ◦ Material Designやアニメーションが利用可能 • Accelerate Development ◦ Apply Changes、Live Previewの活用 → 未だなさそう? Jetpack Compose の コアコンセプト 宣言的?
  6. 宣言的UIとは 宣言的 命令的 What (何をするか)を記述 How (どのようにするか)を記述 遅延評価 即時評価 //

    android.widget.Button Button(this).apply { text = "button" setBackgroundColor(Color.BLUE) setOnClickListener { ... } } // androidx.ui.material.Button Button( text = "button", color = +themeColor { Color.Blue }, onClick = { … } )
  7. Hello World class SampleActivity : Activity() { override fun onCreate(savedInstanceState:

    Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { MaterialTheme { Center { Text( text = "Hello World", style = +themeTextStyle { h3 } ) } } } } }
  8. Hello World class SampleActivity : Activity() { override fun onCreate(savedInstanceState:

    Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { MaterialTheme { Center { Text( text = "Hello World", style = +themeTextStyle { h3 } ) } } } } } • Activityの拡張関数 • Root ViewとなるFrameLayoutの準備 • 引数で受け取ったコンポーネントを Root Viewの直下へ追加
  9. Hello World class SampleActivity : Activity() { override fun onCreate(savedInstanceState:

    Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { MaterialTheme { Center { Text( text = "Hello World", style = +themeTextStyle { h3 } ) } } } } } • 各種リソースへアクセスするための設定 ◦ Context ◦ Density ◦ FocusManager ◦ TextInputService • 引数で受け取ったコンポーネントを AndroidCraneViewへ追加
  10. Hello World class SampleActivity : Activity() { override fun onCreate(savedInstanceState:

    Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { MaterialTheme { Center { Text( text = "Hello World", style = +themeTextStyle { h3 } ) } } } } } • コンポーネントのThemeの設定 ◦ TextStyleやColorの設定も関数で行う
  11. Hello World class SampleActivity : Activity() { override fun onCreate(savedInstanceState:

    Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { MaterialTheme { Center { Text( text = "Hello World", style = +themeTextStyle { h3 } ) } } } } } • コンポーネントのAlignの設定 ◦ MarginやPaddingの設定も関数で行う
  12. Hello World class SampleActivity : Activity() { override fun onCreate(savedInstanceState:

    Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper { MaterialTheme { Center { Text( text = "Hello World", style = +themeTextStyle { h3 } ) } } } } } • Android APIでいうところのTextView +…?
  13. コンポーネントの作成 @Composable fun CounterWidget() { Column { Text( text =

    "Count: 0", style = +themeTextStyle { h5 } ) Button( text = "+" ) } }
  14. コンポーネントの作成 class SampleActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?)

    { super.onCreate(savedInstanceState) setContent { CraneWrapper { MaterialTheme { Center { CounterWidget() } } } } }
  15. • モデルクラスを作成する ◦ @Modelをクラスに付与する • モデルクラスを利用する ◦ コンポーネント内で+state関数によって状態管理用の Stateオブジェクトを生成する •

    Stateオブジェクトのプロパティが更新されると、 フレームワークによってUIが再描画される 状態を持ったコンポーネントの作成
  16. 状態を持ったコンポーネントの作成 @Model data class CounterModel( var count: Int ) @Composable

    fun CounterWidget() { Column { val counter by +state { CounterModel(0) } Text( text = "Count: ${counter.count}", style = +themeTextStyle { h5 } ) Button( text = "+", onClick = { counter.count++ } ) } }
  17. 状態を持ったコンポーネントの作成 @Model data class CounterModel( var count: Int ) @Composable

    fun CounterWidget() { Column { val counter by +state { CounterModel(0) } Text( text = "Count: ${counter.count}", style = +themeTextStyle { h5 } ) Button( text = "+", onClick = { counter.count++ } ) } } • プリミティブ型、String型の場合は val counter = +state { 0 } で呼び出し可能
  18. 状態を持ったコンポーネントの作成 @Model data class CounterModel( var count: Int ) @Composable

    fun CounterWidget() { Column { val counter by +state { CounterModel(0) } Text( text = "Count: ${counter.count}", style = +themeTextStyle { h5 } ) Button( text = "+", onClick = { counter.count++ } ) } } • @Modelの付与されたクラスでないと UIの再描画はされない