Anasayfa Makale Pratik Android Programlama Ders 18: View nesnelerinin animasyonlarını oluşturuyoruz

Android Programlama Ders 18: View nesnelerinin animasyonlarını oluşturuyoruz

Android Programlama derslerimizin 18. bölümünde sizlerle birlikte View nesnelerin animasyonu oluşturmayı öğreneceğiz.

View nesnelerin:

–          Şeffaflığı  (Clarity)

–          Boyutu

–          Hareketi

–          Dönmesi

Değiştirmeyi öğreneceğiz.

Yeni proje oluşturalım:

  • Project name: P0018_SimpleAnimation
  • Build Target: Android 4.2
  • Application name: SimpleAnimation
  • Package name: tr.androidApp.simpleAnimation
  • Create Activity: MainActivity

Dönüşümler XML dosyalarda oluşturuyoruz. Sonra  uygulamada (Dönüşümler) okunuyor ve View nesnelere uygulanıyor (View Animation).Pratiğe geçelim.

Projemizde res klasör mevcuttur. Bu klasörde anim klasörü oluşturuyoruz. Bunu yapmak için res klasöre fareyle sol düğmeye basıyoruz. Ve New ->  Folder seçeneği seçiyoruz. Anim klasöründe yeni dosyaları oluşturuyoruz. Bunu yapmak için yukarıdaki gibi adımları gerçekliyoruz (New -> File). Bu dosyalarda animasyonu oluşturacağız.

Res/anim klasöründe aşağıdaki gibi dosyaları oluşturuyoruz.

Dosyanın ismi: myalpha.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<alpha
xmlns:android=”http://schemas.android.com/apk/res/android”
android:fromAlpha=”0.0″
android:toAlpha=”1.0″
android:duration=”3000″>
</alpha>

Dönüşümün açıklanması: Üç saniyede şeffaflığı 0’dan 1’e değişeşecektir.

Dosyanın ismi: myscale.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<scale
xmlns:android=”http://schemas.android.com/apk/res/android”
android:fromXScale=”0.1″
android:toXScale=”1.0″
android:fromYScale=”0.1″
android:toYScale=”1.0″
android:pivotX=”50%”
android:pivotY=”50%”
android:duration=”3000″>
</scale>


 

Dönüşümün açıklanması: Boyutunun değişimi. Varsayılan pozisyondan 0.1’den 1’e kadar değişecektir. Değişim nesnenin ortadaki bulunan noktaya göre olacaktır (pivot X, pivotY). Değişimin süresi üç saniyedir. Dosyanın ismi: mytrans.xml

<?xml version=”1.0″ encoding=”utf-8″?> <translate  xmlns:android=”http://schemas.android.com/apk/res/android”  android:fromXDelta=”-150″  android:toXDelta=”0″  android:fromYDelta=”-200″  android:toYDelta=”0″  android:duration=”3000″> </translate>


Dönüşümün açıklanması: 150’den X – ekseninden ve 200 Y – ekseninden (0,0) pozisyona geçmesi. Süre üç saniyeye eşittir.


Dosyanın ismi: myrotate.xml

 

<?xml version=”1.0″ encoding=”utf-8″?>
<rotate
xmlns:android=”http://schemas.android.com/apk/res/android”
android:fromDegrees=”0″
android:toDegrees=”360″
android:duration=”3000″>
</rotate>

Dönüşümün açıklanması: Sol üst köşeye göre 360 dereceye dönüş. Süre üç saniyeye eşittir.

Dosyanın ismi: mycombo.xml

 

<?xml version=”1.0″ encoding=”utf-8″?>
<set
xmlns:android=”http://schemas.android.com/apk/res/android”>
<rotate
android:fromDegrees=”0″
android:toDegrees=”360″
android:duration=”3000″
android:pivotX=”50%”
android:pivotY=”50%”>
</rotate>
<scale
android:fromXScale=”0.1″
android:toXScale=”1.0″
android:fromYScale=”0.1″
android:toYScale=”1.0″
android:pivotX=”50%”
android:pivotY=”50%”
android:duration=”3000″>
</scale>
</set>

 

Dönüşümün açıklanması: Boyutunun artışı ve aynı anda dönmesi. Süre üç saniyedir. Dikkat edin bu kombinasyon (İki dönüşümü aynı anda kullanmak için) için </set> kullandık.

Beş animasyon dosyayı oluşturduk.

anim klasyor

Şimdi bu dönüşümleri View nesneye uygulayabiliriz.

Main.xml açıyoruz ve aşağıdaki gibi ekranı oluşturuyoruz.

<?xml version=”1.0″ encoding=”utf-8″?>
<FrameLayout
xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
android:id=”@+id/frameLayout1″
android:layout_height=”match_parent”>
<TextView
android:text=”TextView”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”center_vertical|center_horizontal”
android:id=”@+id/tv”
android:textSize=”38sp”>
</TextView>
</FrameLayout>

Ekranın ortasında TextView bulunuyor. Dönüşümleri TextView’da uygulanacağız. Bunun için içerik menü oluşturacağız ve dönüşümleri seçmek için seçenekleri ekleyeceğiz.

Dersin tam kodu:

 

package tr.androidApp.simpleAnimation;

import android.app.Activity;

import android.os.Bundle;

import android.view.ContextMenu;

import android.view.ContextMenu.ContextMenuInfo;

import android.view.MenuItem;

import android.view.View;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.TextView;

public class MainActivity extends Activity {

TextView tv;

final int MENU_ALPHA_ID = 1;

final int MENU_SCALE_ID = 2;

final int MENU_TRANSLATE_ID = 3;

final int MENU_ROTATE_ID = 4;

final int MENU_COMBO_ID = 5;

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

tv = (TextView) findViewById(R.id.tv);

// tv için içerik menü oluşturuyoruz

registerForContextMenu(tv);

}

@Override

public void onCreateContextMenu(ContextMenu menu, View v,

ContextMenuInfo menuInfo) {

// TODO Auto-generated method stub

switch (v.getId()) {

case R.id.tv:

// seçenekleri ekliyoruz

menu.add(0, MENU_ALPHA_ID, 0, “alpha”);

menu.add(0, MENU_SCALE_ID, 0, “scale”);

menu.add(0, MENU_TRANSLATE_ID, 0, “translate”);

menu.add(0, MENU_ROTATE_ID, 0, “rotate”);

menu.add(0, MENU_COMBO_ID, 0, “combo”);

break;

}

super.onCreateContextMenu(menu, v, menuInfo);

}

@Override

public boolean onContextItemSelected(MenuItem item) {

Animation anim = null;

// basılan seçeneği buluyoruz

switch (item.getItemId()) {

case MENU_ALPHA_ID:

// anim/myalpha dosyadan animasyonu oluşturuyoruz

anim = AnimationUtils.loadAnimation(this, R.anim.myalpha);

break;

case MENU_SCALE_ID:

anim = AnimationUtils.loadAnimation(this, R.anim.myscale);

break;

case MENU_TRANSLATE_ID:

anim = AnimationUtils.loadAnimation(this, R.anim.mytrans);

break;

case MENU_ROTATE_ID:

anim = AnimationUtils.loadAnimation(this, R.anim.myrotate);

break;

case MENU_COMBO_ID:

anim = AnimationUtils.loadAnimation(this, R.anim.mycombo);

break;

}

// tv için animasyonu başlatıyoruz

tv.startAnimation(anim);

return super.onContextItemSelected(item);

}

}

 

Animasyon AnimationUtils.loadAnimation metodu kullanarak xml dosyayı  okunuyor ve çıkışta Animation tipi nesneyi oluşuyor. Bu nesneyi startAnimation, metodunda kullanarak animasyonu başlatıyoruz.

Projeyi kaydediyoruz ve uygulamayı çalıştırıyoruz. TextView için içerik menü çağırıyoruz ve animasyonu test ediyoruz.

Animasyon

 

Bu derste tüm imkanları kullanmadık. Mesela android:startOffset (Animasyonun gecikmeyi belirleniyor) parametreyi kullanabilirsiniz. Daha bir parametre android:repeatCount – tekrarlama sayısı belirleniyor. XML parametreleri değiştirerek sonuçları araştırmayı tavsiye ediyorum. Sonraki derste yapacağımız uygulamada ikinci etkileşim ( Activity) oluşturmayı öğreneceğiz.