switch animation در کاتلین | ساخت انیمیشن زیبای سوییچ انیمیشن در کاتلین

سلام شما خدمت شما عزیزان سایت کدایت ، با آموزش کاتلین و با سری دیگر از این آموزش ها خدمت شما عزیزان هستیم .امروز قصد داریم مبحث switch animation در کاتلین را برای شما عزیزان آموزش دهیم . برای همه ما اتفاق افتاده است که دنبال انیمیشن های زیبا برای برنامه ی اندرویدی خودمون باشیم . در واقع این یک امر رایج بین برنامه نویسان می باشد . من تصمیم گرفتم تعدادی ازاین انیمیشن ها در کاتلین را در قسمت های مختلف برای شما جمع آوری کنم . اولین انیمیشن ای  که به فکرم رسید و خیلی زیبا و جذاب بود switch animation در کاتلین می باشد که شما می توانید در زمان هایی که نیاز به سوییچ  دارید میتوانید از این انیمیشن استفاده کنید . در قسمت زیر نحوی پیاده سازی سوییچ انیمیشن در کاتلین را برای شما توضیح می دهم .

switch animation

switch animation در کاتلین به چه صورت پیاده سازی می شود ؟

اول از همه یک پرووژه ایجاد کنید و اسمش رو switch animation  بگذارید . بعد از این کار ما باید کتابخانه switch animation در کاتلین را به پروژه خودمون اضافه کنیم. برای این کار به قسمت  build.gradle (Module:app)  بروید و کد زیر را در آن قسمت را وارد سازید.

implementation 'com.bitvale:pacbutton:1.0.0'

حالا نوبت کد های قسمت xml می باشد . ما در این قسمت یک ImageView داریم و یک PacButton برای  سوییچ انیمیشن در کاتلین که در آن آیکون بالایی و آیکون پایینی و همچنین اندازه ی آنها و رنگ هایشان را تنظیم می کنیم.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    android:background="#0B0B45"
    tools:context=".switch_animation">


    <ImageView
        android:layout_width="150sp"
        android:layout_height="150sp"
        android:src="@drawable/baseline_camera_white_24dp"
        android:adjustViewBounds="true"
        android:id="@+id/Id_image"
        android:layout_centerInParent="true"
        />
    <com.bitvale.pacbutton.PacButton
        android:id="@+id/pac_button"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_margin="15sp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        app:topIcon="@drawable/baseline_camera_alt_white_24dp"
        app:bottomIcon="@drawable/baseline_camera_white_24dp"
        app:iconHeight="55dp"
        app:iconWidth="55dp"
        app:pacGradientColor_1="@color/gradient_color_1"
        app:pacGradientColor_2="@color/gradient_color_2" />

</RelativeLayout>

و در آخر کدهای قست اکتیویتی که در آن ما یک آیدی برای PacButton  و ImageView خودمون تعریف کردیم . و گفته ایم که سوییج روی هر کدام از ایکون ها باشد . آن را در ImageView جایگذاری کنند .

package com.example.retrofit

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.ImageView
import com.bitvale.pacbutton.PacButton

class switch_animation : AppCompatActivity() {
    lateinit var pac_button:PacButton
    lateinit var Id_image:ImageView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_switch_animation)
        pac_button=findViewById<PacButton>(R.id.pac_button)
        Id_image=findViewById<ImageView>(R.id.Id_image)
        pac_button.setSelectAction {
            if (it) Id_image.setImageResource(R.drawable.baseline_camera_alt_white_24dp)
            else Id_image.setImageResource(R.drawable.baseline_camera_white_24dp)
        }
        pac_button.setAnimationUpdateListener { progress ->
            Id_image.alpha = 1 - progress
        }
    }
}

و در آخر خروجی کد های ما که به صورت زیر می باشد .