Android uses the Viewflipper class to implement screen switching (the problem with axes has been changed) _android

Source: Internet
Author: User

Screen switching refers to the same activity within the screen between the switch, Viewflipper inherited the Framelayout class, Viewanimator class role is to framelayout inside the view switch to provide animation effects. Move diagram as follows:

The class has several animation-related functions as follows:

    • Setinanimation: Sets the animation used when view enters the screen, which has two versions, one that accepts a single parameter, The type is android.view.animation.Animation; one accepts two parameters, the type is context and int, the context object and the ResourceID that defines animation.
    • Setoutanimation: Sets the animation to use when view exits the screen, as is the parameter setinanimation function.
    • Shownext: Call this function to display the next view inside the framelayout.
    • Showprevious: Call this function to display the previous view inside the framelayout.

Below through the form of axes for everyone to demonstrate the animation implementation mode:

From the above figure, to the lower left corner of the screen as the origin of the mathematical axis, the bottom border of the screen is the x axis, the left box is the Y axis, the current screen is shown in Figure two, if you want to see figure one, you need to go to the screen from left to right (relative to the screen), the initial coordinate of the x axis is -100%p, When you move to the screen position, the x axis changes to 0 (because this presentation is horizontal sliding, so it does not involve the y-axis); For the third to enter the screen, it needs to be from right to left, X axis from 100% P to 0. Clear the coordinates of the position, we want to achieve four animation effects, it will be very simple, the following code (to be built in the Res directory under the Anim folder) to demonstrate four kinds of animation effects:

in_leftright.xml--from left to right into the screen:

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android=
"http://schemas.android.com/apk/res/" Android ">
  <translate
    android:duration="
    android:fromxdelta= " -100%p"
    Android:toxdelta = "0"/>
</set>
out_leftright.xml--out from left to right screen:
<?xml version= "1.0" encoding= "Utf-8"?>
<set xmlns:android= "http://schemas.android.com/apk/res/android" >
  <translate
    android: duration= "Android:fromxdelta=" "
    0"
    android:toxdelta= "100%p"/>
</set>

in_rightleft.xml--into the screen from right to left:

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android=
"http://schemas.android.com/apk/res/" Android ">
  <translate
    android:duration="
    android:fromxdelta= "100%p"
    android: Toxdelta= "0"/>

</set>

out_rightleft.xml--from right to left screen:

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android=
"http://schemas.android.com/apk/res/" Android ">
  <translate
    android:duration=" "
    android:fromxdelta=" 0 "
    android:toxdelta="- 100%p "/>
</set>

The animation effect is completed and established

Layout view_layout.xml Layout file (this time directly to define the animation of the three pictures directly through the LinearLayout layout to Viewflipper):

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android= "http://schemas.android.com/apk/res/" Android "android:orientation=" vertical "android:layout_width=" match_parent "android:layout_height=" Match_parent " > <viewflipper android:id= "@+id/vf" android:layout_width= match_parent "android:layout_height=" match_p
      Arent "> <linearlayout android:layout_width=" match_parent "android:layout_height=" Match_parent "> <imageview android:layout_width= "match_parent" android:layout_height= "Match_parent" Androi
      d:src= "@mipmap/sample_1"/> </LinearLayout> <linearlayout android:layout_width= "Match_parent" android:layout_height= "Match_parent" > <imageview android:layout_width= "match_parent" Andro id:layout_height= "Match_parent" android:src= "@mipmap/sample_2"/> </LinearLayout> <linearlayou T android:layout_width= "Match_parEnt "android:layout_height=" match_parent "> <imageview android:layout_width=" match_parent " android:layout_height= "Match_parent" android:src= "@mipmap/sample_3"/> </LinearLayout> </viewf
 Lipper> </LinearLayout>

Java functionality Implementation code in activity:

Import Android.os.Bundle;
Import android.support.annotation.Nullable;
Import android.support.v7.app.AppCompatActivity;
Import android.view.MotionEvent;
Import Android.view.View;
Import Android.widget.ViewFlipper;
 /** * Created by Panchengjia on 2016/11/28.
  * * public class Flipperactivity extends appcompatactivity implements view.ontouchlistener{private Viewflipper VF; Float startx;//declares the coordinates of x when the finger is pressed endx;//declares the coordinates of x after the finger is loosened @Override protected void onCreate (@Nullable Bundle savedinstance
    State) {super.oncreate (savedinstancestate);
    Setcontentview (r.layout.viewflipper_layout);
    vf= (Viewflipper) Findviewbyid (R.ID.VF);
  Vf.setontouchlistener (this); @Override public boolean Ontouch (View V, motionevent event) {//To determine if the action captured is pressed, set the X coordinate Starx if (event.getacti
      On () ==motionevent.action_down) {startx=event.getx ();
      To determine if the captured action is lifted, set the release point x coordinate EndX}else if (event.getaction () ==motionevent.action_up) {endx=event.getx (); Slide the screen from right to left, the X value decreases, and the pictureFrom the right side of the screen into the screen if (STARTX&GT;ENDX) {//Out animation into pairs vf.setinanimation (this,r.anim.in_rightleft);
        Vf.setoutanimation (This,r.anim.out_rightleft); Vf.shownext ()//shows the next view//slide from left to right, the X value increases and the picture is entered on the left side of the screen}else if (startx<endx) {vf.setinanimation (th
        Is,r.anim.in_leftright);
        Vf.setoutanimation (This,r.anim.out_leftright);
  Vf.showprevious ();//Show Last View} return true;
 }
}

In practice here, the animation display effect way bothered me for a long time, this just thought of the form of the axis through the embodiment of animation principles, painted that moment, the whole person like a sobering, can not help but want to write a blog to share to everyone, mutual encouragement!

Follow-up changes added: After the post, friends reminded in Android development of the screen coordinate system, different from the general mathematical model, the origin should be located in the upper left corner and the y-axis downward increment, after the information, it is true, now change the axes are as follows:

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

Related Article

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.