Slider-Komponente der Material Design Library

Es begann mit einer kleinen Detektivgeschichte - als ich auf die Material Design-Website schaute, stieß ich auf die Sliders- Seite . Die Beschreibung besagt, dass diese Komponente für Android verfügbar ist und sogar einen Link zum Github enthält . Das überraschte mich ein wenig, da ich noch nie von ihm gehört hatte. Ich folge dem Link - auf dem Github steht, dass sich die Komponente noch in der aktiven Entwicklung befindet und einige spärliche Beispiele in Java angegeben sind. "In diesen Ihr Internet" Erwähnungen von Slider nicht gefunden. Es gibt auch keine Verweise auf die offizielle Bibliotheksdokumentation .

Zum Glück gibt es Quellcodes .

Die Neugier war groß und ich fing an, mich selbst damit zu beschäftigen.

Im Aussehen ähnelt Slider der Standard- Seekbar . Es gibt jedoch geringfügige Unterschiede. Um sie zu sehen, habe ich ein einfaches Projekt entworfen. Fügen Sie dem Bildschirm und der Schaltfläche einige Schieberegler hinzu und sehen Sie sich die Komponente in Aktion an.

Ich habe die neueste Version der Bibliothek verwendet.

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

Markup:

<?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>

Nur für den Fall, dass Android Studio sich weigerte, den Aktivitätsbildschirm im Designmodus anzuzeigen, musste ich das Studio neu starten, als ich den Code manuell registrierte. Danach normalisierte sich alles wieder.

Der Code für die Aktivitätsklasse.

//    ,    ,
//   ,   ,   .
// 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")
            }
        })

    }
}

Wir beginnen und schauen uns das Ergebnis an.



Das erste, was Ihnen auffällt, ist, dass wir mehrere Schieberegler durch slider.values ​​setzen können . Sie verhalten sich unabhängig und stören sich nicht.

Der zweite Schieberegler verfügt über einen diskreten Modus, der über das Attribut android: stepSize festgelegt wird . Möglicherweise stellen Sie fest, dass in diesem Modus kleine Punkte auf der Spur angezeigt wurden.

Wenn Sie auf den Schieberegler klicken, wird oben eine Platte mit dem aktuellen Wert angezeigt.



Durch programmgesteuertes Klicken auf die Schaltfläche wird der Schieberegler am ersten Schieberegler an die richtige Stelle gesetzt. Beachten Sie, dass in unserem Fall die Komponente mit einem Schieberegler in einen Kürbis- Schieberegler umgewandelt wird, da wir die Werteliste gelöscht haben und nur einen übrig gelassen haben.

Der Schieberegler hat mehrere Listener. Zur Demonstration habe ich einen mitgebracht - Slider.OnSliderTouchListener .

Der Text auf dem Würfel kann geändert werden. Dies ist nützlich, wenn große Zahlen verwendet werden. Anstelle von Zahlen mit einer großen Anzahl von Nullen (Millionen, Billionen usw.) können Sie auch verkürzte Optionen verwenden. Die LabelFormatter- Schnittstelle ist für dieses Verhalten verantwortlich . Es gibt auch eine Hilfsschnittstelle , BasicLabelFormatter , die bereits nützliche Abkürzungen für große Zahlen wie 9,1 KB anstelle von 9100 enthält.



Lassen Sie uns ein wenig herumspielen und ein Wort aus drei Buchstaben schreiben.

slider2.setLabelFormatter {
    ""
}



Das neue Element schien interessant und für den Einsatz im Projekt durchaus geeignet zu sein.

All Articles