Delimiters Development Diary

Auf der Suche nach Möglichkeiten Transitionen (also Übergangseffekten) zwischen Activities und/oder Views in Android zu implementieren, habe ich viele interessante Artikel gefunden. Im diesem Beitrag zeige ich zwei grundsätzliche Möglichkeiten auf, diese Effekte zu realisieren. Zunächst eine Transition zwischen zwei Views innerhalb einer Activity und anschließend eine Transition zwischen zwei Activities. Beide Projekte gibt es auch zum Download im jeweiligen Abschnitt.

View-to-View Transition

Je nach Vorhaben reicht es manchmal aus, die View einer Activity zu wechseln, anstatt gleich eine zweite (Activity) zu implementieren. Um hier einen Effekt zu erzielen, wird die Klasse ViewFlipper (verfügbar ab API-Level 1) aus dem Android-SDK verwendet und mit Animationen (Android Developers | Animation) versehen.

Hier eine kurze Demo, wie das ganze aussehen wird:

Die Views (ImageView, klappt aber natürlich auch mit allen anderen) werden also via Animation ausgetauscht (in diesem Fall “fliegen” sie zur Ecke hinaus). Folgender Code zeichnet sich dafür verantwortlich:

/res/layout/main.xml

<ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/flipper"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <include android:id="@+id/first"  layout="@layout/view1" />
    <include android:id="@+id/second"  layout="@layout/view2" />
</ViewFlipper>

Ein ViewFlipper dient als Container für die Views (die in diesem Fall per include eingebunden werden, um den Code modularer zu halten).

public class FlipLaunch extends Activity {

	private ViewFlipper flipper;

	private Animation hideFirstView() {
		final Animation outtoLeft = new TranslateAnimation(
				Animation.RELATIVE_TO_PARENT, 0.0f,
				Animation.RELATIVE_TO_PARENT, -1.0f,
				Animation.RELATIVE_TO_PARENT, 0.0f,
				Animation.RELATIVE_TO_PARENT, -1.0f);
		outtoLeft.setDuration(500);
		outtoLeft.setInterpolator(new AccelerateInterpolator());
		return outtoLeft;
	}

	private Animation hideSecondeView() {
		final Animation outToRight = new TranslateAnimation(
				Animation.RELATIVE_TO_PARENT, 0.0f,
				Animation.RELATIVE_TO_PARENT, +1.0f,
				Animation.RELATIVE_TO_PARENT, 0.0f,
				Animation.RELATIVE_TO_PARENT, +1.0f);
		outToRight.setDuration(500);
		outToRight.setInterpolator(new AccelerateInterpolator());
		return outToRight;
	}

	private Animation showFirstView() {
		final Animation inFromLeft = new TranslateAnimation(
				Animation.RELATIVE_TO_PARENT, -1.0f,
				Animation.RELATIVE_TO_PARENT, 0.0f,
				Animation.RELATIVE_TO_PARENT, -1.0f,
				Animation.RELATIVE_TO_PARENT, 0.0f);
		inFromLeft.setDuration(500);
		inFromLeft.setInterpolator(new AccelerateInterpolator());
		return inFromLeft;
	}

	private Animation showSecondView() {
		final Animation inFromRight = new TranslateAnimation(
				Animation.RELATIVE_TO_PARENT, +1.0f,
				Animation.RELATIVE_TO_PARENT, 0.0f,
				Animation.RELATIVE_TO_PARENT, +1.0f,
				Animation.RELATIVE_TO_PARENT, 0.0f);
		inFromRight.setDuration(500);
		inFromRight.setInterpolator(new AccelerateInterpolator());
		return inFromRight;
	}

	@Override
	public void onCreate(final Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		flipper = (ViewFlipper) findViewById(R.id.flipper);
		ImageView view1 = (ImageView) findViewById(R.id.image1);
		ImageView view2 = (ImageView) findViewById(R.id.image2);

		view1.setOnClickListener(new View.OnClickListener() {

			public void onClick(final View view) {
				flipper.setInAnimation(showSecondView());
				flipper.setOutAnimation(hideFirstView());
				flipper.showNext();
			}
		});

		view2.setOnClickListener(new View.OnClickListener() {

			public void onClick(final View view) {
				flipper.setInAnimation(showFirstView());
				flipper.setOutAnimation(hideSecondeView());
				flipper.showPrevious();
			}
		});
	}
}

Der ViewFlipper beherbergt also zwei Views. Der Einfachheit halber werden diese mit onClick-Methoden ausgestattet. Das Interessante: bei Klicken einer View werden im ViewFlipper zwei Animationen gesetzt:

• ViewFlipper.setInAnimation(Animation)
• ViewFlipper.setOutAnimation(Animation)

Download (Eclipse-Projekt)
Android FlipView Demo (247)

Activity-to-Activity Transition

Seit Android 2.0 gibt es darüberhinaus auch die Möglichkeit, die Art des Übergangs zwischen zwei Activities zu steuern – über die Methode Activity.overridePendingTransition(int, int). Allerdings kann dies vom Nutzer deaktiviert werden. Ausserdem gilt der Übergang nicht bei der Back-Navigation.

Hier zunächst wieder eine Demo, wie es aussehen wird:

Zunächst werden zwei Layouts (eine für jede der Activities) geschrieben:

/res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ImageView
        android:id="@+id/image"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitXY"
        android:src="@drawable/image1" />
</LinearLayout>

/res/layout/second.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ImageView
        android:id="@+id/image"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="fitXY"
        android:src="@drawable/image2" />
</LinearLayout>

Zusätzlich benötigen wir noch zwei Animationen (wie auch bei der FlipView: in und out). Diese konfigurieren wir dieses mal über XML. Sollte noch kein Ordner /res/anim vorhanden sein, so muss dieser erstellt werden.

/res/anim/in.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:fromAlpha="0.0"
    android:toAlpha="1.0"
    android:duration="@android:integer/config_longAnimTime" />

/res/anim/out.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:fromAlpha="1.0"
    android:toAlpha="0.0"
    android:duration="@android:integer/config_longAnimTime" />

Die beiden Activities sehen relativ gleich aus. Daher zeige ich an dieser Stelle nur die erste:

public class TransitionLaunch extends Activity implements OnClickListener {

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		ImageView imageView = (ImageView) findViewById(R.id.image);
		imageView.setOnClickListener(this);
	}

	/** @see android.view.View.OnClickListener#onClick(android.view.View) */
	@Override
	public void onClick(View v) {
		Intent intent = new Intent(this, SecondActivity.class);
		startActivity(intent);
		this.finish();
		overridePendingTransition(R.anim.in, R.anim.out);
	}
}

Das Geheimnis liegt im abschliessenden Aufruf der Methode Activity.overridePendingTransition(int, int). Über das XML können hier beliebige Animationen gebastelt werden.
Der Aufruf von finish() bewirkt darüber hinaus, dass die Activity beendet wird und somit nicht mehr über die Back-Navigation erreicht werden kann. Daher sollte man in einer echten Applikation Buttons für die Navigation verwenden.

Download (Eclipse-Projekt)
Android Transition Demo (256)