Android Lollipop ‘da Reveal Animasyonu

  • 21 Haziran 2015

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:

PHP
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ı:

PHP
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>

Kategori Genel
Etiketler