Kotlin 1.8 で JetpackCompose を使う

Kotlin を 1.7.21 から 1.8.0 に上げます。


[versions]

# kotlin = "1.7.21"
kotlin = "1.8.0"
compose-compiler = "1.4.0-alpha02"

build します。

はい、エラーでました。


e: This version (1.4.0-alpha01) of the Compose Compiler requires Kotlin version 1.7.21
but you appear to be using Kotlin version 1.7.21 which is not known to be compatible.
Please fix your configuration (or `suppressKotlinVersionCompatibilityCheck` but don't say I didn't warn you!).
https://developer.android.com/jetpack/androidx/releases/compose-kotlin#pre-release_kotlin_compatibility

表示されてるリンクに行きます。

はい、Kotlin 1.8 ありません。

👉 Compose to Kotlin Compatibility Map  |  Android Developers hatena-bookmark

さらに、そのページにあるリンク先へ。

ここにありますね。

👉 Compose Compiler Maven Index hatena-bookmark

さらに、このページにあるリンク先の記述を参考に変更します。


# libs.versions.toml

[versions]

# kotlin = "1.7.21"
# compose-compiler = "1.4.0-alpha02" # composeOptions ↔ kotlin 1.7.21

kotlin = "1.8.0"
compose-compiler = "1.4.0-dev-k1.8.0-33c0ad36f83"


// settings.gradle

dependencyResolutionManagement {
  repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
  repositories {
    google()
    mavenCentral()

    maven {
      url "https://androidx.dev/storage/compose-compiler/repository/"
    }


// build.gradle (:app)

composeOptions {
  kotlinCompilerExtensionVersion libs.versions.compose.compiler.get()
}

👉 jimgoog/ComposeAppUsingPrereleaseComposeCompiler: Demonstrates using Compose with pre-releases of KotlinCompiler and ComposeCompiler hatena-bookmark


 

■ まとめ

Kotlin バージョンと Compose Compiler のバージョンは密接に関係しています。

ちなみに、Compose UI 側のバージョンは以前のままの alpha03 (現最新) で、まあまあ良さげです。


[versions]

kotlin = "1.8.0"
compose-compiler = "1.4.0-dev-k1.8.0-33c0ad36f83"
compose-ui = "1.4.0-alpha03"


[libraries]

compose-ui = { module = "androidx.compose.ui:ui", version.ref = "compose-ui" }
compose-ui-tooling = { module = "androidx.compose.ui:ui-tooling", version.ref = "compose-ui" }
compose-ui-tooling-preview = { module = "androidx.compose.ui:ui-tooling-preview", version.ref = "compose-ui" }
compose-ui-test-manifest = { module = "androidx.compose.ui:ui-test-manifest", version.ref = "compose-ui" }
compose-ui-test-junit4 = { module = "androidx.compose.ui:ui-test-junit4", version.ref = "compose-ui" }


dyn4j の実力を JetpackCompose wrapper Physics Layout で思い知る

やはり Java のライブラリ群を使えることは素晴らしいことです。

以下、サンプルコードを参考に Activity を書き換えます。


👉 KlassenKonstantin/ComposePhysicsLayout: A custom Compose layout backed by a physics engine hatena-bookmark





class MainActivity : ComponentActivity() {

  @SuppressLint("SourceLockedOrientationActivity")
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    WindowCompat.setDecorFitsSystemWindows(window, false)
    requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
    setContent {
      PhysicsLayoutTheme {
        Surface(
          modifier = Modifier.fillMaxSize(),
          color = MaterialTheme.colorScheme.background
        ) {

          val simulation = rememberSimulation()
          val balls = remember { mutableStateListOf<BallMeta>() }

          GravitySensor {
            simulation.setGravity(it.copy(x = -it.x).times(3f))
          }

          LaunchedEffect(Unit) {
            var i = 0
            val count = colors.count()
            while (true) {
              balls.add(BallMeta(color = colors[i % count]))
              delay(100)
              i++
            }
          }

          LaunchedEffect(Unit) {
            delay(5000)
            while (true) {
              balls.removeFirst()
              delay(100)
            }
          }

          Box {
            PhysicsLayout(
              modifier = Modifier.systemBarsPadding(),
              simulation = simulation
            ) {

              Block(   0, -200)
              Block(-125, -100)
              Block( 125, -100)
              Block(   0,    0)
              Block(-100,  100)
              Block( 100,  100)
              Block(   0,  200)

              balls.forEach { meta ->
                Ball(0, -350, meta = meta)
              }

            }
          }

        }
      }
    }
  }
}

@Composable
fun PhysicsLayoutScope.Block(x: Int, y: Int) {
  val offset = offsetDp(x, y)
  Card(
    modifier = Modifier
      .body(
        isStatic = true,
        initialTranslation =  offset
      )
  ) {
    Spacer(
      modifier = Modifier
        .size(62.dp)
        .background(color = Color.Gray)
    )
  }
}

@Composable
fun PhysicsLayoutScope.Ball(x: Int, y: Int, meta: BallMeta) {

  val initialOffset = offsetDp(x, y)

  Card(
    modifier = Modifier.body(
      id = meta.id,
      shape = RoundedCornerShape(meta.corner),
      initialTranslation = Offset(initialOffset.x, initialOffset.y),
      initialImpulse = Offset((Random.nextFloat() - 0.5f) * 2, (Random.nextFloat()) * 2),
    ),
    shape = RoundedCornerShape(meta.corner),
    colors = CardDefaults.cardColors(containerColor = meta.color)
  ) {
    Icon(
      modifier = Modifier
        .size(32.dp)
        .padding(4.dp),
      imageVector = Icons.Rounded.Rocket,
      contentDescription = null,
      tint = Color.White
    )
  }
}

@Composable
fun offsetDp(x: Int, y: Int) = with(LocalDensity.current) { Offset(x.dp.toPx(), y.dp.toPx()) }


@Immutable
data class BallMeta(
  val id: String = System.currentTimeMillis().toString(),
  val color: Color,
  val corner: Int = listOf(0, 50).shuffled()[0]
)

private val colors = listOf(
  Color(0xFFEF5350), Color(0xFFEC407A), Color(0xFFAB47BC), Color(0xFF7E57C2),
  Color(0xFF29B6FC), Color(0xFF26C6DA), Color(0xFF26A69A), Color(0xFF66BB6A),
  Color(0xFF9CCC65), Color(0xFFD4E157), Color(0xFFFFEE58), Color(0xFFFFCA28),
  Color(0xFFFFA726), Color(0xFFFF7043), Color(0xFF8D6E63), Color(0xFFBDBDBD),
  Color(0xFF78909C)
)

強力です。

👉 dyn4j hatena-bookmark
👉 【Jetpack Compose】dp / px / sp の相互変換 hatena-bookmark




【Android Studio】Gradle Version Catalog「Live Template」を使って インライン・テーブル に瞬時に書き換える

だるいですよね、インラインテーブル記述。


name = { first = "Tom", last = "Preston-Werner" }
point = { x = 1, y = 2 }
animal = { type.name = "pug" }

👉 TOML: 日本語 v0.5.0 hatena-bookmark

Android Studio でも

Graadle Version Catalog で、最初は、こんな記述でも


[plugins]
android-material = "com.google.android.material:material:1.8.0-alpha02"

やがて、


[plugins]
android-material = { module = "com.google.android.material:material", version = "1.8.0-alpha02" }

となり


[versions]
android-material = "1.8.0-alpha02"

[plugins]
android-material = { module = "com.google.android.material:material", version.ref = "android-material" }

というふうに変わっていきます。

大量にやってるのも地味にだるい。

Live Templete を使って書き換えます。


Preferences

  ↓

Live Templates

から作っていきます。

ここマクロたちは、思ったより使いづらいものが多い。

live template macro

👉 intellij-community/platform/lang-impl/src/com/intellij/codeInsight/template/macro at master · JetBrains/intellij-community hatena-bookmark

割と使える Groovy のマクロ。

groovyScript(, [arg, ...])

Executes the Groovy script passed as a string.

The first argument is a string with either the text of the script or the path to the file that contains the script. The function passes other optional arguments to the script as values for _1, _2, _3, ..., _n variables. Also, you can access the current editor from inside the script using the _editor variable.

The following example shows a groovyScript() function that splits the selected text into words and displays them as a numbered list:


groovyScript("def result = ''; _1.split().eachWithIndex { item, index -> result = result + index.next() + '. ' + item + System.lineSeparator() }; return result;", SELECTION);

👉 Edit Template Variables dialog | IntelliJ IDEA hatena-bookmark

以下の感じで設定して4つのテンプレートを記述しました。

どれも似たような記述なので、一つだけ貼っておきます。

使い回せます。

使い方は、該当文字列をコピーしてから、Abbreviation を入力で、テンプレートを吐き出しながらキーなどを編集してください。

結果。

toml live template

キーの編集に連携されて関連記述が編集されるのがいいところでしょうか。

けどまあ、Android Studio 本体の機能更新が待たれるところですが。

 

🙆 追記

複数行一括のほうがいいので以下の方法を実際は使っています。