Kotlin | Animasyon | 2020

Bu eğiticide, Kotlin programlama dilini kullanarak Android Studio’da animasyon gerçekleştirmenin kolay bir yolunu öğreneceksiniz.

Tüm öğreticiyi aşağıda gösterildiği gibi beş adıma böldüm:

1. Android Studio Ortamını Ayarlama.
2. Düzeni değiştirme (XML dosyası).
3. Metne animasyonlar ekleme.
4. Kotlin Kodunu Yazmak.
5. Sonuçları yerleşik bir emülatörde çalıştırma.

1. Android Studio Ortamını Ayarlama

Bu ilk ve çok önemli bir adımdır. Yeni bir proje oluşturun ve tekdüzelik için “ Animasyon ” olarak adlandırın . Android Studio’da bir proje oluşturmak için daha fazla ayrıntı için, lütfen ortamı ayarlamak için size yeterli rehberlik sağlayacak olan Android Studio’nun resmi belgelerine bakın.

2. Düzeni değiştirme (XML dosyası)

Android Studio ortamını ayarladıktan sonra, bir sonraki adım animasyonumuzu sürdürecek Ana Faaliyetin kodunu yazmaktır. Ortamı kurduğunuz an, Android Studio’nun tüm dosyaları yüklemesi biraz zaman alıyor ve birkaç saniye sonra üzerinde çalışacağımız iki dosyayı otomatik olarak oluşturacak ve yükleyecektir:

1. MainActivity.kt (Kotlin Dosyası)
2. activity_main.xml (XML Dosyası)

İlki bulmak için, sadece aşağıda gösterildiği gibi app> java> com.example.animation> MainActivity’yi genişletin :

Activity_main.xml ile app> res> layout> activity_main.xml dosyasını aşağıda gösterildiği gibi genişletin :

Activity_main.xml dosyasını değiştirip XML dosyasının içine yeni değerler ekleyelim

<?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"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/btn_layout"
        android:gravity="center"
        android:text="Tanu Nanda Prabhu"
        android:textSize="30sp"
        android:textStyle="bold" />
<LinearLayout
        android:id="@+id/btn_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="2">
            <Button
                android:id="@+id/fade_in"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Fade In"
                android:textAllCaps="false" />
            <Button
                android:id="@+id/fade_out"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Fade Out"
                android:textAllCaps="false" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="2">
            <Button
                android:id="@+id/zoom_in"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Zoom In"
                android:textAllCaps="false" />
            <Button
                android:id="@+id/zoom_out"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Zoom Out"
                android:textAllCaps="false" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="2">
            <Button
                android:id="@+id/slide_down"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Slide Down"
                android:textAllCaps="false" />
            <Button
                android:id="@+id/slide_up"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Slide Up"
                android:textAllCaps="false" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="2">
            <Button
                android:id="@+id/bounce"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Bounce"
                android:textAllCaps="false" />
            <Button
                android:id="@+id/rotate"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="Rotate"
                android:textAllCaps="false" />
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

İlk önce, kök düzenini RelativeLayout olarak değiştireceğim ve animasyonu butonlar biçiminde yerleştirmek ve bu düzenleme için LinearLayout kullanacağım . İkinci olarak, Linear Layout’u kullandım , bunun nedeni tüm düğmelerin yatay veya dikey olarak hizalanmasını istedim çünkü LinearLayout’ta UI öğeleri yatay veya dikey olarak düzenlenmiş. XML dosyasında, kodun çoğu metin görünümü, düğme ve özellikleri gibi kendi kendini açıklayıcı niteliktedir. Kodun çoğu, sadece farklı bir kimlikle tekrarlamadır. Öyleyse, XML dosyasını anlamakta çok derinlere inerek kendinizi karıştırmayın. Düğmeleri Doğrusal Düzenin içine yerleştirdiğinizden emin olun.

3) Animasyonları metne ekleme.

Bu adımda, res klasörünün içine 8 ayrı XML Dosyası ekleyin . Tekdüzelik için , anim adında yeni bir “ Android Kaynak Dizini ” oluşturun , sonra içindeki 8 farklı XML dosyasını aşağıda gösterildiği gibi yerleştirin. XML dosyasını oluşturmak için sadece sağ tıklayın ve ardından Dosya öğesini tıklayın ve ardından dosyanın adını .xml olarak ekleyin.

Dosyaları yukarıda gösterildiği şekilde adlandırdığınızdan emin olun. Aşağıda, tüm farklı animasyonlar için XML kodu, buna göre farklı dosyalara kopyalayıp yapıştırın. Tüm animasyonlar XML kodları açıklayıcı niteliktedir. Ve bu kodu hemen hemen tüm animasyonlar için kullanabilirsiniz.

bounce.xml

<set
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    android:fillAfter="true">
    <translate
        android:fromYDelta="100%"
        android:toYDelta="-20%"
        android:duration="300" />
    <translate
        android:startOffset="500"
        android:fromYDelta="-20%"
        android:toYDelta="10%"
        android:duration="150" />
    <translate
        android:startOffset="1000"
        android:fromYDelta="10%"
        android:toYDelta="0"
        android:duration="100" />
</set>

fade_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <alpha
        android:duration="1000"
        android:fromAlpha="0.1"
        android:toAlpha="1.0" />
</set>

fade_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator">
    <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:toAlpha="0.1" />
</set>

rotate.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromDegrees="0"
    android:interpolator="@android:anim/linear_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:startOffset="0"
    android:toDegrees="360" />

slide_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="1000"
        android:fromYDelta="-100%"
        android:toYDelta="0" />
</set>

slide_up.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="1000"
        android:fromYDelta="0"
        android:toYDelta="-100%" />
</set>

zoom_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.5"
        android:toYScale="1.5">
    </scale>
</set>

zoom_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >
    <scale
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.5"
        android:toYScale="0.5" >
    </scale>
</set>

4. Kotlin Kodunu Yazmak

Şimdi ana kısmı yapalım. Tüm dış işleri yaptık ama şimdi iç işleri Kotlin’de kodlanan bekliyor. Aşağıdaki Kotlin kodunun açıklaması aşağıdadır.

Kotlin dilinde kodlayalım.

package com.example.animation
import android.animation.Animator
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.Handler
import android.view.View
import android.view.animation.Animation
import android.view.animation.AnimationUtils
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    fade_in.setOnClickListener {
      textView.visibility = View.VISIBLE
      val animation = AnimationUtils.loadAnimation(this, R.anim.fade_in)
      textView.startAnimation(animation)
    }
    fade_out.setOnClickListener {
      val animation = AnimationUtils.loadAnimation(this, R.anim.fade_out)
      textView.startAnimation(animation)
      Handler().postDelayed({ 
        textView.visibility = View.GONE 
      }, 1000)
    }
    zoom_in.setOnClickListener {
      val animation = AnimationUtils.loadAnimation(this, R.anim.zoom_in)
      textView.startAnimation(animation)
    }
    zoom_out.setOnClickListener {
      val animation = AnimationUtils.loadAnimation(this, R.anim.zoom_out)
      textView.startAnimation(animation)
    }
    slide_down.setOnClickListener {
      val animation = AnimationUtils.loadAnimation(this, R.anim.slide_down)
      textView.startAnimation(animation)
    }
    slide_up.setOnClickListener {
      val animation = AnimationUtils.loadAnimation(this, R.anim.slide_up)
      textView.startAnimation(animation)
    }
    bounce.setOnClickListener {
      val animation = AnimationUtils.loadAnimation(this, R.anim.bounce)
      textView.startAnimation(animation)
    }
    rotate.setOnClickListener {
      val animation = AnimationUtils.loadAnimation(this, R.anim.rotate)
      textView.startAnimation(animation)
    }
  }
}

Bir düğmeyi her kullanırken, setOnClickListener kullanarak eylemini belirtin . Gerçekleştireceğimiz farklı animasyonlar soluyor, soluyor, yakınlaştır, uzaklaştır, aşağı kaydır, yukarı kaydır, döndür ve zıpla. Şimdi yukarıdaki isimlerle 8 işlev yaratın ve ardından parametreleri bu şekilde geçirerek AnimationUtils.loadAnimation öğesini çağırın (bu anahtar kelimeyi kullanmamızın nedeni şu anki nesneye atıfta bulunmaktır) ve animasyon XML Dosyasının yerini (bu durumda) Tüm animasyonlar için 8 ayrı XML dosyası yazmanız ve sonra bunları res klasöründe saklamanız gerekir) ve bu nedenle R.anim. Fade_in, R.anim. fade_outve daha fazlası .Bundan daha fazla bölümde bir sonraki bölümde tartışacağım. Aynı zamanda, bu yöntemleri ve işlevlerini yazarken, kütüphanelerini içe aktarmanız gerekir. Endişelenmenize gerek yok Android Studio’da IntelliJ vardır, bu kitaplıkları otomatik olarak içe aktarmanızı önerir.

5) Sonuçları yerleşik bir emülatörde çalıştırmak.

Bu basit bir adımdır, tek yapmanız gereken kodu yerleşik bir emülatörde çalıştırmaktır. Bundan önce, hata olup olmadığını kontrol etmek için kodunuzu çalıştırın . Bunu yapmak için sağ üst taraftaki oynat düğmesine benzeyen Yeşil düğmeye tıklayın veya sadece Shift + F10 tuşlarına basın . Hata almazsanız, çıktıyı görmek için yerleşik emülatörü kullanabilirsiniz. Şimdi bir emülatör kurmak için aşağıdaki videoyu izleyin; bu bir emülatör veya seçiminizi yapmanıza yardımcı olur:

Çıktıyı çalıştırmak istediğiniz hangi sürümün veya hangi telefonun önemi yoktur. 2019’dan beri Google Pixel 3XL’i Emulator olarak kullanıyorum (Çünkü Pixel Fan olduğum için). Aşağıda emülatörden elde edilen sonuçların görüntüsü bulunmaktadır.

Hepsi bu derste, bunlar Android Studio’da Kotlin ile gerçekleştirilebilecek bazı temel animasyonlardır. Umarım bu öğreticiyi anlamışsındır, herhangi bir şüpheniz varsa yorum bölümünün tümü sizindir, sorularınızı cevaplayacağım. Makalemi okuduğunuz için teşekkürler. İyi günler.