Android ViewFlipper Tutorial

By: Unknown on 10.48

kali ini saya mauberbagi bagai mana cara membuat android View Flipper bagi temen2 yang mau belajar ketik atau copas script berikut

1. buat android projeck baru dengan nama ViewFlipper
2. untuk activity name nya gunakan nama berikut "ViewFlipperMainActivity.java"
    untuk Layout name nya gunakan nama berikut "view_flipper_main.xml"

res/layout/view_flipper_main.xml:

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:layout_width="fill_parent"
4.     android:layout_height="fill_parent"
5.     android:orientation="vertical" >
6. 
   
7.     <TextView
8.         android:layout_width="fill_parent"
9.         android:layout_height="wrap_content"
10.         android:layout_marginTop="10dp"
11.         android:gravity="center"
12.         android:text="View Flipper gambar 1"
13.         android:textColor="#000099"
14.         android:textSize="30dp" />
15. 
    
16.     <ViewFlipper
17.         android:id="@+id/view_flipper"
18.         android:layout_width="fill_parent"
19.         android:layout_height="fill_parent"
20.         android:layout_margin="6dip" >
21. 
    
22.         <!-- The child Views/Layout to flip -->
23. 
    
24. 
    
25.         <!-- Layout 1 for 1st Screen -->
26. 
    
27.         <LinearLayout
28.             android:layout_width="fill_parent"
29.             android:layout_height="fill_parent"
30.             android:gravity="center"
31.             android:orientation="vertical" >
32. 
    
33.             <TextView
34.                 android:layout_width="wrap_content"
35.                 android:layout_height="wrap_content"
36.                 android:layout_marginTop="15dp"
37.                 android:text="This Is Screen 1"
38.                 android:textColor="#191975"
39.                 android:textSize="25dp"
40.                 android:textStyle="bold" >
41.             </TextView>
42. 
    
43.             <ImageView
44.                 android:id="@+id/imageView1"
45.                 android:layout_width="442dp"
46.                 android:layout_height="450dp"
47.                 android:layout_marginTop="15dp"
48.                 android:src="@drawable/image1" />
49.         </LinearLayout>
50. 
    
51.         <!-- Layout 2 for 2nd Screen -->
52. 
    
53.         <LinearLayout
54.             android:layout_width="fill_parent"
55.             android:layout_height="fill_parent"
56.             android:gravity="center"
57.             android:orientation="vertical" >
58. 
    
59.             <TextView
60.                 android:layout_width="wrap_content"
61.                 android:layout_height="wrap_content"
62.                 android:layout_marginTop="15dp"
63.                 android:text="This Is Screen 2"
64.                 android:textColor="#191975"
65.                 android:textSize="25dp"
66.                 android:textStyle="bold" >
67.             </TextView>
68. 
    
69.             <ImageView
70.                 android:id="@+id/imageView1"
71.                 android:layout_width="450dp"
72.                 android:layout_height="450dp"
73.                 android:layout_marginTop="15dp"
74.                 android:src="@drawable/image2" />
75.         </LinearLayout>
76.         <!-- Layout 3 for 2nd Screen -->
77. 
    
78.         <LinearLayout
79.             android:layout_width="fill_parent"
80.             android:layout_height="fill_parent"
81.             android:gravity="center"
82.             android:orientation="vertical" >
83. 
    
84.             <TextView
85.                 android:layout_width="wrap_content"
86.                 android:layout_height="wrap_content"
87.                 android:layout_marginTop="15dp"
88.                 android:text="This Is Screen 2"
89.                 android:textColor="#191975"
90.                 android:textSize="25dp"
91.                 android:textStyle="bold" >
92.             </TextView>
93. 
    
94.             <ImageView
95.                 android:id="@+id/imageView1"
96.                 android:layout_width="450dp"
97.                 android:layout_height="450dp"
98.                 android:layout_marginTop="15dp"
99.                 android:src="@drawable/image3" />
100.         </LinearLayout>
101.     </ViewFlipper>
102. 
     
103. </LinearLayout>

selanjutnya buat folder bernama anim didalam res dan buat xml baru bernama
 
   res/anim/

1. in_from_left.xml
2. in_from_right.xml
3. out_to_left.xml
4. out_to_right.xml

dan berikut script dari

res/anim/ in_from_left.xml

1. <set xmlns:android="http://schemas.android.com/apk/res/android"
2.     android:shareInterpolator="false">
3.     <translate
4.         android:fromXDelta="-100%" android:toXDelta="0%"
5.            android:fromYDelta="0%" android:toYDelta="0%"
6.            android:duration="1400" />
7. </set>

res/anim/  in_from_right.xml

1. <set xmlns:android="http://schemas.android.com/apk/res/android"
2.     android:shareInterpolator="false">
3.     <translate
4.         android:fromXDelta="100%" android:toXDelta="0%"
5.            android:fromYDelta="0%" android:toYDelta="0%"
6.            android:duration="1400" />
7. </set>

res/anim/ out_to_left.xml

1. <set xmlns:android="http://schemas.android.com/apk/res/android"
2.     android:shareInterpolator="false">
3.       <translate android:fromXDelta="0%" android:toXDelta="-100%"
4.         android:fromYDelta="0%" android:toYDelta="0%"
5.         android:duration="1400"/>
6. </set>

res/anim/ out_to_right.xml

1. <set xmlns:android="http://schemas.android.com/apk/res/android"
2.     android:shareInterpolator="false">
3.       <translate android:fromXDelta="0%" android:toXDelta="100%"
4.         android:fromYDelta="0%" android:toYDelta="0%"
5.         android:duration="1400"/>
6. </set>

kemudian buat activity java nya

src/ ViewFlipperMainActivity

1. public class ViewFlipperMainActivity extends Activity {
2. private ViewFlipper viewFlipper;
3. private float lastX;
4. 
   
5. @Override
6. protected void onCreate(Bundle savedInstanceState) {
7. super.onCreate(savedInstanceState);
8. setContentView(R.layout.view_flipper_main);
9. viewFlipper = (ViewFlipper) findViewById(R.id.view_flipper);
10. }
11. 
    
12. 
    
13. public boolean onTouchEvent(MotionEvent touchevent) {
14. switch (touchevent.getAction()) {
15. 
    
16. case MotionEvent.ACTION_DOWN: {
17. lastX = touchevent.getX();
18. break;
19. }
20. case MotionEvent.ACTION_UP: {
21. float currentX = touchevent.getX();
22. 
    
23. if (lastX < currentX) {
25. if (viewFlipper.getDisplayedChild() == 0)
26. break;
27. 
    
29. viewFlipper.setInAnimation(this, R.anim.in_from_left);
30. viewFlipper.setOutAnimation(this, R.anim.out_to_right);
32. viewFlipper.showNext();
33. }
34. 
    
36. if (lastX > currentX) {
37. if (viewFlipper.getDisplayedChild() == 1)
38. break;
40. viewFlipper.setInAnimation(this, R.anim.in_from_right);
41. viewFlipper.setOutAnimation(this, R.anim.out_to_left);
43. viewFlipper.showPrevious();
44. }
45. break;
46. }
47. }
48. return false;
49. }
50. 
    
51. }

bila sudah hasilnya seperti berikut
                                   

Bila anda ingin mendownload Source Codenya click link di bawah
ViewFlipper Source Code

Terimakasih telah membaca