ViewFlipper Kullanımı

By Hakan Lana Last updated Jul 28, 2018

Android development ortamı bizim gibi eski mantık gidenler için biraz farklı, Açıkçası Bazı noktalar öğrendikten sonra çok mantıklı gelse de, Öğrenene kadar tam olarak tahmin edebileceğiniz yapıda değil.

Bu gün bana biraz farklı gelen ViewFlipper kullanımına örnek vermek istiyorum.

Öncelikle ViewFlipper nedir ? – Kısaca Görsel kaydırma Objesi olarak tanımlayabiliriz. Aslında buna “Resim kaydırma şeysiii…” demeyi seviyorum. Bu obje kabaca Media dosyalarımızı özellikle de resimlerimizi bir tutan ve sağa/sola kaydırma hareketi ile görüntüleme imkanı sunan bir obje.

Peki neden bu objeyi konu aldım ? – Öncelikle Kullanımı basit olsa da, biraz dolaylı. Bence vurgulanması gereken En temel detayda şu: Objeyi kullanırken Resimleri tam ortalama ve ve hizalama işlerini yapabilmek adına En ideal Kullanımı içine ImageView leri direkt olarak tanımlamak yerine her birini birer LinearLayout içinde tanımlamak daha ideal oluyor!!!

Bu yazıda amacım, bir klasör içindeki resimleri nasıl Dinamik ve basit bir method ile bu obje içerisinde gösterilir kılabileceğimiz olacak.

Öncelikle ilk yapmamız gereken : objeyi eklemek istediğimiz Activity nin xml dosyasına aşağıdaki kodu eklemek olacak.



<!--Boş bir ViewFlipper ekliyoruz, değişken sayıda resmi idare etmek amacı ile içeriğini dinamik hazırlamamız gerekecek. "clickable" özelliğinin set etmek önemli-->
    <ViewFlipper
        android:id="@+id/flipper_example"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:layout_marginTop="0dp"
        android:autoStart="false"
        android:clickable="true"
        android:flipInterval="4000"
        android:gravity="center">
    </ViewFlipper>

<ViewFlipper

android:id="@+id/flipper_example"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:layout_gravity="center"

android:layout_marginTop="0dp"

android:autoStart="false"

android:clickable="true"

android:flipInterval="4000"

android:gravity="center">

</ViewFlipper>

Ayrıca Animasyon yaratabilmek adına Aşağıdagi iki dosyayı “res/anim/” yoluna “left_to_right.xml” ve “right_to_left.xml” dosyaları ile kaydediyoruz. (Bu dosyalar ile animasyon hızı ve hareketini yönü ile birlikte tanımlamış oluyoruz.) Dosyalar isim sırası ile verilmiştir! 🙂



<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <translate
        android:duration="500"
        android:fromXDelta="-100%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="0%"/>
</set>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:shareInterpolator="false">

<translate

android:duration="500"

android:fromXDelta="-100%"

android:fromYDelta="0%"

android:toXDelta="0%"

android:toYDelta="0%"/>

</set>



<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <translate
        android:duration="500"
        android:fromXDelta="100%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="0%" />
</set>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:shareInterpolator="false">

<translate

android:duration="500"

android:fromXDelta="100%"

android:fromYDelta="0%"

android:toXDelta="0%"

android:toYDelta="0%" />

</set>

Akabinde, Activity mize Aşağıdaki Methodu ekleyebiliriz. (Bu noktada Yüklenecek Klasör bilgisini Dinamik olarak alıyor.)



private void prepareFlipper(String filesPath) {
    //ID den yakalayım objeyi initialize ediiyoruz. (Siz ViewFlipper için ne ID verdi iseniz bunu kullanmalısınız. Biz "flipper_example" Kullandık)
    ViewFlipper viewFlipper = findViewById ( R.id.flipper_example );
    //Animasyonlar Tanımlıyoruz, bu noktada Animasyonları tanımlıyoruz.
    //"OnFlipListener" e Dikkat!!!!
    final ViewFlipper tmpViewFlipper = viewFlipper;
    viewFlipper.setOnTouchListener ( new OnFlipListener (getBaseContext ()) {
        @Override
        public void onRightToLeft() {
            //Child sayısını kontrol ederek Tek eleman olması durumunda Kaydırma animasyonunu devre dışı bırakıyoruz.
            if (tmpViewFlipper.getChildCount () &gt; 1) {
                tmpViewFlipper.setInAnimation ( getApplicationContext (), R.anim.right_to_left );
                tmpViewFlipper.showPrevious ();
            }
        }

        @Override
        public void onLeftToRight() {
            if (tmpViewFlipper.getChildCount () &gt; 1) {
                tmpViewFlipper.setInAnimation ( getApplicationContext (), R.anim.left_to_right );
                tmpViewFlipper.showNext ();
            }
        }
    } );

    //Tekrar tekrar içeriği değiştirecek isek her seferinde sıfırlamak için kullanılacak.
    if (viewFlipper.getChildCount () &gt; 0) viewFlipper.removeAllViews ();

    //Burada Standart olarak Gallery Path'ini alıyor ve içindeki dosyaları tarıyarak Array'e ekliyoruz.
    File[] item = (new File ( filesPath )).listFiles ();
    //Sonrasında Aşağıdaki döngü yordamı ile her bir File için hiyerarşik yapı ile ViewFlipper altında bir LinearLayout ve
    //ImageView yaratıyoruz, Ayrıca LayoutParams yardımı ile hizalamalarımızı yapıyoruz.
    for (int i = 0; i &lt; item.length; i++) {
        FrameLayout.LayoutParams imageViewParams = new FrameLayout.LayoutParams ( FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.WRAP_CONTENT );
        imageViewParams.gravity = Gravity.CENTER;

        LinearLayout tmpLDPicture = new LinearLayout ( viewFlipper.getContext () );
        tmpLDPicture.setLayoutParams ( imageViewParams );
        tmpLDPicture.setGravity ( Gravity.CENTER );

        ImageView tmpDPicture = new ImageView ( tmpLDPicture.getContext () );
        tmpDPicture.setLayoutParams ( imageViewParams );
        tmpDPicture.setScaleType ( ImageView.ScaleType.FIT_CENTER );
        tmpDPicture.setAdjustViewBounds ( true );
        //Görüntülenecek İmajı ImageView objesine basıyoruz.
        tmpDPicture.setImageBitmap ( android.graphics.BitmapFactory.decodeFile ( item[i].getAbsolutePath () ) );

        tmpLDPicture.addView ( tmpDPicture );
        viewFlipper.addView ( tmpLDPicture );
    }
}

private void prepareFlipper(String filesPath) {

//ID den yakalayım objeyi initialize ediiyoruz. (Siz ViewFlipper için ne ID verdi iseniz bunu kullanmalısınız. Biz "flipper_example" Kullandık)

ViewFlipper viewFlipper = findViewById ( R.id.flipper_example );

//Animasyonlar Tanımlıyoruz, bu noktada Animasyonları tanımlıyoruz.

//"OnFlipListener" e Dikkat!!!!

final ViewFlipper tmpViewFlipper = viewFlipper;

viewFlipper.setOnTouchListener ( new OnFlipListener (getBaseContext ()) {

@Override

public void onRightToLeft() {

//Child sayısını kontrol ederek Tek eleman olması durumunda Kaydırma animasyonunu devre dışı bırakıyoruz.

if (tmpViewFlipper.getChildCount () > 1) {

tmpViewFlipper.setInAnimation ( getApplicationContext (), R.anim.right_to_left );

tmpViewFlipper.showPrevious ();

}

@Override

public void onLeftToRight() {

if (tmpViewFlipper.getChildCount () > 1) {

tmpViewFlipper.setInAnimation ( getApplicationContext (), R.anim.left_to_right );

tmpViewFlipper.showNext ();

}

} );

//Tekrar tekrar içeriği değiştirecek isek her seferinde sıfırlamak için kullanılacak.

if (viewFlipper.getChildCount () > 0) viewFlipper.removeAllViews ();

//Burada Standart olarak Gallery Path'ini alıyor ve içindeki dosyaları tarıyarak Array'e ekliyoruz.

File[] item = (new File ( filesPath )).listFiles ();

//Sonrasında Aşağıdaki döngü yordamı ile her bir File için hiyerarşik yapı ile ViewFlipper altında bir LinearLayout ve

//ImageView yaratıyoruz, Ayrıca LayoutParams yardımı ile hizalamalarımızı yapıyoruz.

for (int i = 0; i < item.length; i++) {

FrameLayout.LayoutParams imageViewParams = new FrameLayout.LayoutParams ( FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.WRAP_CONTENT );

imageViewParams.gravity = Gravity.CENTER;

LinearLayout tmpLDPicture = new LinearLayout ( viewFlipper.getContext () );

tmpLDPicture.setLayoutParams ( imageViewParams );

tmpLDPicture.setGravity ( Gravity.CENTER );

ImageView tmpDPicture = new ImageView ( tmpLDPicture.getContext () );

tmpDPicture.setLayoutParams ( imageViewParams );

tmpDPicture.setScaleType ( ImageView.ScaleType.FIT_CENTER );

tmpDPicture.setAdjustViewBounds ( true );

//Görüntülenecek İmajı ImageView objesine basıyoruz.

tmpDPicture.setImageBitmap ( android.graphics.BitmapFactory.decodeFile ( item[i].getAbsolutePath () ) );

tmpLDPicture.addView ( tmpDPicture );

viewFlipper.addView ( tmpLDPicture );

}

Methodumuzun içinde, “OnFlipListener” kullanmıştık, bu kısım dikkatinizi çekmiştir, bu noktada,aslen yaptığımız – Eventleri istediğimiz şekilde algılayarak sağlıklı bir kaydırma aksiyonu ekleyebilmek adına kendi listener objemizi tanımlamaktır. Aşağıdaki sınıfı sağa ve sola kaydırma için rahatlıkla kullanabilirsiniz.



package <!-- Bu kısma Kendi paket adınızı koyun -->;

import android.content.Context;
import android.support.v4.view.GestureDetectorCompat;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;

public abstract class OnFlipListener implements View.OnTouchListener {
    Context context;
    private final GestureDetectorCompat gdt = new GestureDetectorCompat (context, new GestureListener());

    public OnFlipListener(Context ctx) {
        this.context = ctx;
    }

    @Override
    public boolean onTouch(final View v, final MotionEvent event) {
        return gdt.onTouchEvent(event);
    }

    public abstract void onRightToLeft();

    public abstract void onLeftToRight();

    private final class GestureListener extends GestureDetector.SimpleOnGestureListener {

        private static final int SWIPE_MIN_DISTANCE = 190;
        private static final int SWIPE_THRESHOLD_VELOCITY = 250;

        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            if (e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                onRightToLeft();
                return true;
            } else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                onLeftToRight();
                return true;
            }
            return false;
        }
    }
}

package ;

import android.content.Context;

import android.support.v4.view.GestureDetectorCompat;

import android.view.GestureDetector;

import android.view.MotionEvent;

import android.view.View;

public abstract class OnFlipListener implements View.OnTouchListener {

Context context;

private final GestureDetectorCompat gdt = new GestureDetectorCompat (context, new GestureListener());

public OnFlipListener(Context ctx) {

this.context = ctx;

}

@Override

public boolean onTouch(final View v, final MotionEvent event) {

return gdt.onTouchEvent(event);

}

public abstract void onRightToLeft();

public abstract void onLeftToRight();

private final class GestureListener extends GestureDetector.SimpleOnGestureListener {

private static final int SWIPE_MIN_DISTANCE = 190;

private static final int SWIPE_THRESHOLD_VELOCITY = 250;

@Override

public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {

if (e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {

onRightToLeft();

return true;

} else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {

onLeftToRight();

return true;

}

return false;

}