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

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

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

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

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

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

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

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

<item name="backgroundTint">@color/purple_500</item>

<item name="android:visibility">visible</item>

</style>

<item name="itemShapeAppearanceOverlay">@style/tooltipShOverylay</item>

<item name="backgroundTint">@color/purple_500</item>

<item name="android:visibility">visible</item>

</style>

</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())
        }

    }
}

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 ها استفاده کنید .

برای امتیاز به این نوشته کلیک کنید!

[کل: 1 میانگین: 5]

اشتراک‌گذاری

فونت در کاتلین | استفاده از فونت سفارشی در کاتلین نوشته قبل

ویژگی های اندروید 12: هر آنچه که باید درباره آخرین سیستم عامل گوگل بدانید نوشته بعد

فرشید حبیبی

من فرشید حبیبی هستم، یک برنامه نویس موبایل با بیش از 5 سال تجربه. من علاقه زیادی به برنامه نویسی دارم و در این زمینه به طور مداوم در حال یادگیری و پیشرفت هستم. در حال حاضر، به عنوان یک برنامه نویس اندروید در یک شرکت معتبر مشغول به کار هستم و همچنین یک وبسایت آموزشی به نام کدایت را اداره می کنم. در کدایت، به تولید محتوای آموزشی در مورد برنامه نویسی اندروید و وب می پردازیم. هدف من از ایجاد این وبسایت، کمک به سایر برنامه نویسان اندرویدی برای یادگیری و پیشرفت در این زمینه است.