Bugün ki makalemde, Android 5.0 Lollipop sürümüyle birlikte gelen yeni animasyonlardan biri olan Reveal Animation‘u bir örnekle açıklayacağım. Reveal Animation; UI(Arayüz) elementlerini grup olarak gizleme veya göstermeyi sağlar. Bu efekti kullanarak, view’ler arasında geçiş sağladığımızda kullanıcıya güzel bir görsellik sunar.
Dip not: Reveal Animation, Android 5.0 Lollipop sürümü ve üst sürümlerde barındığı için projenizi API 21 ve API 21’den büyük API’lerde oluşturmanız gerekir.
Örnek projemizi çalıştırdığımızda göreceğiniz sonucu makaledeki videoyu çalıştırarak görebilirsiniz.
Yapmamız gereken işlemler:
1. Android IDE ile API 21 kullanan bir proje oluşturmak.
2. Projenizde res/drawable dizinin altına, animasyonu uygulamak için kullancağımız bir resim ekleyeceğiz.
3. Şimdi ise kodlarımızı yazabiliriz. MainActivity .java sınıfında bulunacak kodlarımız:
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 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
import android.animation.Animator; import android.animation.AnimatorListenerAdapter; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.ViewAnimationUtils; import android.widget.CompoundButton; import android.widget.CompoundButton.OnCheckedChangeListener; import android.widget.ImageView; import android.widget.TextView; import android.widget.ToggleButton; public class MainActivity extends Activity { TextView title; ImageView image; ToggleButton btnHideShow; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Arayüz elementlerini tanımladım title = (TextView)findViewById(R.id.title); image = (ImageView) findViewById(R.id.image); btnHideShow = (ToggleButton) findViewById(R.id.hideshow); //ToggleButton, seçilip, seçilmeme durumuna göre resmi gizleyen veya resmi görünür yapan metodları cagırdım btnHideShow.setOnCheckedChangeListener(new OnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { if(isChecked){ hide(title); hide(image); }else{ show(title); show(image); } } }); } //Reveal Animation kullanarak arayüz elementlerini görünür yapan metod private void show(final View view) { int cx = (view.getLeft() + view.getRight()) / 2; int cy = (view.getTop() + view.getBottom()) / 2; int finalRadius = Math.max(view.getWidth(), view.getHeight()); //Verilen koordinatlara göre daire seklinde gorunur yapan animasyon olusturyoruz Animator anim = ViewAnimationUtils.createCircularReveal(view, cx, cy, 0, finalRadius); anim.setDuration(1000); //view elementini görünür yap komutu verdim view.setVisibility(View.VISIBLE); anim.start(); } private void hide(final View view) { int cx = (view.getLeft() + view.getRight()) / 2; int cy = (view.getTop() + view.getBottom()) / 2; int initialRadius = view.getWidth(); //Verilen koordinatlara göre daire seklinde gizleme işlemini yapan animasyon olusturuyoruz Animator anim = ViewAnimationUtils.createCircularReveal(view, cx, cy, initialRadius, 0); anim.setDuration(1000); anim.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); //view elementini gizle komutu verdim view.setVisibility(View.INVISIBLE); } }); anim.start(); } } |
4. activity_main.xml kodlarımı:
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 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Reveal Animation Effect" android:textSize="28dp" android:textStyle="bold" /> <ToggleButton android:id="@+id/hideshow" android:layout_width="match_parent" android:layout_height="wrap_content" android:textOn="Show Animation" android:textOff="Hide Animation" /> <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/androidlollipop" android:background="@android:color/darker_gray" /> </LinearLayout> |