Android Image Slider

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

[php]
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://tugbaustundag.com/slider/Android_Developer_Days_Logo.png”,
“http://tugbaustundag.com/slider/cocuklar-icin-bilisim-zirvesi.jpg”,
“http://tugbaustundag.com/slider/indirmobil700.jpg”,
“http://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);
}
}
}

[/php]

ScreenSlidePagerAdapter.java kodları:

[php]
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;
}
}
[/php]

ScreenSlidePageFragment.java kodları:

[php]
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;
}
}

[/php]

CirclePageIndicator.java kodları:

[php]
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);
}
}
}
[/php]
Arayüz kodları:

activity_main.xml kodları

[php]




[/php]

fragment_screen_slide_page.xml kodları

[php]



[/php]

ve AndroidManifest.xml dosyasında internet izinini verdik.

[php]

[/php]

Son olarak ufak bir not: Bu yukarıda anlattığım projemin kodlarını indirmek isterseniz; yapmanız gereken tek şey aşağıya koyduğum KODLARI İNDİR resmine tıklamak.

download

Hayatınızın daha da kolaylaşması dileğiyle…

Kategori Genel
Etiketler