سبد خرید

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

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

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

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

 

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

عملکرد مربوط به خصوصیت نام خصوصیت
باعث خاموش و روشن کردن پیشفرض ویو میشه android:checked
رنگ ویو زمانی که روشن است app:switcher_on_color
رنگ ویو زمانی که خاموش است app:switcher_off_color
رنگ آیکن داخلی ویو app:switcher_icon_color
ایجاد سایه برای ویو app:elevation

 

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

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

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

 

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

نکته
من توی کدهای مربوط به XML از سایزها استفاده کردم.
پس بدون هیچ مشکلی میتونی توام از سایز مورد نظرت برای پیاده سازی طرح رابط کاربریت استفاده کنی.
دیدگاه‌ها ۰