月: 2023年10月

JetpackComposeのプレビューが表示されないときのメモ

@Composableが置かれているモジュールのbuild.gradle.ktsに下記を追加

debugImplementation("androidx.compose.ui:ui-tooling:1.5.4") // バージョンは適宜調べてください
implementation("androidx.compose.ui:ui-tooling-preview-android:1.5.4")

プレビューするときにComposeが単体で実行可能になるように引数を与えて上げるようにします。

正しく動かなくても良いので適当なデータを渡します。

@Preview
@Composable
fun NavigationRailPreview() =
    NavigationRail(uiState = MainUiState(), onClick = { _, _ -> })

@Composable
fun NavigationRail(uiState: MainUiState, onClick: (index: Int, item: NavigationItem) -> Unit) {
    NavigationRail {
        ....
    }
}

AndroidStudioにプレビューが表示されるようになります。


[Jetpack Compose] Lottieを使って画面全体に紙吹雪を表示する

iOSだと紙吹雪のライブラリがあったりして、AndroidViewでも以前は紙吹雪を出すライブラリはありましたが、Compose化に伴って紙吹雪が出しにくくなりました。Lottieというアニメーションライブラリを使うと画面上にアニメーションを表示することができます。

https://github.com/airbnb/lottie-android

Lottie自体はAndroidViewとJetpackComposeの両方に対応していますがJetpackComposeの方で紙吹雪を表示します。

LottieFilesというサイトにアニメーションファイルがあるのでそこからダウンロードします。(会員登録が必要かも)

https://lottiefiles.com/

右上の検索からconfettiとかconfetti transparentと入力すると紙吹雪のアニメーションが表示されるのでアプリに入れたいアニメーションを選択してJsonダウンロードをします。

ダウンロードしたJsonファイルをAndroidStudioのres/raw/フォルダ等に入れておきます。

アニメーションを表示したいモジュールのbuild.gradle.ktsにimplementation(“com.airbnb.android:lottie-compose:6.1.0”)を追加し、Sync Project with Gradle Filesを実行します。(バージョンは適宜確認してください)

Activityで下記のように書きます。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ConfettiTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background,
                ) {
                    Confetti()
                }
            }
        }
    }
}

@Composable
@Preview
fun Confetti() {
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.confetti))
    var isPlaying by remember { mutableStateOf(true) }
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Button(
            onClick = { isPlaying = !isPlaying },
            content = { Text(if (isPlaying) "Stop" else "Start") }
        )
        LottieAnimation(
            composition,
            isPlaying = isPlaying
        )
    }
}

下記のレポジトリから詳細を確認できます。

https://github.com/saitoyusuke/Confetti