سلام شما خدمت شما عزیزان سایت کدایت ، با آموزش کاتلین و با سری دیگر از این آموزش ها خدمت شما عزیزان هستیم .امروز قصد داریم مبحث switch animation در کاتلین را برای شما عزیزان آموزش دهیم . برای همه ما اتفاق افتاده است که دنبال انیمیشن های زیبا برای برنامه ی اندرویدی خودمون باشیم . در واقع این یک امر رایج بین برنامه نویسان می باشد . من تصمیم گرفتم تعدادی ازاین انیمیشن ها در کاتلین را در قسمت های مختلف برای شما جمع آوری کنم . اولین انیمیشن ای که به فکرم رسید و خیلی زیبا و جذاب بود switch animation در کاتلین می باشد که شما می توانید در زمان هایی که نیاز به سوییچ دارید میتوانید از این انیمیشن استفاده کنید . در قسمت زیر نحوی پیاده سازی سوییچ انیمیشن در کاتلین را برای شما توضیح می دهم .
switch animation
switch animation در کاتلین به چه صورت پیاده سازی می شود ؟
اول از همه یک پرووژه ایجاد کنید و اسمش رو switch animation بگذارید . بعد از این کار ما باید کتابخانه switch animation در کاتلین را به پروژه خودمون اضافه کنیم. برای این کار به قسمت build.gradle (Module:app) بروید و کد زیر را در آن قسمت را وارد سازید.
|
1 |
implementation 'com.bitvale:pacbutton:1.0.0' |
حالا نوبت کد های قسمت xml می باشد . ما در این قسمت یک ImageView داریم و یک PacButton برای سوییچ انیمیشن در کاتلین که در آن آیکون بالایی و آیکون پایینی و همچنین اندازه ی آنها و رنگ هایشان را تنظیم می کنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?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 جایگذاری کنند .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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 } } } |
و در آخر خروجی کد های ما که به صورت زیر می باشد .
دیدگاهتان را بنویسید