In Android, ViewFlipper is used to implement screen switching (modifications have been made to the axis issue). androidviewflipper

In Android, ViewFlipper is used to implement screen switching (modifications have been made to the axis issue). androidviewflipper

Screen switching refers to switching between screens in the same Activity. ViewFlipper inherits the Framelayout class, And the ViewAnimator class is used to provide an animation for the View switching in FrameLayout. Animation:

This class has the following animation-related functions:

SetInAnimation: Set the animation used when the View enters the screen. This function has two versions, one of which accepts a single parameter and the type is android. view. animation. animation; one accepts two parameters, whose types are Context and int, respectively, the Context object and the resourceID that defines the Animation.

SetOutAnimation: Specifies the animation used when the View exits the screen. The setInAnimation parameter function is the same.

ShowNext: Call this function to display the next View in FrameLayout.

ShowPrevious: Call this function to display the previous View in FrameLayout.

The following shows how to implement an animation using the coordinate axis:

It can be seen that the bottom left corner of the screen is the origin of the mathematical axis, the bottom border of the screen is the X axis, the left border is the Y axis, the current screen is shown as Figure 2, if you want to see Figure 1, figure 1 needs to enter the screen from left to right (relative to the screen), and the initial coordinate of the X axis of Figure 1 is-100% p. when moving to the screen position, the X axis of Figure 1 Changes to 0 (because this demonstration is a horizontal slide, therefore, the Y axis is not involved. Similarly, to enter the screen in figure 3, the X axis is changed from right to left and from 100% p to 0. after the coordinates are clearly defined, it is very easy to implement four types of animation effects. The following Code (which must be created under the self-built anim folder under the res directory) demonstrates the four animation effects:

In_leftright.xml -- enter the screen from left to right:

 

1 <?xml version="1.0" encoding="utf-8"?>2 <set xmlns:android="http://schemas.android.com/apk/res/android">3     <translate4         android:duration="500"5         android:fromXDelta="-100%p"6         android:toXDelta="0"/>7 </set>

Out_leftright.xml -- exit the screen from left to right:

1 <?xml version="1.0" encoding="utf-8"?>2 <set xmlns:android="http://schemas.android.com/apk/res/android">3     <translate4         android:duration="500"5         android:fromXDelta="0"6         android:toXDelta="100%p"/>7 </set>

In_rightleft.xml -- enter the screen from right to left:

1 <?xml version="1.0" encoding="utf-8"?>2 <set xmlns:android="http://schemas.android.com/apk/res/android">3     <translate4         android:duration="500"5         android:fromXDelta="100%p"6         android:toXDelta="0"/>7 8 </set>

Out_rightleft.xml -- exit the screen from right to left:

1 <?xml version="1.0" encoding="utf-8"?>2 <set xmlns:android="http://schemas.android.com/apk/res/android">3     <translate4         android:duration="500"5         android:fromXDelta="0"6         android:toXDelta="-100%p"/>7 </set>

Animation effect created

In Layout, the view_layout.xml Layout file (this time, three images of the animation are directly distributed to ViewFlipper through LinearLayOut ):

 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3     android:orientation="vertical" android:layout_width="match_parent" 4     android:layout_height="match_parent"> 5     <ViewFlipper 6         android:id="@+id/vf" 7         android:layout_width="match_parent" 8         android:layout_height="match_parent"> 9         <LinearLayout10             android:layout_width="match_parent"11             android:layout_height="match_parent">12             <ImageView13                 android:layout_width="match_parent"14                 android:layout_height="match_parent"15                 android:src="@mipmap/sample_1" />16         </LinearLayout>17         <LinearLayout18             android:layout_width="match_parent"19             android:layout_height="match_parent">20             <ImageView21                 android:layout_width="match_parent"22                 android:layout_height="match_parent"23                 android:src="@mipmap/sample_2" />24         </LinearLayout>25         <LinearLayout26             android:layout_width="match_parent"27             android:layout_height="match_parent">28             <ImageView29                 android:layout_width="match_parent"30                 android:layout_height="match_parent"31                 android:src="@mipmap/sample_3" />32         </LinearLayout>33     </ViewFlipper>34 </LinearLayout>

Java implementation code in Activity:

1 import android. OS. bundle; 2 import android. support. annotation. nullable; 3 import android. support. v7.app. appCompatActivity; 4 import android. view. motionEvent; 5 import android. view. view; 6 import android. widget. viewFlipper; 7/** 8 * Created by panchengjia on 2016/11/28. 9 */10 public class FlipperActivity extends AppCompatActivity implements View. onTouchListener {11 private ViewFlipper vf; 12 float startX; // declare the coordinate 13 float endX when the finger is pressed; // declare coordinates 14 @ Override15 protected void onCreate (@ Nullable Bundle savedInstanceState) {16 super. onCreate (savedInstanceState); 17 setContentView (R. layout. viewflipper_layout); 18 vf = (ViewFlipper) findViewById (R. id. vf); 19 vf. setOnTouchListener (this); 20} 21 @ Override22 public boolean onTouch (View v, MotionEvent event) {23 // determines that the captured action is as follows, set starX24 if (event. getAction () = MotionEvent. ACTION_DOWN) {25 startX = event. getX (); 26 // determines that the captured action is lifted, and sets the release point X coordinate endX27} else if (event. getAction () = MotionEvent. ACTION_UP) {28 endX = event. getX (); 29 // slide the screen from right to left, the value of X decreases, and the image enters the screen 30 if (startX> endX) from the right of the screen) {31 // the inbound and outbound animations are paired with 32 vf. setInAnimation (this, R. anim. in_rightleft); 33 vf. setOutAnimation (this, R. anim. out_rightleft); 34 vf. showNext (); // display the next view35 // slide the screen from left to right. The value of X increases, and the image enters the screen 36} else if (startX <endX) from the left) {37 vf. setInAnimation (this, R. anim. in_leftright); 38 vf. setOutAnimation (this, R. anim. out_leftright); 39 vf. showPrevious (); // display the previous view40} 41} 42 return true; 43} 44}

During this exercise, the way the animation is displayed has plagued me for a long time. This reminds me of how the animation works in the form of coordinate axes. At that moment, the whole person is like a zombie, I want to write a blog post and share it with you!

Subsequent changes: after a document is published, a friend reminds me that the Android screen Coordinate System in Android development is different from the general mathematical model. The origin point should be in the upper left corner and the Y axis is incremented downward. After reading the information, it is true, the changed axis is as follows:

At the same time, I hope that more friends will make changes if they find that the blog posts do not conform to the technical principles, so as not to disturb everyone. Thank you for your thanks.