Androidアプリ内チュートリアル作成の取り組み

新規でアプリをインストールした際に下のように画面を表示できるようにしたいと思っています。

実装手順

  • LaunchedEffect()とdelay()でmutableState(チュートリアルを画像の集まりと考えてsceneと呼んでいる)を一定時間おきに進める
  • そのmutableStateを提供するcompostionLocalを作成する
  • ハイライトやテキストを付加させたいcomposableのmodifierをcompositionLocalの値に応じて渡す(以下にそのコード片を示す)
val textPaint = Paint().asFrameworkPaint().apply {
        textSize = 50.sp.value
        color = android.graphics.Color.BLACK
    }

val modifierForButton:Modifier =
    if (isTutorial && LocalScene.current == 0)
        Modifier.drawBehind {
            drawCircle(
                Color.LightGray, this.size.maxDimension,
                alpha = 0.5f
            )
            drawIntoCanvas { canvas: Canvas ->
                canvas.nativeCanvas.drawText(
                    "description1",
                    this.center.x,
                    this.center.y + 90,
                    textPaint
                )
            }
        }
    else Modifier

改善したい点

  • 条件分岐に応じてmodfierForButtonなどといった定義を要すること。

当初はModifierの拡張関数としてModifier.explainedBy(scene:Int):Modifierなどと定義して即座にcomposableに渡せたらと思っていたが、そのようにしてcompositionLocalの値を読もうとすると@Composable invocations can only happen from the context of a @Composable functionと言われてしまい出来なかった。