Birçok uygulamada resimleri kullanıcının kolay ve hızlı bir şekilde görebilmesi için image slider animasyonları kullanmaktadır. Image slider mantığı, belirli bir alanda birden fazla resmin kendi aralarında ara yüzde geçiş yaparak gösterilmesidir. Bu örneği hazırlamak için ViewPager ve Universal Image Loader kütüphanelerini kullandım.
Image Loader kütüphanlerini neden kullanmalıyız?
Eğer bir ImageView içerisindeki resim İnternet üzerindeki bir kaynaktan yüklenecekse bu resmin asenkron bir bağlantı açılarak ana akışı bozmadan yüklenmesi tavsiye edilir. Bu yüzden resimlerin AsyncTask gibi yapılarla asenkron yüklenmesinin yanı sıra yerel bir hafızada tutulması (cache) de gerekir. ImageLoader, cihaz hafızasında ya da SD kart üzerinde resimleri saklayarak tekrar yüklemelerin de önüne geçer. İşte bu konuda Image Loader kütüphaneleri bize yardımcı olur.
Image Loader kütüphaneleri arasında en çok Universal Image Loader kütüphanesini kullanımını tavsiye etmekteyim. Çünkü Universal Image Loader kütüphanisi birincil olarak, resimlerin asekron yüklenmesini sağlar. Böylelikle kütüphane haricinde AsyncTask gibi yapılar kullanmak zorunda kalmayız.Diğer bir yandan kullanılan resimlerde Cache işlemini en iyi kullanan kütüphanedir.
İlk öncelikle Universal Image Loader kütüphanemizi indirelim.İndirdiğimiz jar dosyamızı Android Studio’da Projeye Jar Kütüphanesini Dahil Etme makalemde anlatığım şekilde Android projemize dahil ettim.
Java kodlarımız:
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
package com.tugbaustundag.imageslider; import android.os.Bundle; import android.support.v4.view.ViewPager; import android.support.v7.app.ActionBarActivity; import java.util.Arrays; public class MainActivity extends ActionBarActivity { //Resimlerimizin bulunduğu yolları IMAGES adlı dizide tutuyoruz... private static final String[] IMAGES = new String[] { "http://www.tugbaustundag.com/slider/Android_Developer_Days_Logo.png", "http://www.tugbaustundag.com/slider/cocuklar-icin-bilisim-zirvesi.jpg", "http://www.tugbaustundag.com/slider/indirmobil700.jpg", "http://www.tugbaustundag.com/slider/ux700.png" }; private ViewPager pager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //ViewPager tanımladık.. pager = (ViewPager) findViewById(R.id.pager); //Resimlermizi arayüzde göstermek için kullancagmız ScreenSlidePagerAdapter sınıfına resim, yollarnı set ettim. ScreenSlidePagerAdapter pagerAdapter =new ScreenSlidePagerAdapter(getSupportFragmentManager()); pagerAdapter.addAll(Arrays.asList(IMAGES)); pager.setAdapter(pagerAdapter); //Resmin altındaki kucuk yuvarlak iconları resim saysına göre üreten CirclePageIndicator sınıfını cagırdık CirclePageIndicator indicator = (CirclePageIndicator) findViewById(R.id.indicator); indicator.setViewPager(pager); } @Override public void onBackPressed() { if (pager.getCurrentItem() == 0) { super.onBackPressed(); } else { pager.setCurrentItem(pager.getCurrentItem() - 1); } } } |
ScreenSlidePagerAdapter.java kodları:
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 |
package com.tugbaustundag.imageslider; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentStatePagerAdapter; import java.util.ArrayList; import java.util.List; public class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter { private List picList = new ArrayList<>(); public ScreenSlidePagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int i) { //Resimleri Image loader kütüphanesini kullanarak yüklenmesi icin resim url, ScreenSlidePageFragment sınıfına atadık. return ScreenSlidePageFragment.newInstance(picList.get(i)); } @Override public int getCount() { return picList.size(); } public void addAll(List picList) { this.picList = picList; } } |
ScreenSlidePageFragment.java kodları:
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 81 82 83 84 85 86 87 88 89 90 91 92 |
package com.tugbaustundag.imageslider; import android.graphics.Bitmap; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.ProgressBar; import com.nostra13.universalimageloader.core.DisplayImageOptions; import com.nostra13.universalimageloader.core.ImageLoader; import com.nostra13.universalimageloader.core.ImageLoaderConfiguration; import com.nostra13.universalimageloader.core.assist.FailReason; import com.nostra13.universalimageloader.core.listener.ImageLoadingProgressListener; import com.nostra13.universalimageloader.core.listener.SimpleImageLoadingListener; public class ScreenSlidePageFragment extends Fragment { private static final String PIC_URL = "screenslidepagefragment.picurl"; private ImageLoader imageLoader; private DisplayImageOptions options; public static ScreenSlidePageFragment newInstance(String picUrl) { //Resim yollarını Bundle metoduna ekledik Bundle arguments = new Bundle(); arguments.putString(PIC_URL, picUrl); ScreenSlidePageFragment fragment = new ScreenSlidePageFragment(); fragment.setArguments(arguments); return fragment; } @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_screen_slide_page, container, false); ImageView imageView = (ImageView)rootView.findViewById(R.id.image);//Resmin gösterilcegi controller //ProgressBar; resim ilk yüklenirken, yüklendiğine dair görseli sağlamak icin tanımladık final ProgressBar progressBar = (ProgressBar) rootView.findViewById(R.id.progress);// //ve Resim yollarını aldık Bundle arguments = getArguments(); String url = arguments.getString(PIC_URL); //Şimdi Universal Image Loader kütüphanesini kullanarak, resimlerimizi yükleyelim //Verilen resim yolunda, resim olmama yada resmin hatalı olma gibi durumlarda, ImageView de default gösterilcek //resim iconlarını tanımladık. options = new DisplayImageOptions.Builder() .showImageOnLoading(R.drawable.ic_launcher) .showImageForEmptyUri(R.drawable.ic_launcher) .showImageOnFail(R.drawable.ic_launcher) .cacheInMemory(true) .cacheOnDisk(true) .build(); imageLoader = ImageLoader.getInstance(); imageLoader.init(ImageLoaderConfiguration.createDefault(getActivity())); //displayImage metodunu kullanrak resmin yüklenmesinive görüntülenmasini sağladık imageLoader.getInstance() .displayImage(url, imageView, options, new SimpleImageLoadingListener() { @Override public void onLoadingStarted(String imageUri, View view) { progressBar.setProgress(2); progressBar.setVisibility(View.VISIBLE);//Yüklenme işlemi başladığında progressBar iconu görünür yaptık } @Override public void onLoadingFailed(String imageUri, View view, FailReason failReason) { progressBar.setVisibility(View.GONE);//Yüklenme işlemi bittiğinde progressBar iconu görünmez yaptık } @Override public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) { progressBar.setVisibility(View.GONE); } }, new ImageLoadingProgressListener() { @Override public void onProgressUpdate(String imageUri, View view, int current, int total) { progressBar.setProgress(Math.round(100.0f * current / total)); } }); return rootView; } } |
CirclePageIndicator.java kodları:
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 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
package com.tugbaustundag.imageslider; import android.content.Context; import android.content.res.TypedArray; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.view.Gravity; import android.view.ViewGroup; import android.widget.FrameLayout; import android.widget.ImageView; import android.widget.LinearLayout; import java.lang.reflect.Field; public class CirclePageIndicator extends LinearLayout implements ViewPager.OnPageChangeListener { public static final int DEFAULT_INDICATOR_SPACING = 5; private int activePosition; private int indicatorSpacing; private ViewPager.OnPageChangeListener userDefinedPageChangeListener; public CirclePageIndicator(Context context) { this(context, null); } public CirclePageIndicator(Context context, AttributeSet attrs) { this(context, attrs, 0); } public CirclePageIndicator(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); TypedArray a = context.getTheme().obtainStyledAttributes( attrs, R.styleable.CirclePageIndicator, 0, 0); try { indicatorSpacing = a.getDimensionPixelSize( R.styleable.CirclePageIndicator_indicator_spacing, DEFAULT_INDICATOR_SPACING); } finally { a.recycle(); } init(); } private void init() { setOrientation(HORIZONTAL); if (!(getLayoutParams() instanceof FrameLayout.LayoutParams)) { FrameLayout.LayoutParams params = new FrameLayout.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); params.gravity = Gravity.BOTTOM | Gravity.START; setLayoutParams(params); } } public void setViewPager(ViewPager pager) { userDefinedPageChangeListener = getOnPageChangeListener(pager); pager.setOnPageChangeListener(this); addIndicator(pager.getAdapter().getCount()); } private void addIndicator(int count) { for (int i = 0; i < count; i++) { ImageView img = new ImageView(getContext()); LayoutParams params = new LayoutParams( LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); params.leftMargin = indicatorSpacing; params.rightMargin = indicatorSpacing; img.setImageResource(R.drawable.circle_indicator_stroke); addView(img, params); } if (count > 0) { ((ImageView) getChildAt(0)).setImageResource(R.drawable.circle_indicator_solid); } } private void updateIndicator(int position) { if (activePosition != position) { ((ImageView) getChildAt(activePosition)).setImageResource(R.drawable.circle_indicator_stroke); ((ImageView) getChildAt(position)).setImageResource(R.drawable.circle_indicator_solid); activePosition = position; } } private ViewPager.OnPageChangeListener getOnPageChangeListener(ViewPager pager) { try { Field f = pager.getClass().getDeclaredField("mOnPageChangeListener"); f.setAccessible(true); return (ViewPager.OnPageChangeListener) f.get(pager); } catch (NoSuchFieldException e) { e.printStackTrace(); } catch (IllegalAccessException e) { e.printStackTrace(); } return null; } private int dp2px(float dpValue) { return (int) (dpValue * getContext().getResources().getDisplayMetrics().density); } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { if (userDefinedPageChangeListener != null) { userDefinedPageChangeListener.onPageScrolled(position, positionOffset, positionOffsetPixels); } } @Override public void onPageSelected(int position) { updateIndicator(position); if (userDefinedPageChangeListener != null) { userDefinedPageChangeListener.onPageSelected(position); } } @Override public void onPageScrollStateChanged(int state) { if (userDefinedPageChangeListener != null) { userDefinedPageChangeListener.onPageScrollStateChanged(state); } } } |
activity_main.xml kodları
1 |
fragment_screen_slide_page.xml kodları
1 |
|
ve AndroidManifest.xml dosyasında internet izinini verdik.
1 |
Son olarak ufak bir not: Bu yukarıda anlattığım projemin kodlarını indirmek isterseniz; yapmanız gereken tek şey github linkine tıklamak.
Hayatınızın daha da kolaylaşması dileğiyle…
Merhaba slider çalışmanız çok güzel, takıldığım birkaç yer var. Sliderı manşetler haline getirmeye çalışıyorum,
*numaralandırma ile geçiş
*ve resimlere tıklama
ile ilgili yardımınızı bekliyorum bu konuda ne yapabilirim.
Teşekkürler.
Paylaşımlarınız için çok teşekkürler
Acaba burada kullanılan resimlerin boyutunu nasıl ayarlarız.
Tümünün aynı yüksekliğe sahip olmasını istiyorum.
Resim boyutlarını ayarlamak için android:scaletype=”Fitxy” istediğim şeyi yaptı. Şimdi bu resimlerin tıklama eventini nasıl yapabiliriz?
Merhaba Tuğba hanım öncelikle paylaşımlarınız için çok teşekkür ederim. Yaptığınız örnekteki imagesliderı activity_main de framelayout kullanarak fragment ile gösteriyorum. Sorunsuz bir şekilde gösteriyor. Fakat şöyle bir durum var fragmenti remove edip addtobackstack() cagırdıktan sonra ekrana yeni fragmenti gösteriyorum. Ancak yeni fragmenti gösterdikten sonra back tuşuna basınca eski fragmentteki resimler gözükmüyor. Fakat ilginç bir şekilde eğer en son resme gidip baştaki resme dönersem o zaman resimler gözüküyor. Projenin linkin yolladım buttona tıklayıp geri tuşuna basın ve en sondaki resme gidin ne demek istediğimi daha iyi anlayacaksınız. Yardımlarınız için şimdiden teşekkür ederim. Proje linki : http://dosya.co/ywg8xtf75sx1/Addbacktostack.rar.html
Merhaba Tuğba hanım sorunu çözmüş bulunmaktayım. FragmentManager fm= getChildFragmentManager();//getFragmentManager olmayacak
//Resimlermizi arayüzde göstermek için kullancagmız ScreenSlidePagerAdapter sınıfına resim, yollarnı set ettim.
ScreenSlidePagerAdapter pagerAdapter =new ScreenSlidePagerAdapter(fm);
Öncelikle paylaşımınız için çok teşekkür ederim. ben android studio ya yenibaşladım. birşey danışmak istyorum. benim şu anda aktif bir projem var. bu kodları projeme nasıl dahil edebilirim. yani örn. benim activity base dosyam projemde ana sayfam. bunu ana sayfanın üst kısmına nasıl ekleyebilirim. mesela sizde ” public class MainActivity extends ActionBarActivity ” bu şekilde bende ” public class MainActivity extends Activity ” bu şekilde. projeyi bozmadan nasıl ekleyebilirim. sanırım javada 2 extends eklenemiyor. yada ben beceremedim. umarım kendimi anlatabilmişimdir. şimdiden teşekkür ederim.