Get best of the week

Komponen Desain Perpustakaan Slider Komponen

Itu dimulai dengan cerita detektif kecil - ketika melihat situs web Material Design, saya melihat halaman Sliders . Deskripsi mengatakan bahwa komponen ini tersedia untuk Android dan bahkan diberikan tautan ke github . Ini sedikit mengejutkan saya, karena saya belum pernah mendengarnya. Saya mengikuti tautan - dikatakan di Github bahwa komponen tersebut masih dalam pengembangan aktif dan beberapa contoh yang kurang di Jawa diberikan. "Di internet ini Anda" menyebutkan Slider tidak menemukan. Tidak ada referensi untuk dokumentasi perpustakaan resmi juga.

Untungnya, ada kode sumber .

Keingintahuan menang dan saya mulai menggali sendiri.

Secara tampilan, Slider mirip dengan Seekbar standar . Tetapi ada sedikit perbedaan. Untuk melihatnya, saya membuat sketsa proyek sederhana. Tambahkan beberapa slider ke layar, tombol dan lihat komponen yang sedang beraksi.

Saya menggunakan versi terbaru perpustakaan.

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>

Untuk berjaga-jaga, saya akan perhatikan bahwa ketika saya mendaftarkan kode secara manual, Android Studio menolak untuk menampilkan layar aktivitas dalam mode "Desain", saya harus memulai ulang studio. Setelah itu, semuanya kembali normal.

Kode untuk kelas aktivitas.

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

    }
}

Kami mulai dan melihat hasilnya.



Hal pertama yang menarik perhatian Anda adalah bahwa kita dapat mengatur beberapa slider melalui slider.values . Mereka berperilaku mandiri dan tidak saling mengganggu.

Slider kedua memiliki mode diskrit yang diatur melalui atribut android: stepSize . Anda mungkin memperhatikan bahwa dalam mode ini, titik-titik kecil muncul di trek.

Jika Anda mengeklik bilah geser, maka pelat muncul di atas yang menunjukkan nilai saat ini.



Mengklik tombol ini secara program mengatur slider di tempat yang tepat di slider pertama. Perhatikan bahwa dalam kasus kami, komponen akan berubah menjadi slider labu dengan satu slider, karena kami menjatuhkan daftar nilai, hanya menyisakan satu.

Slider memiliki beberapa pendengar. Untuk menunjukkan, saya membawa salah satunya - Slider.OnSliderTouchListener .

Teks pada die dapat diubah. Ini berguna ketika sejumlah besar digunakan. Kemudian alih-alih angka dengan angka nol yang besar (jutaan, triliunan, dll.), Anda dapat menggunakan opsi yang disingkat. Antarmuka LabelFormatter bertanggung jawab atas perilaku ini . Ada juga antarmuka pembantu BasicLabelFormatter , yang sudah berisi singkatan berguna untuk nomor besar seperti 9.1K, bukan 9100.



Mari kita main-main sedikit dan menulis kata tiga huruf.

slider2.setLabelFormatter {
    ""
}



Elemen baru itu tampak menarik dan cukup cocok untuk digunakan dalam proyek.

More articles:


All Articles