Switcher یه کتابخانه عالی برای پیاده سازی حالت روشن و خاموش هستش.

احتمالا توی اندروید با Switch آشناییت داری.

Switch یکی از ویوهای مربوط به اندروید هستش که این قابلیت رو به ما میده که بتونیم اون رو روشن و خاموش کنیم.

کتابخونه ای که میخوام توی این پست معرفی کنم، عملکردی شبیه به Switch داره، ولی با حالت و انیمیشن خیلی جذاب تر.

برای اینکه کارکرد این کتابخونه رو بهتر متوجه بشی، پیشنهاد میکنم اول دمو کتابخونه رو ببینی.

نمایش دمو کتابخونه Switcher

حالا که دمو رو دیدی، فکر کنم متوجه جذابیت این کتابخونه شده باشی?

کار با این کتابخونه واقعا راحته هیچ فرقی با ویو اصلی اندروید، یعنی Switch نمیکنه.

خب بریم سراغ پیاده سازی و استفاده از این ویو توی پروژه خودمون.

راه اندازه کتابخانه اندروید Switcher

برای اینکه این کتابخونه رو به پروژه خودت اضافه کنی، باید کد زیر رو توی فایل app/build.gradle اضافه کنی.

implementation 'com.bitvale:switcher:1.1.1'

بعد از اضافه کردن این کد پروژه رو باید sync کنی.

بعد از اینکه عملیات sync کردن با موفقیت تموم شد، دیگه میتونی از این ویو توی پروژه خودت استفاده کنی.

اضافه کردن کد به فایل XML

این کتابخونه از 2 حالت دایره ای و استوانه ای پشتیبانی میکنه.

اگه به دمو بالا توجه کنی میبینی که من هر دو حالت رو پیاده سازی کردم و قرار دادم، هم حالت دایره ای و هم حالت استوانه ای.

حالت دایره ای

<com.bitvale.switcher.SwitcherC
    android:id="@+id/switcher_c"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_marginTop="10dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

حالت استوانه ای

<com.bitvale.switcher.SwitcherX
    android:id="@+id/switcher_x"
    android:layout_width="120dp"
    android:layout_height="60dp"
    android:layout_marginTop="10dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

همونطور که میبینی فرق خاصی بین حالت دایره ای و استوانه ای نمیکنه.

برای حالت دایره ای باید از SwitcherC استفاده کنی، برای حالت استوانه ای هم از SwitcherX باید استفاده کنی.

این کتابخونه قابلیت های شخصی هم داره که با توجه به نیازت میتونی ازش استفاده کنی.

شخصی سازی های کتابخونه

کدهای مربوط به کاتلین

برای اینکه بتونی این ویو رو به صورت داینامیکی توی کد هم استفاده کنی و دسترسی داشته باشی، از کد زیر میتونی استفاده کنی.

switch.setOnCheckedChangeListener { checked ->
    //کدهای مدنظرت رو میتونی اینجا بنویسی
}

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

این مواردی که توضیح دادم، در واقع پیاده سازی اون رو توضیح دادم.

حالا بریم که در قالب یک مثال عملی ازش استفاده کنیم.

من میخوام اون حالتی که توی دمو دیدی رو پیاده سازی کنم.

یعنی با روشن و خاموش کردن هر کدوم از این ویوها رنگ پسزمینه و متن ها تغییر کنن.

مثال عملی استفاده از کتابخونه

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

کدهای فایل XML

<?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:id="@+id/switchBg"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".animated_switch.AnimatedSwitch">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/constraintLayout2"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toStartOf="@+id/constraintLayout"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <TextView
                android:id="@+id/switchPage_xTxt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="@font/iran_sans"
                android:text="حالت دایره ای"
                android:textColor="@color/aquaBlue"
                android:textSize="18sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <com.bitvale.switcher.SwitcherX
                android:id="@+id/switch_x"
                android:layout_width="120dp"
                android:layout_height="60dp"
                android:layout_marginTop="10dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/switchPage_xTxt" />

        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/constraintLayout"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/constraintLayout2"
            app:layout_constraintTop_toTopOf="parent">

            <TextView
                android:id="@+id/switchPage_circleTxt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="@font/iran_sans"
                android:text="حالت دایره ای"
                android:textColor="@color/aquaBlue"
                android:textSize="18sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <com.bitvale.switcher.SwitcherC
                android:id="@+id/switch_c"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_marginTop="10dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/switchPage_circleTxt" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

کدهای مربوط به کلاس

class AnimatedSwitch : AppCompatActivity() {
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_animated_switch)

        switch_x.setOnCheckedChangeListener { isChecked ->
            if (isChecked) {
                switchBg.setBackgroundColor(ContextCompat.getColor(this, R.color.bgLight))
                switchPage_xTxt.setTextColor(ContextCompat.getColor(this, R.color.aquaBlue))
                switchPage_circleTxt.setTextColor(ContextCompat.getColor(this, R.color.aquaBlue))
            } else {
                switchBg.setBackgroundColor(ContextCompat.getColor(this, R.color.aquaBlue))
                switchPage_xTxt.setTextColor(ContextCompat.getColor(this, R.color.bgLight))
                switchPage_circleTxt.setTextColor(ContextCompat.getColor(this, R.color.bgLight))
            }
        }

        switch_c.setOnCheckedChangeListener { isChecked ->
            if (isChecked) {
                switchBg.setBackgroundColor(ContextCompat.getColor(this, R.color.bgLight))
                switchPage_xTxt.setTextColor(ContextCompat.getColor(this, R.color.aquaBlue))
                switchPage_circleTxt.setTextColor(ContextCompat.getColor(this, R.color.aquaBlue))
            } else {
                switchBg.setBackgroundColor(ContextCompat.getColor(this, R.color.aquaBlue))
                switchPage_xTxt.setTextColor(ContextCompat.getColor(this, R.color.bgLight))
                switchPage_circleTxt.setTextColor(ContextCompat.getColor(this, R.color.bgLight))
            }
        }
    }
}

اگه کدهای بالا رو توی فایل های مربوطه قرار بدی، خیلی راحت مثل دمو بالا رو میتونی پیاده سازی کنی.