Kotlin Practice # 16 Range Slider 初探

上一篇完成了Retrofit的URL參數設定，讓API在URL加入參數時可以依照不同的參數內容進行設定。

Kotlin Practice # 15 Compose Retrofit 多參數URL串接

而這一篇則要學習silider的另一個功能，就是有範圍的slider，在iOS上需要第三方套件的協助，而Jetpack Compose已經提供原生的RangeSlider了。

首先因為原本RangeSlider原本仍是實驗性質的元件，在material3時算是正式的元件，首先要先implementation material3，在build.gradle的dependencies內加入下列程式碼

    implementation "androidx.compose.material3:material3:1.0.1"
    implementation "androidx.compose.material3:material3-window-size-class:1.0.1"

接著於build.gradle的kotlinOptions換成下列內容

    kotlinOptions {
        jvmTarget = '1.8'
        allWarningsAsErrors = false
        freeCompilerArgs += [
                '-opt-in=androidx.compose.material3.ExperimentalMaterial3Api'
        ]
    }

重新sync專案接著基本上就可以開始使用RangeSlider了。

開啟專案後先建立一個ViewModel，裡面存放RangeSlider需要用的值，順便練習MVVM的基礎運用。

class RangeViewModel: ViewModel() {
    
    // slider的範圍
    val sliderRange = 0f..1f

    // slder初始的範圍
    val rangeIndex =  mutableStateOf(0.15f..0.85f)

    // 設定新的range
    fun setNewRange(range: ClosedFloatingPointRange<Float>) {
        rangeIndex.value = range
    }
    
}

接著在MainActivity內原本的Greeting內加入下列內容。

@Composable
fun Greeting( rangeVM: RangeViewModel) {
    val df = DecimalFormat("###.##")
    // slider的顏色
    val rangeSliderColors = SliderDefaults.colors(
        thumbColor = Color.Blue,
        activeTrackColor = Color.Red,
        inactiveTrackColor = Color.Green
    )
    Column(horizontalAlignment = Alignment.CenterHorizontally) {

        // 顯示slider數值的Text
        androidx.compose.material3.Text(
            text = "左側值: ${df.format(rangeVM.rangeIndex.value.start.toDouble())}  右側值:${df.format(rangeVM.rangeIndex.value.endInclusive.toDouble())}",
            textAlign = TextAlign.Center
        )

        // 顯示的Slider
        androidx.compose.material3.RangeSlider(
            value = rangeVM.rangeIndex.value,
            onValueChange = { sliderValues_ ->
                rangeVM.setNewRange( sliderValues_)
            },
            valueRange = rangeVM.sliderRange,
            modifier = Modifier.padding(20.dp),
            colors = rangeSliderColors
        )
    }
}

接著在MainActivity內加入RangeViewModel與調整Greeting的參數

class MainActivity : ComponentActivity() {
    val rangeViewModel by viewModels<RangeViewModel>()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            KP16RangeSliderTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Greeting(rangeViewModel)
                }
            }
        }
    }
}

接著可以嘗試看看顯示的結果

可以看到RangeSlider透過上述簡短的程式碼就成功做出來了，對於side project又往前了一小步，持續加油!!!

參考資源：

Jetpack Compose Slider (with Examples)