Open4ヶ月前にコメント追加1

カラーピッカー導入

Kotlin

るるすた

依存関係

build.gradle.kts(Module:app)

dependencies {
    //カラーピッカー
    implementation(libs.compose.colorpicker)

libs.versions.toml

[viersions]

colorpicker = "1.1.2"

[libraries]

compose-colorpicker = { module = "com.github.skydoves:colorpicker-compose", version.ref = "colorpicker" }

settings.gradle.kts

以下緑の部分を追加。

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
+        maven(url = "https://jitpack.io")
    }
}

→SyncNow！

カラーピッカーを設定

カラーピッカーはコンポーザブル関数の中に設定していく。
本体はHsvColorPicker。
BrightnessSliderは明暗が必要な時に設定。
これのほか、透明度を設定するAlphaSliderもある。
(AlphaSliderの使い方は、BrightnessSliderと一緒）

@Composable
fun TestColorPicker() {
    var color by remember { mutableStateOf(Color.White) }   //選択している色
    val controller = rememberColorPickerController()        //色選択コントローラー

    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
            .padding(dimensionResource(R.dimen.p_large))
    ) {
        Row {
            Box(    //選択している色を表示する場所（わかりやすくするため設置）
                modifier = Modifier
                    .size(width = 48.dp, height = 32.dp)
                    .background(color)
                    .border(1.dp, Color.Black)
//                    .clickable { color = controller.selectedColor.value }
            )
            HsvColorPicker(     //円形のピッカー
                controller = controller,
                onColorChanged = { color = it.color },  //選択した色を取得→Boxに渡す
                modifier = Modifier
                    .size(height = 250.dp, width = 250.dp)  //ピッカーの大きさ
            )
        }
        Spacer(modifier = Modifier.padding(dimensionResource(R.dimen.p_medium)))
        BrightnessSlider(       //明暗スライダー
            modifier = Modifier
                .fillMaxWidth()
                .height(32.dp)
                .padding(horizontal = dimensionResource(R.dimen.p_small)),
            controller = controller,
        )
    }
}