مكون منزلق مكتبة تصميم المواد

بدأ الأمر بقصة بوليسية صغيرة - بالنظر إلى موقع Material Design ، جئت عبر صفحة Sliders . قال الوصف أن هذا المكون متاح لنظام Android وحتى مع إعطاء رابط إلى github . فاجأني هذا قليلاً ، لأنني لم أسمع به من قبل. أتبع الرابط - يقول على Github أن المكون لا يزال قيد التطوير النشط ويتم تقديم بعض الأمثلة القليلة في Java. لم يتم العثور على إشارات "في هذه الإنترنت الخاصة بك" من Slider . لا توجد مراجع لوثائق المكتبة الرسمية أيضًا.

لحسن الحظ ، هناك رموز مصدر .

ساد الفضول وبدأت الخوض فيه بنفسي.

في المظهر ، يشبه Slider شريط Seekbar القياسي . ولكن هناك اختلافات طفيفة. لرؤيتهم ، قمت برسم مشروع بسيط. أضف اثنين من أشرطة التمرير إلى الشاشة والزر وانظر إلى المكون في العمل.

لقد استخدمت أحدث نسخة من المكتبة.

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

وضع علامة على:

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

في حالة حدوث ذلك ، ألاحظ أنه عندما قمت بتسجيل الرمز يدويًا ، رفض Android Studio إظهار شاشة النشاط في وضع التصميم ، واضطررت إلى إعادة تشغيل الاستوديو. بعد ذلك عاد كل شيء إلى طبيعته.

كود فئة النشاط.

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

    }
}

نبدأ ونلقي نظرة على النتيجة.



أول شيء يلفت انتباهك هو أنه يمكننا ضبط العديد من أشرطة التمرير من خلال قيم التمرير . يتصرفون بشكل مستقل ولا يتدخلون مع بعضهم البعض.

يحتوي شريط التمرير الثاني على وضع منفصل تم تعيينه عبر السمة android: stepSize . قد تلاحظ أنه في هذا الوضع ظهرت نقاط صغيرة على المسار.

إذا قمت بالنقر فوق شريط التمرير ، فستظهر لوحة في الأعلى تشير إلى القيمة الحالية.



يؤدي النقر فوق الزر برمجيًا إلى تعيين شريط التمرير في المكان الصحيح عند شريط التمرير الأول. لاحظ أنه في حالتنا ، سيتحول المكون إلى منزلق قرع مع منزلق واحد ، لأننا أسقطنا قائمة القيم ، تاركًا واحدًا فقط.

يحتوي المنزلق على العديد من المستمعين. للتوضيح ، أحضرت أحدهم - Slider.OnSliderTouchListener .

يمكن تغيير النص الموجود على القالب. هذا مفيد عند استخدام أعداد كبيرة. ثم بدلاً من الأرقام التي تحتوي على عدد كبير من الأصفار (الملايين ، والتريليونات ، وما إلى ذلك) ، يمكنك استخدام الخيارات المختصرة. واجهة LabelFormatter مسؤولة عن هذا السلوك . هناك أيضًا واجهة مساعدة ، BasicLabelFormatter ، والتي تحتوي بالفعل على اختصارات مفيدة للأعداد الكبيرة مثل 9.1K بدلاً من 9100.



دعنا نعبث قليلاً ونكتب كلمة من ثلاثة أحرف.

slider2.setLabelFormatter {
    ""
}



بدا العنصر الجديد مثيرًا للاهتمام ومناسبًا تمامًا للاستخدام في المشروع.

All Articles