Fatih SoysalBu makalede, AndroidImageSlider kütüphanesini kullanarak bir Android uygulamada birden çok görüntünün nasıl animasyonlu slayt geçişi halinde gösterileceğini açıklayacağım..
Bildiğiniz üzere bir image slider, bir dizi görüntüyü tek tek modül içerisinde göstermek için kullanılır. Resimlerle kaydırma, düzenli aralıklarla otomatik olarak yapılabilir veya sonraki veya önceki slaytları görüntülemek için hızlıca kaydır şeklinde kullanıcı etkileşimine yanıt verebilir. Bu makalede, Android uygulamada AndroidImageSlider kütüphanesini kullanarak animasyonlu slider nasıl oluşturulacağını anlatacağım.
AndroidImageSlider kütüphanesini projeye ekleme
AndroidImageSlider kütüphanesini derlemek için, kütüphanesinin uygulamaya eklenmesi gerekiyor. Uygulamanın build.gradle dosyasını açın. Kütüphaneyi ekleyin. Çalışma zamanında kütüphaneyi otomatik olarak derleyecektir.
1 2 3 | dependencies { compile project(':library') } |
Slider OluÅŸturma
1 2 3 4 5 6 7 8 | <com.uygulamauniqueadresiniz.slider.library.SliderLayout android:id="@+id/slider" android:layout_width="match_parent" custom:pager_animation="Accordion" custom:auto_cycle="true" custom:indicator_visibility="visible" custom:pager_animation_span="1100" android:layout_height="200dp" /> |
Image slider’ı görüntülemek için BaseSliderView.OnSliderClickListener ve ViewPagerEx.OnPageChangeListener‘ı Activity Class‘da uygulamamız gerekir. Bu class’ın çağıracağız ve kullanacağımız metodları aÅŸağıda açıklıyorum.
- onSliderClick() Bileşenlerimizin slider üzerine tıklayarak tepki vermesini istediğimizde kullanacağız.
- onPageScrolled() Otomatik veya kullanıcı tarafından başlatılan dokunmatik kaydırmayı işlemek için kullanılır
- onPageSelected() Bir görsel seçildiğinde çalışacak metoddur:
- onPageScrollStateChanged() Kaydırma durumunun değiştiği senaryoyu işlemektedir.
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 | public class MainActivity extends AppCompatActivity implements BaseSliderView.OnSliderClickListener, ViewPagerEx.OnPageChangeListener{ private SliderLayout imageSlider; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); imageSlider = (SliderLayout)findViewById(R.id.slider); } @Override protected void onStop() { // make sure to call stopAutoCycle() on the slider before activity or fragment is destroyed imageSlider.stopAutoCycle(); super.onStop(); } @Override public void onSliderClick(BaseSliderView slider) { Toast.makeText(this,slider.getBundle().get("extra") + "", Toast.LENGTH_SHORT).show(); } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {} @Override public void onPageSelected(int position) { Log.e("Slider Demo", "Page Changed: " + position); } @Override public void onPageScrollStateChanged(int state) {} } |
HashMap ve TextSliderView’ı SliderLayout’a ekleme
Resim listesini saklamak için HashMap kullanmamız gerekiyor. EÄŸer sunucu tarafında görüntü yüklemek istiyorsak, o zaman HashMap <String, String> ‘i kullanmak zorundayız. Biz bir test uygulaması yazdığımızdan dolayı ÅŸimdilik mevcut dizinden resim yüklemek istiyoruz, o zaman ise HashMap <String, Integer> kullanmak zorundayız. Ayrıca addSlider() metodu aracılığıyla TextSliderView öğesini SliderLayout öğesine ekleyin. TextSliderView, açıklama, görüntü URL’si, ölçek veya baÅŸka birtakım diÄŸer bilgiler gibi görüntü hakkında bilgileri depolar.
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 | public class MainActivity extends AppCompatActivity implements BaseSliderView.OnSliderClickListener, ViewPagerEx.OnPageChangeListener{ private SliderLayout imageSlider; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); imageSlider = (SliderLayout)findViewById(R.id.slider); HashMap<String,String> url_maps = new HashMap<String, String>(); url_maps.put("Hannibal", "<a class="vglnk" href="https://www.studytutorial.in/wp-content/uploads/" rel="nofollow"><span>https</span><span>://</span><span>www</span><span>.</span><span>studytutorial</span><span>.</span><span>in</span><span>/</span><span>wp</span><span>-</span><span>content</span><span>/</span><span>uploads</span><span>/</span></a> 2017/06/facebook_login_with_php-min.jpg"); url_maps.put("Big Bang Theory", "<a class="vglnk" href="https://www.studytutorial.in/" rel="nofollow"><span>https</span><span>://</span><span>www</span><span>.</span><span>studytutorial</span><span>.</span><span>in</span><span>/</span></a> wp-content/uploads/2016/02/maxresdefault-2.jpg"); url_maps.put("House of Cards", "<a class="vglnk" href="https://www.studytutorial.in" rel="nofollow"><span>https</span><span>://</span><span>www</span><span>.</span><span>studytutorial</span><span>.</span><span>in</span></a> /wp-content/uploads/2016/10/multiseries_bar_chart.jpg"); url_maps.put("Game of Thrones", "<a class="vglnk" href="https://www.studytutorial.in/" rel="nofollow"><span>https</span><span>://</span><span>www</span><span>.</span><span>studytutorial</span><span>.</span><span>in</span><span>/</span></a> wp-content/uploads/2017/04/studytutorial-logo.png"); HashMap<String,Integer> file_maps = new HashMap<String, Integer>(); // file_maps.put("Hannibal",R.drawable.hannibal); // file_maps.put("Big Bang Theory",R.drawable.bigbang); // file_maps.put("House of Cards",R.drawable.house); // file_maps.put("Game of Thrones", R.drawable.game_of_thrones); for(String name : url_maps.keySet()){ TextSliderView textSliderView = new TextSliderView(this); // initialize a SliderLayout textSliderView .description(name) .image(url_maps.get(name)) .setScaleType(BaseSliderView.ScaleType.Fit) .setOnSliderClickListener(this); //add your extra information textSliderView.bundle(new Bundle()); textSliderView.getBundle() .putString("extra",name); imageSlider.addSlider(textSliderView); } } } |
Bir sonraki makalemizde tekrar görüşmek dileklerimle, huzurlu ve sağlıklı günler dilerim.
Hocam ben internetteki sunucumdan fotoğraf çekip gösteriyorum ama uygulamada bir kez açınca resmi ön belleğe alıyor ,sonrada siteden resmi değiştirdiğimde uygulamada değişmiyor.Ön belleği elle temizlemek gerekiyor. Bunu kolayca nasıl halledebilirim
Merhaba İbrahim. Bununla ilgili birden fazla yöntem mevcut. Bunun en etkili biçimde Picasso kütüphanesi ile yapabilirsin. Örnek aşağıdaki gibi:
Picasso.with(context).invalidate(imagePath);
Örnek 2:
package com.squareup.picasso;
public class PicassoTools {
public static void clearCache (Picasso p) {
p.cache.clear();
}
}
PicassoTools.clearCache(Picasso.with(context));
Project with path ‘:library’ could not be found in project ‘:app’.
Open File
kÜtüphane bulunamadı hatası alıyorum
Merhaba settings.gradle dosyasına aşağıdaki kod satırını eklerseniz sorununuz çözülecektir.
include ‘:app’ , ‘:library’