Creare un dispositivo di scorrimento per un intervallo di valori
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Il composable Slider consente agli utenti di effettuare selezioni da un intervallo di valori. Puoi utilizzare un dispositivo di scorrimento per consentire all'utente di:
Regola le impostazioni che utilizzano un intervallo di valori, ad esempio il volume e la luminosità.
Filtrare i dati in un grafico, ad esempio quando imposti una fascia di prezzo.
Input dell'utente, ad esempio l'impostazione di una valutazione in una recensione.
Il cursore contiene una traccia, un cursore, un'etichetta del valore e delle tacche:
Canale: il canale è la barra orizzontale che rappresenta l'intervallo di valori che può assumere il dispositivo di scorrimento.
Cursore: il cursore è un elemento di controllo trascinatile sul cursore che consente all'utente di selezionare un valore specifico nell'intervallo definito dalla barra.
Barre di misura: le barre di misura sono indicatori o indicatori visivi facoltativi che compaiono lungo la barra del cursore.
Questo argomento mostra le seguenti implementazioni del dispositivo di scorrimento:
Questa implementazione richiede che il valore minSDK del progetto sia impostato sul livello API 21 o superiore.
Dipendenze
Creare un cursore di base
L'esempio seguente è un dispositivo di scorrimento semplice. In questo modo l'utente può selezionare un valore compreso tra 0.0 e 1.0. Poiché l'utente può selezionare qualsiasi valore
in questo intervallo, il dispositivo di scorrimento è continuo.
Risultati
Figura 1. Un'implementazione di base di un dispositivo di scorrimento.
Creare un cursore avanzato
Il seguente snippet implementa un cursore con tre livelli, con un intervallo da 0.0 a 50.0. Poiché il cursore si aggancia a ogni livello, questo dispositivo di scorrimento è
discreto.
Risultati
Figura 2. Un dispositivo di scorrimento con incrementi e un intervallo di valori impostato.
Dispositivo di scorrimento dell'intervallo
Puoi anche utilizzare il composable RangeSlider dedicato. In questo modo, l'utente può selezionare due valori. Ciò può essere utile, ad esempio, quando l'utente vuole selezionare un prezzo minimo e massimo.
Il seguente è un esempio relativamente semplice di un cursore con intervallo continuo:
Risultati
Figura 3. Un'implementazione di un dispositivo di scorrimento dell'intervallo.
Punti chiave
Per una definizione completa dell'API, consulta il riferimento Slider. Ecco alcuni dei parametri chiave per il composable Slider:
value: il valore corrente del dispositivo di scorrimento.
onValueChange: una funzione lambda che viene chiamata ogni volta che il valore viene cambiato.
enabled: un valore booleano che indica se l'utente può interagire con il cursore.
Quando implementi un dispositivo di scorrimento più complesso, puoi utilizzare anche i seguenti parametri.
colors: un'istanza di SliderColors che consente di controllare i colori del cursore.
valueRange: l'intervallo di valori che può assumere il dispositivo di scorrimento.
steps: il numero di tacche sul cursore a cui si aggancia il pollice.
Puoi anche passare a Slider un composable thumb e track per personalizzare più approfonditamente l'aspetto del componente.
Raccolte che contengono questa guida
Questa guida fa parte di queste raccolte di guide rapide selezionate che coprono obiettivi di sviluppo Android più ampi:
Mostrare componenti interattivi
Scopri come le funzioni composable possono aiutarti a creare facilmente magnifici componenti dell'interfaccia utente basati sul sistema di progettazione Material Design.
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2025-02-06 UTC.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2025-02-06 UTC."],[],[],null,["\u003cbr /\u003e\n\nThe [`Slider`](/reference/kotlin/androidx/compose/material3/package-summary#Slider(androidx.compose.material3.SliderState,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.SliderColors,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1,kotlin.Function1)) composable lets users make selections from a range of\nvalues. You might use a slider to let the user do the following:\n\n- Adjust settings that use a range of values, such as volume, and brightness.\n- Filter data in a graph, as when setting a price range.\n- User input, like setting a rating in a review.\n\nThe slider contains a track, thumb, value label, and tick marks:\n\n- **Track**: The track is the horizontal bar that represents the range of values the slider can take.\n- **Thumb**: The thumb is a draggable control element on the slider that allows the user to select a specific value within the range defined by the track.\n- **Tick marks**: Tick marks are optional visual markers or indicators that appear along the track of the slider.\n\nThis topic shows the following slider implementations:\n\n- [Basic](#basic-implementation)\n- [Advanced](#advanced-implementation)\n- [Range](#range-slider)\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nCreate a basic slider\n\nThe following example is a straightforward slider. That allows the user to\nselect a value from `0.0` to `1.0`. Because the user can select any value in\nthat range, the slider is *continuous*.\n\nResults **Figure 1.** A basic implementation of a slider.\n\nCreate an advanced slider\n\nThe following snippet implements a slider that has three steps, with a range\nfrom `0.0` to `50.0`. Because the thumb snaps to each step, this slider is\n*discrete*.\n\nResults **Figure 2.** A slider with steps and a set value range. **Note:** The very beginning and end of a slider count as \"steps\". In the preceding example where the range is `0f..50f` and the number of `steps` is `3`, each interval along the range is `12.5` because the beginning and end of the slider are also intervals the user can select.\n\nRange slider\n\nYou can also use the dedicated [`RangeSlider`](/reference/kotlin/androidx/compose/material3/package-summary#RangeSlider(kotlin.ranges.ClosedFloatingPointRange,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.ranges.ClosedFloatingPointRange,kotlin.Int,kotlin.Function0,androidx.compose.material3.SliderColors)) composable. This allows the user to\nselect two values. This can be useful in cases such as when the user wishes to\nselect a minimum and maximum price.\n\nThe following example is a relatively straightforward example of a continuous\nrange slider:\n\nResults **Figure 3.** An implementation of a range slider.\n\nKey points\n\nSee the [`Slider`](/reference/kotlin/androidx/compose/material3/package-summary#Slider(androidx.compose.material3.SliderState,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.material3.SliderColors,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1,kotlin.Function1)) reference for a full API definition. Some of the key\nparameters for the `Slider` composable are the following:\n\n- **`value`**: The current value of the slider.\n- **`onValueChange`**: A lambda that gets called every time the value is changed.\n- **`enabled`**: A boolean value that indicates if the user can interact with the slider.\n\nWhen implementing a more complex slider, you can additionally make use of the\nfollowing parameters.\n\n- **`colors`** : An instance of `SliderColors` that lets you control the colors of the slider.\n- **`valueRange`**: The range of values that the slider can take.\n- **`steps`**: The number of notches on the slider to which the thumb snaps.\n\nYou can also pass `Slider` a `thumb` and `track` composable to more\nthoroughly customize the appearance of the component.\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay interactive components \nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback \nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
