Seekbar Slider در کاتلین | نحوی نمایش تیک برای نوار سیک بار

سلام خدمت شما عزیزان سایت کد ایت ، در سری دیگر از آموزش کاتلین در خدمت شما عزیزان می باشیم . در این قسمت قصد داریم مبحث جذاب و مهم Seekbar Slider در کاتلین را خدمت شما عزیزان آموزش دهیم . خیلی وقت ها در برنامه نویسی اندروید ما به SeekBar نیاز داریم تا مقادیری را  کاربر انتخاب کند.یا اینکه شما یک برنامه فروشگاه دارید و مشتری شما می خواهد اجناس را از نظر قیمت یا سایز و یا هر چیز دیگری فیلتر کند و در موقع حرکت دادن SeekBar قیمت ، سایز و … روی آن مانند تیک نمایش داده شود در این مواقع از ویجت Seekbar Slider  استفاده می شود .

پیاده سازی Seekbar Slider در کاتلین

ما سعی کردیم در این قسمت تعدادی از سیک بار های پر استفاده در کاتلین را برای شما گرد آوری کنیم تا نیاز های شما در برنامه نویسی برطرف شود. در قسمت پایین ساخت انواع SeekBar Slider در کاتلین را به شما آموزش می دهیم . ابتدا مثل همیشه یک پروژه ایجاد کنید و اسم SeekBar را روی اون قرار دهید .اولین کاری که بعد از ساخت پروژه باید انجام دهید اضافه کردن کتابخانه متریال دیزاین به پروژتون می باشد . در build.gradle(Module)  کتابخانه زیر را اضافه کنید .

انواع Seekbar در برنامه نویسی اندروید با زبان کاتلین

    implementation 'com.google.android.material:material:1.1.0'

بعد وارد قسمت Xml لایه خودتون بشید و کد های زیر را در آن قسمتوارد سازید.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    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:background="#673AB7"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".SeekBar">

    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:padding="25sp"
        android:layout_height="wrap_content">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="25dp"
        android:text="Simple Slider"
        android:textColor="@color/Textcolor"
        android:textSize="19sp"
        android:textStyle="bold" />

    <com.google.android.material.slider.Slider
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/black" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="25dp"
        android:text="Set Value Slider"
        android:textSize="19sp"
        android:textColor="@color/Textcolor"
        android:textStyle="bold" />

    <com.google.android.material.slider.Slider
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:value="30"
        android:valueFrom="0"
        android:valueTo="100" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/black" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="25dp"
        android:text="Step Step Slider"
        android:textSize="19sp"
        android:textColor="@color/Textcolor"

        android:textStyle="bold" />

    <com.google.android.material.slider.Slider
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stepSize="5.0"
        android:value="30"
        android:valueFrom="0"
        android:valueTo="100" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/black" />



    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="25dp"
        android:text="RangeSlider"
        android:textSize="19sp"
        android:textColor="@color/Textcolor"
        android:textStyle="bold" />

    <com.google.android.material.slider.RangeSlider
        style="@style/tooltip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stepSize="5.0"
        android:valueFrom="0"
        android:valueTo="100"
        app:values="@array/RangeSlider" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/black" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="25dp"
        android:text="Color change Slider"
        android:textSize="19sp"
        android:textColor="@color/Textcolor"
        android:textStyle="bold" />

    <com.google.android.material.slider.Slider
        app:labelStyle="@style/tooltip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stepSize="5.0"
        android:valueFrom="0"
        android:valueTo="100"
        />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/black" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="25dp"
        android:text="Shape Change Slider"
        android:textSize="19sp"
        android:textColor="@color/Textcolor"
        android:textStyle="bold" />

    <com.google.android.material.slider.RangeSlider
        app:labelStyle="@style/tooltips"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stepSize="5.0"
        android:valueFrom="0"
        android:valueTo="100"
        android:id="@+id/sliderRange"
        app:values="@array/RangeSlider" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/black" />

</LinearLayout>
</ScrollView>

در قسمت بالا یکسری از Seekbar Slider ها رو مشاهده می کنید بعد از اضافه کردن قسمت بالا با خطایی مواجه می شوید که با اضافه کردم کد های زیر درست می شود . ابتدا روی پوشه values راست کلیک کنید . با یک Resource File به نام tooltip اضافه کنید و کد های زیر را در آن قرار دهید .

<?xml version="1.0" encoding="utf-8"?>
<resources>


    <style name="tooltip" parent="Widget.MaterialComponents.Tooltip">
        <item name="backgroundTint">@color/purple_500</item>
        <item name="android:visibility">visible</item>

    </style>

    <style name="tooltips" parent="Widget.MaterialComponents.Tooltip">
        <item name="itemShapeAppearanceOverlay">@style/tooltipShOverylay</item>
        <item name="backgroundTint">@color/purple_500</item>
        <item name="android:visibility">visible</item>

    </style>
    <style name="tooltipShOverylay">
        <item name="cornerSize">50%</item>

    </style>


</resources>

بعد از این کار نوبت کد نویسی قسمت اکتیویتی ما میرسد . کد های این قسمت را نیز مانند زیر وارد سازید .

package com.example.retrofit

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.google.android.material.slider.RangeSlider
import java.text.NumberFormat
import java.util.*

class SeekBar : AppCompatActivity() {
    lateinit var rangeSlider: RangeSlider
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_seek_bar)
        rangeSlider = findViewById(R.id.sliderRange)
        rangeSlider.setLabelFormatter { value : Float ->
            val format=NumberFormat.getCurrencyInstance()
            format.maximumFractionDigits=0
            format.currency= Currency.getInstance("USD")
            format.format(value.toDouble())
        }

    }
}

کار ما در این قسمت به پایان رسید و شما تونستید با یکسری از SeekBar  ها در کاتلین آشنا بشوید و از این به بعد شما می توانید در کد نویسی های خودتون از اینSeekBar ها استفاده کنید .

خروجی کد های بالا :