Smoother ImageSwitcher - How to?

494 views Asked by At

I'm trying out a simple project where you just scroll between images but it's the animation is really bad for now.

When I slide to switch between images it doesnt "attach" to my finger while I swipe, instead it fades out awkwardly and the next image comes in sliding. I think that it has to do with the animation parameters that I used but I don't really know what else to use.

What I want to achieve is something like scrolling horizontally between tabs in an app, while one image is sliding out, the other one is sliding in next to it, like they are attached to each other sideways.

Here is the code:

xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageSwitcher
        android:id="@+id/splashScreenImages"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
</ImageSwitcher>

</RelativeLayout>

java:

package com.test.imageswitchertest02;

import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.animation.AnimationUtils;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher.ViewFactory;

public class MainActivity extends Activity implements ViewFactory {

    ImageSwitcher splashSwitcher;
    Integer[] screensList = { R.drawable.splash_screen1, R.drawable.splash_screen2, R.drawable.splash_screen3 };
    int curIndex = 0;
    int downX, upX;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        splashSwitcher = (ImageSwitcher) findViewById(R.id.splashScreenImages);
        splashSwitcher.setFactory(this);
        splashSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_in));
        splashSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_out));

        splashSwitcher.setImageResource(screensList[curIndex]);
        splashSwitcher.setOnTouchListener(new OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if (event.getAction() == MotionEvent.ACTION_DOWN) {
                    downX = (int) event.getX();
                    Log.i("event.getX()", " downX " + downX);
                    return true;
                } else if (event.getAction() == MotionEvent.ACTION_UP) {
                    upX = (int) event.getX();
                    Log.i("event.getX()", "upX" + downX);

                    if (upX - downX > 100) {
                        // curIndex is the current image index being viewed
                        curIndex--;
                        if (curIndex < 0) {
                            curIndex = screensList.length - 1;
                        }

                        splashSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this,android.R.anim.slide_in_left));
                        splashSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this,android.R.anim.slide_out_right));

                        splashSwitcher.setImageResource(screensList[curIndex]);
                    } else if (downX - upX > -100) {
                        curIndex++;
                        if (curIndex > 2) {
                            curIndex = 0;
                        }
                        splashSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this,R.anim.slide_in_right));
                        splashSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this,R.anim.slide_out_left));

                        splashSwitcher.setImageResource(screensList[curIndex]);

                    }

                    return true;
                }
                return false;
            }
        });

    }

    @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;
    }

    @Override
    public View makeView() {
        ImageView i = new ImageView(this);
        i.setScaleType(ImageView.ScaleType.FIT_CENTER);
        return i;
    }

}
0

There are 0 answers