This article will introduce the Slider, CircularProgressIndicator and LinearProgressIndicator usage

A: the Slider

Slider is similar to traditional Seekbar, so let’s look at the code first

@Composable
fun Slider(
    value: Float,
    onValueChange: (Float) - >Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    valueRange: ClosedFloatingPointRange<Float> = 0f.1.f,
    /*@IntRange(from = 0)*/
    steps: Int = 0,
    onValueChangeFinished: (() -> Unit)? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    colors: SliderColors = SliderDefaults.colors()
) 
Copy the code
  • The value progress values
  • OnValueChange Monitors progress changes
  • Modifier modifier
  • Enabled Whether it is available
  • ValueRange Progress values range from 0 to 1 by default
  • Steps splits the progress bar into (Steps +1) segments, such as 2. If we pull the progress bar between the first paragraph, it will automatically go to the first paragraph after half of the first paragraph, and back to the start position before half of the first paragraph.
  • OnValueChangeFinished Completes listening for progress changes
  • InteractionSource can handle state, such as what happens when it’s pressed and what happens when it’s normal. Just like we did before, let’s write the Selector in the layout file. For example, in the example below, the border line is green if it is selected and black if it is not. InteractionSource. CollectIsPressedAsState () to determine whether to press state interactionSource. CollectIsFocusedAsState () Determine whether acquiring interactionSource. The focus of state collectIsDraggedAsState () to determine whether the drag Tell us about when the Button a the properties Button
  • Colors Sets various colors. The default implementation is sliderdefaults.colors. Let’s look at the code in detail 
    @Composable
fun colors(
      thumbColor: Color = MaterialTheme.colors.primary,
      disabledThumbColor: Color = MaterialTheme.colors.onSurface
          .copy(alpha = ContentAlpha.disabled)
          .compositeOver(MaterialTheme.colors.surface),
      activeTrackColor: Color = MaterialTheme.colors.primary,
      inactiveTrackColor: Color = activeTrackColor.copy(alpha = InactiveTrackAlpha),
      disabledActiveTrackColor: Color =
          MaterialTheme.colors.onSurface.copy(alpha = DisabledActiveTrackAlpha),
      disabledInactiveTrackColor: Color =
          disabledActiveTrackColor.copy(alpha = DisabledInactiveTrackAlpha),
      activeTickColor: Color = contentColorFor(activeTrackColor).copy(alpha = TickAlpha),
      inactiveTickColor: Color = activeTrackColor.copy(alpha = TickAlpha),
      disabledActiveTickColor: Color = activeTickColor.copy(alpha = DisabledTickAlpha),
      disabledInactiveTickColor: Color = disabledInactiveTrackColor
          .copy(alpha = DisabledTickAlpha)
)
Copy the code
    • ThumbColor The little round color of the progress bar
    • DisabledThumbColor Small round color when unavailable
    • ActiveTrackColor Indicates the progress color of the progress bar
    • InactiveTrackColor Indicates the background color of the progress bar
    • DisabledActiveTrackColor Indicates the color of the progress bar when it is unavailable
    • DisabledInactiveTrackColor unavailable when the impression of the progress bar
    • ActiveTickColor The progress color of the dot at the breakpoint, as in Steps, is set to 2. The progress bar is split into 3 segments. At the bisection break point, there will be three little dots. ActiveTickColor represents the color of the dot’s progress.
    • InactiveTickColor The background color of the dot at the breakpoint, as in steps, is set to 2, and the progress bar is split into 3 segments. At the bisection break point, there will be three little dots. InactiveTickColor indicates the background color of the dot.
    • DisabledActiveTickColor Progress color of the dot at the bisector when it is unavailable
    • DisabledInactiveTickColor unavailable when the split in the impression of dots

For example:

@Preview()
@Composable
fun sliderTest(a){
    val valueState = remember {
        mutableStateOf(1.0 f)}val interationSource = remember {
        MutableInteractionSource()
    }
    val pressState = interationSource.collectIsPressedAsState()
    Slider(
        value = valueState.value,
        onValueChange = {
            valueState.value = it
        },
        modifier = Modifier.fillMaxWidth(),
        enabled = true,
        valueRange = 0f..1f,
        steps = 2,
        onValueChangeFinished = {
            Log.e("ccm"."==Change Finish=")
        },
        interactionSource = interationSource,
        colors = SliderDefaults.colors(thumbColor = if(pressState.value) Color.Green else Color.Red
            ,activeTrackColor = Color.Green
            ,inactiveTrackColor = Color.Yellow,
            activeTickColor = Color.Blue,inactiveTickColor = Color.Black)
    )
}
Copy the code

2: CircularProgressIndicator

CircularProgressIndicator circular progress, loading

@Composable
fun CircularProgressIndicator(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth
){... }Copy the code
  • Modifier modifier
  • Color Indicates the color of the progress
  • StrokeWidth Progress the stroke width

For example:

@Preview()
@Composable
fun circularProgressIndicatorTest(a){
    CircularProgressIndicator(
        modifier = Modifier.size(50.dp),
        color = Color.Red,
        strokeWidth = 1.dp
    )
}
Copy the code

Three: LinearProgressIndicator

Linear progress, similar to the progress bar when our browser loads a web page

@Composable
fun LinearProgressIndicator(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.primary,
    backgroundColor: Color = color.copy(alpha = IndicatorBackgroundOpacity)) {... }Copy the code
  • Modifier modifier
  • Color Progress color
  • BackgroundColor backgroundColor

For example:

@Preview()
@Composable
fun linearProgressIndicatorTest(a){
    LinearProgressIndicator(
        modifier = Modifier.fillMaxWidth().height(2.dp),
        color = Color.Red,
        backgroundColor = Color.Green
    )
}
Copy the code