Simple
ViewAnimator
that
will animate between two or more views that have been added to it.
Only one child is shown at a time. If requested, can automatically
flip between each child at a regular interval.
The
ViewFlipper is a nifty widget that can be used to slide views in and
out of the user’s current view port. At times I find it a handy UI
replacement for the tab widget (which
I’ve stated before I’m not overly fond of).
What I like most about the ViewFlipper is the slick user experience.
It’s the same sort of effect that is prevalent on Windows
Phone 7,
and was used by Google to jazz up the latest incarnation of the
Android
Market.
Despite
the widget only recently gaining popularity on Android, it’s been
around since version 1.0 of the API. (Read
the official ViewFlipper documentation.)
However, I don’t think the developer documentation makes it
immediately obvious how to use the widget in your applications. In
particular, puzzling through the sliding in and out animation
transitions can be a little tough. Maybe not as tough as ignoring the
candy bowl sitting on my kitchen counter, assuring me no one will
notice if I take just one more Laffy Taffy, but still, it requires
you to put on your thinking cap. If you’d like to download and
import the entire project detailed in this tutorial, you can do so
here.
activity_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"
android:orientation="vertical"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="View
Flipper Demo" />
<ViewFlipper
android:id="@+id/view_flipper"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="6dip"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A
dog limps into a saloon and says..."
android:textColor="#00ff00"
android:textSize="14sp"
android:textStyle="bold"
>
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I'm
looking for the man who shot my paw!"
android:textColor="#00ff00"
android:textSize="14sp"
android:textStyle="bold"
>
</TextView>
</LinearLayout>
</ViewFlipper>
</LinearLayout>
MainActivity.java
package
com.example.viewflipper;
import
android.app.Activity;
import
android.os.Bundle;
import
android.view.Menu;
import
android.view.MotionEvent;
import
android.widget.ViewFlipper;
public
class
MainActivity extends
Activity {
private
ViewFlipper
vf;
private
float
lastX;
/**
Called when the activity is first created. */
@Override
public
void
onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
vf
= (ViewFlipper)
findViewById(R.id.view_flipper);
}
@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;
}
public
boolean
onTouchEvent(MotionEvent
touchevent) {
switch
(touchevent.getAction()) {
case
MotionEvent.ACTION_DOWN:
{
lastX
= touchevent.getX();
break;
}
case
MotionEvent.ACTION_UP:
{
float
currentX = touchevent.getX();
if
(lastX <
currentX) {
if
(vf.getDisplayedChild()
== 0)
break;
vf.setInAnimation(this,
R.anim.in_from_left);
vf.setOutAnimation(this,
R.anim.out_to_right);
vf.showNext();
}
if
(lastX >
currentX) {
if
(vf.getDisplayedChild()
== 1)
break;
vf.setInAnimation(this,
R.anim.in_from_right);
vf.setOutAnimation(this,
R.anim.out_to_left);
vf.showPrevious();
}
break;
}
}
return
false;
}
}
and
Two another animation file;
to create that file first you need to create a new folder into /res named animation and into that you need to create xml files.
in_from_left.xml
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false"
>
<!--
<translate
android:duration="1400"
android:fromXDelta="-100%"
android:fromYDelta="0%"
android:toXDelta="0%"
android:toYDelta="0%"
/> -->
<!--
<scale android:duration="100"
android:fromXScale="100%"
android:fromYScale="0%"
android:repeatMode="reverse"/>
-->
<rotate
android:fromDegrees="5"
android:toDegrees="50"
android:duration="5000"/>
</set>
in_from_right.xml
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false"
>
<translate
android:duration="1400"
android:fromXDelta="100%"
android:fromYDelta="0%"
android:toXDelta="0%"
android:toYDelta="0%"
/>
</set>
Screen
shot
Thanks
