If your app only has one View, your app is probably pretty boring. However, if you’re building an interesting app you’ll probably have to switch between multiple Views, maybe go back and forth and have some nice animations. You could write your animations and manually do the transitioning yourself but once you get more than 2 or so Views that’s gonna get tough to keep up with (and messy!). Fortunately the ViewFlipper solves this problem quite nicely.
Step 1.
Let’s start all the way at the beginning, File -> New Android Project. Feel free to use your own Application and Package Names but make sure you tell it to create a MainActivity. This will be the Activity that controls the transition between Views.
Step 2.
Once you get your project set up you’ll need to add a ViewFlipper to main.xml. In this example we’ll also add a couple of buttons that let us go back and forth between our Views.
main.xml
1 <?xml version=”1.0″ encoding=”utf-8″?> 2 <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android” 3 android:orientation=”vertical” 4 android:layout_width=”fill_parent” 5 android:layout_height=”fill_parent”> 6 7 <LinearLayout android:orientation=”horizontal” 8 android:layout_width=”fill_parent” 9 android:layout_height=”wrap_content”>10 <Button android:id=”@+id/previousButton”11 android:text=”Previous”12 android:layout_width=”wrap_content”13 android:layout_height=”wrap_content”/>14 <Button android:id=”@+id/nextButton”15 android:text=”Next”16 android:layout_width=”wrap_content”17 android:layout_height=”wrap_content”/>18 </LinearLayout>19 20 <ViewFlipper android:id=”@+id/viewFlipper”21 android:layout_width=”fill_parent”22 android:layout_height=”fill_parent”>23 <TextView android:layout_width=”fill_parent”24 android:layout_height=”wrap_content”25 android:text=”View 1″/>26 <TextView android:layout_width=”fill_parent”27 android:layout_height=”wrap_content”28 android:text=”View 2″/>29 <TextView android:layout_width=”fill_parent”30 android:layout_height=”wrap_content”31 android:text=”View 3″/>32 </ViewFlipper>33 </LinearLayout>34
Next in MainActivity ‘s onCreate method, wire up ClickHandlers to the Buttons and use the ViewFlipper’s showNext() and showPrevious() methods to move between Views.
MainActivity
1 publicvoid onCreate(Bundle savedInstanceState) { 2 super.onCreate(savedInstanceState); 3 setContentView(R.layout.main); 4 5 final ViewFlipper viewFlipper = (ViewFlipper)findViewById(R.id.viewFlipper); 6 7 Button nextButton = (Button) this.findViewById(R.id.nextButton); 8 nextButton.setOnClickListener(new OnClickListener() 9 { 10 11 @Override 12 publicvoid onClick(View v) { 13 viewFlipper.showNext(); 14 } 15 16 }); 17 18 Button previousButton = (Button) this.findViewById(R.id.previousButton); 19 previousButton.setOnClickListener(new OnClickListener() 20 { 21 22 @Override 23 publicvoid onClick(View v) { 24 viewFlipper.showPrevious(); 25 } 26 27 }); 28 29 }
Now, if all you wanted was a simple transition between Views you could stop now. However, that would be… boring and we can do a heck of a lot better by adding a nice slide transition. To make this work we’ll use the 4 animations below. These allow us to slide in and out from either direction depending on whether we’re going forward or backward and they also add a very subtle alpha fade in and fade out. If you’re interested in checking out other types of animations look no further than your Android SDK directory: Android_SDK\Platform\android-{version}\samples\ApiDemos\res\anim
view_transition_in_left.xml
1 <?xml version=”1.0″ encoding=”utf-8″?>2 <set xmlns:android=”http://schemas.android.com/apk/res/android”>3 <translate android:fromXDelta=”100%p” android:toXDelta=”0″ android:duration=”300″/>4 <alpha android:fromAlpha=”0.0″ android:toAlpha=”1.0″ android:duration=”300″/>5 </set>6
1 <?xml version=”1.0″ encoding=”utf-8″?>2 <set xmlns:android=”http://schemas.android.com/apk/res/android”>3 <translate android:fromXDelta=”-100%p” android:toXDelta=”0″ android:duration=”300″/>4 <alpha android:fromAlpha=”0.0″ android:toAlpha=”1.0″ android:duration=”300″/>5 </set>
1 <?xml version=”1.0″ encoding=”utf-8″?>2 <set xmlns:android=”http://schemas.android.com/apk/res/android”>3 <translate android:fromXDelta=”0″ android:toXDelta=”-100%p” android:duration=”300″/>4 <alpha android:fromAlpha=”1.0″ android:toAlpha=”0.0″ android:duration=”300″/>5 </set>
1 <?xml version=”1.0″ encoding=”utf-8″?>2 <set xmlns:android=”http://schemas.android.com/apk/res/android”>3 <translate android:fromXDelta=”0″ android:toXDelta=”100%p” android:duration=”300″/>4 <alpha android:fromAlpha=”1.0″ android:toAlpha=”0.0″ android:duration=”300″/>5 </set>6
Finally, we need to update MainActivity to set the ViewFlipper’s inAnimation and outAnimation properties. We’ll use a slide in from the left when the user clicks “Next” and we’ll slide in from the right when the user clicks “Previous”.
1 publicvoid onCreate(Bundle savedInstanceState) { 2 super.onCreate(savedInstanceState); 3 setContentView(R.layout.main); 4 5 final ViewFlipper viewFlipper = (ViewFlipper)findViewById(R.id.viewFlipper); 6 7 Button nextButton = (Button) this.findViewById(R.id.nextButton); 8 nextButton.setOnClickListener(new OnClickListener() 9 { 10 11 @Override 12 publicvoid onClick(View v) { 13 viewFlipper.setInAnimation(MainActivity.this, R.anim.view_transition_in_left); 14 viewFlipper.setOutAnimation(MainActivity.this, R.anim.view_transition_out_left); 15 viewFlipper.showNext(); 16 } 17 18 }); 19 20 Button previousButton = (Button) this.findViewById(R.id.previousButton); 21 previousButton.setOnClickListener(new OnClickListener() 22 { 23 24 @Override 25 publicvoid onClick(View v) { 26 viewFlipper.setInAnimation(MainActivity.this, R.anim.view_transition_in_right); 27 viewFlipper.setOutAnimation(MainActivity.this, R.anim.view_transition_out_right); 28 viewFlipper.showPrevious(); 29 } 30 31 }); 32 33 }
No comments:
Post a Comment