Android sliding effect ---------- ViewFlipper

Source: Internet
Author: User

ViewFilpper is a View container class officially provided by Android. It inherits from the ViewAnimator class and is used for page switching. You can also set the time interval for automatic playback.
ViewAnimator inherits FrameLayout, So multiple views can be placed in the Layout of ViewFilpper. The inheritance relationship is as follows:

In this example, ViewFlipper and GestureDetector. OnGestureListener are used to implement automatic playback and gesture slide screen events. The effect is as follows:

Activity
01. import android. app. Activity;
02. import android. OS. Bundle;
03. import android. view. GestureDetector;
04. import android. view. MotionEvent;
05. import android. view. ViewGroup. LayoutParams;
06. import android. view. animation. Animation;
07. import android. view. animation. AnimationUtils;
08. import android. widget. ImageView;
09. import android. widget. ViewFlipper;
10.
11. public class ViewFlipperActivity extends Activity implements android. view. GestureDetector. OnGestureListener {
12. private int [] imgs = {R. drawable. img1, R. drawable. img2,
13. R. drawable. img3, R. drawable. img4, R. drawable. img5 };
14.
15. private GestureDetector gestureDetector = null;
16. private ViewFlipper viewFlipper = null;
17.
18. private Activity mActivity = null;
19.
20. @ Override
21. public void onCreate (Bundle savedInstanceState ){
22. super. onCreate (savedInstanceState );
23. setContentView (R. layout. main );
24.
25. mActivity = this;
26.
27. viewFlipper = (ViewFlipper) findViewById (R. id. viewflipper );
28. gestureDetector = new GestureDetector (this); // declare a gesture detection event
29.
30. for (int I = 0; I 120) {// slide from left to right (left to right)
54. Animation rInAnim = AnimationUtils. loadAnimation (mActivity, R. anim. push_right_in); // sliding the gradient effect (alpha 0.1-> 1.0) to the right)
55. Animation rOutAnim = AnimationUtils. loadAnimation (mActivity, R. anim. push_right_out); // slide the gradient to the right (alpha 1.0-> 0.1)
56.
57. viewFlipper. setInAnimation (rInAnim );
58. viewFlipper. setOutAnimation (rOutAnim );
59. viewFlipper. showPrevious ();
60. return true;
61.} else if (e2.getX ()-e1.getX () 1.0)
63. Animation lOutAnim = AnimationUtils. loadAnimation (mActivity, R. anim. push_left_out); // slide the gradient (alpha 1.0-> 0.1) to the left)
64.
65. viewFlipper. setInAnimation (lInAnim );
66. viewFlipper. setOutAnimation (lOutAnim );
67. viewFlipper. showNext ();
68. return true;
69 .}
70. return true;
71 .}
72.
73. @ Override
74. public boolean onDown (MotionEvent e ){
75. return false;
76 .}
77.
78. @ Override
79. public void onLongPress (MotionEvent e ){
80 .}
81.
82. @ Override
83. public boolean onScroll (MotionEvent e1, MotionEvent e2, float distanceX, float distanceY ){
84. return false;
85 .}
86.
87. @ Override
88. public void onShowPress (MotionEvent e ){
89 .}
90.
91. @ Override
92. public boolean onSingleTapUp (MotionEvent e ){
93. return false;
94 .}
95 .}
Main. xml

Sample Analysis
I. automatic playback
The ViewFlipper control is a container for ImageView. It is used to add image resources for display. It has two main functions: Add display View and automatically play View.
Add a view resource by implementing the addView (View child, ViewGroup. LayoutParams params) of the parent class android. View. ViewGroup, that is, the image and fill style.
Enable automatic playback View. You can set the following three member functions:
1. setAutoStart (true): Set whether to enable automatic playback. true indicates automatic playback, false indicates not automatic playback, and true indicates automatic playback.
2. setFlipInterval (int milliseconds), set the View playback interval, such as 3000 (3 seconds)
3. startFlipping () to start automatic playback.
Stop automatic View playback. Set the member function as follows:
1. stopFlipping () to stop automatic playback
2. setAutoStart (false): Stop automatic playback. Set it to false.
2. gesture Sliding Screen
Gesture Sliding Screen animation is implemented by detecting various gesture events through the android. view. GestureDetector class. This class has two callback interfaces)
A. GestureDetector. OnDoubleTapListener is used to notify DoubleTap double-click events. It is similar to double-click events. The following are three abstract callback functions of the interface:
1. onDoubleTap (MotionEvent e): Notification (triggered) after double-click gesture event of DoubleTap)
2. onDoubleTapEvent (MotionEvent e): Notification (trigger) between double-click gesture events of DoubleTap, including down, up, and move events (events between double-click events, for example, double-click in the same place will generate a DoubleTap gesture, while a down and up event will occur in the DoubleTap gesture, which are notified by the function)
3. onSingleTapConfirmed, if the system does not receive the second click after a period of time, the system determines that the click is SingleTap rather than DoubleTap. At this time, the SingleTapConfirmed event is triggered.
B. GestureDetector. OnGestureListener is used to notify normal gesture events (down, longPress, scroll, up, etc.). The specific six abstract callback functions of the interface are as follows:
1. onDown (MotionEvent e): down event, which indicates pressing the event
2. onSingleTapUp (MotionEvent e): Click the up event at a time to indicate the event to be lifted after the event is pressed.
3. onShowPress (MotionEvent e): When the down event occurs, move or the up event is not triggered before the event is triggered. This event is generally used to notify the user that press and press the event has occurred.
4. onLongPress (MotionEvent e ), if you still press the screen, it is considered a long press event.
5. onFling (MotionEvent e1, MotionEvent e2, float velocityX, float velocityY): A sliding gesture event, such as a sudden up after a scroll event, the fling speed is determined by the change of e x and y per second.
6. onScroll (MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)
In this example, only the above GestureDetector. OnGestureListener and its onFling events are used for Sliding Screen animation. The specific implementation steps are as follows:
1. The Activity implements the android. view. GestureDetector. OnGestureListener listening interface and declares gestureDetector = new GestureDetector (this). It is used to listen for gesture events.
2. Register GestureDetector. OnGestureListener gesture listening gestureDetector. onTouchEvent (event) in the Activity member function onTouchEvent (MotionEvent ).
3. Implement slide screen animation in the GestureDetector. OnGestureListener callback function onFling (MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)
3. Gradient Screen Effect
1. When the gesture slides from left to right, the picture is left to right
If (e2.getX ()-e1.getX ()> 120), that is, the sliding distance between the up end point (e2) and the down start point (e1) is greater than 120, to detect sliding events from left to right.
Push_left_in.xml -- left-side gradient effect

Push_left_out.xml -- Right-out gradient effect

2. When the gesture slides from right to left, the picture is right to left
If (e2.getX ()-e1.getX () <-120), that is, the sliding distance between the up end point (e2) and the down start point (e1) is less than-120, to detect sliding events from right to left
Push_right_in.xml -- Right-forward gradient effect

Push_right_out.xml -- Right-out gradient effect

Android: duration indicates the gradient duration; translate indicates the displacement transformation; alpha indicates the transparency transformation.
Translate
Android: fromXDelta = "-100% p" android: toXDelta = "0" indicates that the image is moved from left to invisible.
Android: fromXDelta = "0" android: toXDelta = "100% p" indicates that the image is slide from the right to the invisible
Alpha
Android: fromAlpha = "1.0" android: toAlpha = "0.1" indicates that the image is not transparent (1.0) to transparent (0.1)
Android: fromAlpha = "0.1" android: toAlpha = "1.0" indicates that the image is transparent (0.1) to opacity (1.0)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.