Android ve GIF
Android yazmaya ilk baÅŸladığım zamanlarda, bir projemde tasarımcının yaptığı yükleniyor GIF’ını oynatmam gerekiyordu. Ä°lk düşündüğümde, biÅŸey yok ya demiÅŸtim hallederiz hemen. Alt tarafı bir ImageView koyup kaynak dosyası olarak GIF kaynağımı gösterecektim. Ne de olsa web projesi geliÅŸtirirken tek yapmam gereken buydu. Tabi sonucu hayal kırıklığı oldu. Bu yazımda benim o zamandan beri kullandığım tekniÄŸi anlatacağım. Internette biraz araÅŸtırma yaptım insanlar GIF için ayrı View’ler yazma yoluna falan da gitmiÅŸ. Hala en basit yolun bu olduÄŸnu düşünüyorum.
Benim ilk karşılaÅŸtığım örneÄŸi yapacağım, bir “loading.gif” dosyasını android cihazda hareket ettireceÄŸiz. Bunun için ihtiyacımız olan ilk ÅŸey tabi ki de Loading.gif dosyası. Bunun için benim kullandığım ilk loading.gif dosyasını bulmaya çalıştım fakat bulamadım. Bu sebepten google’da yaptığım bir aramanın sonucunu kullanacağım. GIF dosyasını hemen saÄŸ tarafınızda görebilirsiniz.
GIF Dosyasının Hazırlanması
SaÄŸ taraftaki gif dosyanızı bilgisayarınıza indirin. Åžimdi yapmamız gereken bu GIF dosyasını oluÅŸturan FRAME’leri çıkarmak. Bunun için Photoshop ya da benzeri bir program kullanabilirsiniz. Ben Photoshop’a lisans ücreti vermeye gerek görmüyorum. Hatta çoÄŸunluka o büyüklükte bir resim iÅŸleme programına dahi ihtiyacım olmuyor. Böyle ihtiyacım olan ender durumlarda ise pixlr editor kullanıyorum.
Hemen hemen tüm iÅŸlemlerde pixlr editor beni tatmin etse de GIF dosyasını FRAME’lere ayırma iÅŸleminde sınıfta kalıyor. Bu sebepten bende baÅŸka bir site üzerinden GIF dosyasını FRAME’lerine ayırıyorum. Fakat gelin görün ki bu site de her bir FRAME’i yine GIF formatında dönüyor. Benim ihtiyacım olan PNG ya da JPG formatında resimler. Bunun için oturup tüm frame’leri tek tek PNG formatına çeviriyorum.
EÄŸer tüm bu iÅŸlemlerden kaçınmak ve bu tutorial’a devam etmek istiyorsanız FRAME’lerin PNG formatındaki hallerine buradan ulaÅŸabilirsiniz.
Projenin Olusturulması
Tahmin edeceğiniz üzere bu örneğimizi yine Eclipse üzerinden yapıyoruz.
Eclipse üzerinden Android Application Project yaratıyoruz. Yaratırken aşağıdaki değerleri kullanıyorum.
- Application Name: AndroidLoading
- Project Name:Â Â AndroidLoading
- Package Name:Â com.bahadirakin.gif
- Minimum Required SDK: API 8
- Target SDK: API 18
- Compile With: API 18
- Theme: None
Projemiz yaratılırken Eclipse bize boÅŸ bir activity’de yaratıyor. Projemiz içerisinde sadece loading hareketli resmini göstereceÄŸimizi düşünecek olursak, bu bize yeter de artar bile.
Projenizi oluÅŸturduktan sonra kendinizin oluÅŸturduÄŸu ya da benim linkini verdiÄŸim RAR dosyasından çıkan tüm FRAME’leri (ki toplam 12 tane olması örnek GIF dosyasıyla ilgilidir) res/drawable-mdpi klasörüne atıyoruz. Bu örneÄŸimiz içerisinde Drawable klasörlerinden birine atmanız yeterli olacaktır.
Hareketlendirme
Åžimdi FRAME’lerimizi eklediÄŸimize göre hareketlendirmeye ve ImageView’imizi eklemeye baÅŸlayabiliriz. Bunun için yine drawable-mdpi klasörünün altına bir tane “Android Animation List” xml dosyası oluÅŸturuyoruz. Bunun için New -> Other -> Android XML File seçeneÄŸini seçtikten sonra gelen ekranı aÅŸağıdaki gibi dolduruyoruz.
Burdan sonra finish dediÄŸimizde bize boÅŸ bir animation dosyası oluÅŸturacak. Bizim yapacağımız ise her bir FRAME’imizi bu dosyanın içine tanımlayıp, süreler vermek olacak. EÄŸer linkte’ki RAR dosyasının içerisindeki FRAME’lerden devam ediyorsanız son durumda aÅŸağıdaki gibi bir loading.xml dosyası elde edeceksiniz.
loading.xml
| 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 | <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/tmp0" android:duration="100"/> <item android:drawable="@drawable/tmp1" android:duration="100"/> <item android:drawable="@drawable/tmp2" android:duration="100"/> <item android:drawable="@drawable/tmp3" android:duration="100"/> <item android:drawable="@drawable/tmp4" android:duration="100"/> <item android:drawable="@drawable/tmp5" android:duration="100"/> <item android:drawable="@drawable/tmp6" android:duration="100"/> <item android:drawable="@drawable/tmp7" android:duration="100"/> <item android:drawable="@drawable/tmp8" android:duration="100"/> <item android:drawable="@drawable/tmp9" android:duration="100"/> <item android:drawable="@drawable/tmp10" android:duration="100"/> <item android:drawable="@drawable/tmp11" android:duration="100"/> </animation-list> |
Loading animasyonumuzu oluÅŸturduÄŸumuza göre ÅŸimdi bunu bir ImageView’e baÄŸlayalım. Bunun için activity_main.xml dosyasını aÅŸağıdaki gibi güncelliyoruz.
activity_main.xml
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <ImageView android:id="@id/loadingImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/loading" /> </RelativeLayout> |
Artık tek yapmamız gereken kod tarafında animasyonu başlatmak. Bunun için MainActivity sınıfı içerisini aşağıdaki gibi güncelliyoruz.
MainActivity.java
| 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 | package com.bahadirakin.gif; import android.app.Activity; import android.graphics.drawable.AnimationDrawable; import android.os.Bundle; import android.view.Menu; import android.widget.ImageView; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final ImageView imageView = (ImageView) findViewById(R.id.loadingImage); final AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable(); animationDrawable.start(); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } } |
 Son
Uygulamanızı bir emulatorde ya da telefonda baÅŸlattığınızda GIF’inizin hareketlendiÄŸini göreceksiniz.
End Of Line
