Jetpack Compose 0.1.0-dev03から0.1.0-dev04にしたときに変更が必要だったところ

Jetpack Compose 0.1.0-dev04が出ましたね、今回からリリースノートのページもできたみたいです。

developer.android.com

まだプレビューなんでどんどんAPIが変わっていきます。もしまともに使ってるとえらいことになるわけですが、個人的にproduction readyを待たずなんかアプリ出したろと思っているのでガンガン使っています。 で、0.1.0-dev03から0.1.0-dev04にしてみると案の定えらいことになったので変更が必要だったところをまとめます。

0.1.0-dev03から0.1.0-dev04にしたときの様子

コンパイラの設定

0.1.0-dev03では、どうもkaptとの相性が悪く、Backend Internal error: Exception during code generation みたいなエラーがでてコンパイルできなかったのですが、0.1.0-dev04では、オプションを追加することで回避できるようになったようです。

android {
  composeOptions {
    kotlinCompilerExtensionVersion "0.1.0-dev04"
  }
}

最初、compileOptionsに書いてエラーになって頭を抱えたんですが、composeOptionsでした。

unaryPlusの廃止

+state とか +ambient とか +imageResource とかの、+が要らなくなりました。単純に+を消して回ればOK。

effectOfが廃止

unaryPlusの廃止と同時にeffectOfも廃止になりました。代わりに @Compose を使えとのこと。

before

private fun paint(color: Color, strokeCap: StrokeCap, strokeWidth: Dp) = effectOf<Paint> {
    val paint = +memo { Paint() }
    // ...
    paint
}

after

@Composable
private fun paint(color: Color, strokeCap: StrokeCap, strokeWidth: Dp): Paint {
    val paint = remember { Paint() }
    // ...
    return paint
}

まぁカスタムでeffectOf使うケースあんまりなさそうなのでもし引っかかったらという感じです。

memoがrememberにリネーム

before

val count = +memo { 0 }

after

val count = remember { 0 }

dp, sp, IntPxなどが移動

before

import androidx.ui.core.Dp
import androidx.ui.core.PxSize
import androidx.ui.core.dp
import androidx.ui.core.sp

after

import androidx.ui.unit.Dp
import androidx.ui.unit.PxSize
import androidx.ui.unit.dp
import androidx.ui.unit.sp

FlexRow, FlexColumnが非推奨

ここが一番たいへんでした。FlexRow、FlexColumnが非推奨となり、代わりにRow、Columnを使えとのこと。

次のようなレイアウトを考えると、

以前はFlexRowとinflexible, flexibleを使って書いてました。

before

@Preview
@Composable
fun DefaultPreview() {
  MaterialTheme {
    FlexRow {
      inflexible {
        Padding(16.dp) {
          Row {
            Padding(left = 4.dp) {
              Text("1")
            }
            Padding(left = 4.dp) {
              Text("2")
            }
          }
        }
      }
      flexible(1f) {
        Container(
          modifier = ExpandedWidth,
          alignment = Alignment.TopRight
        ) {
          Padding(16.dp) {
            Text("こんにちは")
          }
        }
      }
    }
  }
}

FlexRowが非推奨となりinflexible, flexibleなども消滅しました。代わりにRowを使います。

after

@Preview
@Composable
fun DefaultPreview() {
  MaterialTheme {
    Row(modifier = LayoutWidth.Fill) {
      Padding(16.dp) {
        Row {
          Padding(left = 4.dp) {
            Text("1")
          }
          Padding(left = 4.dp) {
            Text("2")
          }
        }
      }
      Container(
        alignment = Alignment.TopRight,
        modifier = LayoutFlexible(1f)
      ) {
        Padding(16.dp) {
          Text("こんにちは")
        }
      }
    }
  }
}

Rowの中はデフォルトがinflexibleです。flexibleはLayoutFlexibleを使います。LayoutFlexibleはRowScopeからしかアクセスできません。

ExpandHeight, ExpandWidthの廃止

LayoutHeight.Fill, LayoutWidth.Fillになりました。

おわり

どんどん進化してますね。βが出るのが楽しみです。ScrollingListというRecyclerViewぽいやつも早くほしいっす。