Composant de curseur de la bibliothèque de conception de matériaux

Cela a commencé par une petite histoire de détective - en regardant le site Web Material Design, je suis tombé sur la page Sliders . La description indique que ce composant est disponible pour Android et même donné un lien vers le github . Cela m'a un peu surpris, car je n'avais jamais entendu parler de lui. Je suis le lien - il indique sur le Github que le composant est toujours en développement actif et quelques exemples en Java sont donnés. "Dans ces votre Internet" ne mentionne pas les mentions de Slider . Il n'y a aucune référence à la documentation officielle de la bibliothèque non plus.

Heureusement, il existe des codes sources .

La curiosité a prévalu et j'ai commencé à m'y plonger moi-même.

En apparence, Slider est similaire à la Seekbar standard . Mais il y a de légères différences. Pour les voir, j'ai esquissé un projet simple. Ajoutez quelques curseurs à l'écran, au bouton et regardez le composant en action.

J'ai utilisé la dernière version de la bibliothèque.

implementation 'com.google.android.material:material:1.2.0-alpha06'

Balisage:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:text="New value"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.slider.Slider
        android:id="@+id/slider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:value="8.09"
        android:valueFrom="0.0"
        android:valueTo="21.0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button" />

    <com.google.android.material.slider.Slider
        android:id="@+id/slider2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        android:valueFrom="100.0"
        android:valueTo="100000.0"
        android:stepSize="100.0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/slider" />

</androidx.constraintlayout.widget.ConstraintLayout>

Juste au cas où, je note que lorsque j'ai enregistré manuellement le code, Android Studio a refusé d'afficher l'écran d'activité en mode Design, j'ai dû redémarrer le studio. Après cela, tout est revenu à la normale.

Le code de la classe d'activité.

//    ,    ,
//   ,   ,   .
// http://developer.alexanderklimov.ru/android/

package ru.alexanderklimov.as36

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.slider.Slider
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        button.setOnClickListener {
            slider.value = 5.0F
        }

        slider.values = listOf(1F, 4F, 6F)

        slider.addOnSliderTouchListener(object : Slider.OnSliderTouchListener {
            override fun onStartTrackingTouch(slider: Slider) {
                println("Start Tracking Touch")
            }

            override fun onStopTrackingTouch(slider: Slider) {
                println("Stop Tracking Touch")
            }
        })

    }
}

Nous commençons et regardons le résultat.



La première chose qui attire votre attention est que nous pouvons définir plusieurs curseurs via slider.values . Ils se comportent indépendamment et n'interfèrent pas les uns avec les autres.

Le deuxième curseur a un mode discret défini via l' attribut android: stepSize . Vous remarquerez peut-être que dans ce mode, de petits points sont apparus sur la piste.

Si vous cliquez sur le curseur, une plaque apparaît en haut indiquant la valeur actuelle.



En cliquant sur le bouton par programme, le curseur est placé au bon endroit sur le premier curseur. Notez que dans notre cas, le composant se transformera en un curseur citrouille avec un curseur, car nous avons supprimé la liste des valeurs, n'en laissant qu'une seule.

Le curseur a plusieurs auditeurs. Pour démontrer, j'ai apporté l'un d'eux - Slider.OnSliderTouchListener .

Le texte sur le dé peut être modifié. Ceci est utile lorsque de grands nombres sont utilisés. Ensuite, au lieu de nombres avec un grand nombre de zéros (millions, billions, etc.), vous pouvez utiliser des options abrégées. L'interface LabelFormatter est responsable de ce comportement . Il existe également une interface d'assistance, BasicLabelFormatter , qui contient déjà des abréviations utiles pour les grands nombres comme 9,1 Ko au lieu de 9100.



Disons un peu et écrivons un mot de trois lettres.

slider2.setLabelFormatter {
    ""
}



Le nouvel élément semblait intéressant et tout à fait approprié pour une utilisation dans le projet.

All Articles