Basic tutorial for Android -- 2.4.13 basic usage of ViewFlipper

Source: Internet
Author: User

Basic tutorial for Android -- 2.4.13 basic usage of ViewFlipper
 

This section introduces:

This section introduces ViewFlipper, a multi-page management control that comes with Android and can be automatically played!
Unlike ViewPager, ViewPager is a one-page object, while ViewFlipper is a layer-by-layer object. Unlike ViewPager,
Used to enter the boot page after the application, or for image carousel, this section uses ViewFlipper to write a simple image
Carousel example ~ Official API: ViewFlipper

1. Add View to ViewFlipper in two ways. 1) Static Import

The so-called static import is like the figure above, adding all pages to the middle of ViewFlipper!

2) dynamic import

Use addView to fill the View

2. Common Methods
SetInAnimation: Set the animation used when the View enters the screen. SetOutAnimation: Sets the animation used when the View exits the screen. ShowNext: Call this method to display the next View in ViewFlipper ShowPrevious: Call this method to display the previous View of ViewFlipper SetFilpInterval: Set the time interval for switching between views. SetFlipping: Use the time interval set above to start switching all views. Switching will be performed cyclically. StopFlipping: Stop View switching
3. Use instance 1) Example 1: Use ViewFlipper for image carousel (static import)

Implementation:

Implementation Code:

The layout of each page is a simple ImageView, so it will not be pasted here ~ First paste two
Exit Animation:

Right_in.xml:


  
      
   
  

Right_out.xml:


  
      
   
  

ThenActivity_main.xmlLayout file:


      
           
            
             
       
        
       
      
     
    
   
  

Here we set flipInterval = 3000, that is, we switch the value to another one every Ms ~
Finally, we only need to call the startFlipping () method of ViewFlipper in MainActivity. java to start sliding!

MainActivity. java:

public class MainActivity extends AppCompatActivity {    private ViewFlipper vflp_help;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        vflp_help = (ViewFlipper) findViewById(R.id.vflp_help);        vflp_help.startFlipping();    }}
2) Example 2: ViewFlipper that supports gesture sliding (dynamic import)

Implementation:

Code Implementation:

Because we enter the previous page and the next page, we add two more animations besides the two animations above:

Left_in.xml:


  
      
   
  

Left_out.xml:


  
      
   
  

MainActivity. java:

Public class MainActivity extends AppCompatActivity {private Context mContext; private ViewFlipper vflp_help; private int [] resId = {R. mipmap. ic_help_view_1, R. mipmap. ic_help_view_2, R. mipmap. ic_help_view_3, R. mipmap. ic_help_view_4}; private final static int MIN_MOVE = 200; // minimum distance from private MyGestureListener mgListener; private GestureDetector mDetector; @ Override protected void onCreate (Bundle savedI NstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); mContext = MainActivity. this; // instantiate the consumer and GestureDetector object mgListener = new MyGestureListener (); mDetector = new GestureDetector (this, mgListener); vflp_help = (ViewFlipper) findViewById (R. id. vflp_help); // Add a subview for (int I = 0; I <resId. length; I ++) {vflp_help.addView (getImageView (resI D [I]) ;}}// Override onTouchEvent to trigger the method in MyGestureListener @ Override public boolean onTouchEvent (MotionEvent event) {return mDetector. onTouchEvent (event) ;}// customize a GestureListener. This is in the View class. Do not write an error !!! Private class MyGestureListener extends GestureDetector. simpleOnGestureListener {@ Override public boolean onFling (MotionEvent e1, MotionEvent e2, float v, float v1) {if (e1.getX ()-e2.getX ()> MIN_MOVE) {callback (mContext, R. anim. right_in); vflp_help.setOutAnimation (mContext, R. anim. right_out); vflp_help.showNext ();} else if (e2.getX ()-e1.getX ()> MIN_MOVE) {vflp_help.setInAnimation (mContext, R. anim. left_in); vflp_help.setOutAnimation (mContext, R. anim. left_out); vflp_help.showPrevious ();} return true ;}} private ImageView getImageView (int resId) {ImageView img = new ImageView (this); img. setBackgroundResource (resId); return img ;}}

Code points:

1. Here we can add a View in a dynamic way. Here we only use a simple ImageView, which can be expanded as needed!
2. I believe you have discovered it carefully. Here, our gestures are not directly judged by onTouchEvent, and then rewritten.
OnTouch event, judge the Action, and then execute the following code if it is MotionEvent. ACTION_MOVE:

Later, it was found that on the simulator, because of the mouse relationship, there was no frequent jitter, and on the real machine, the fingers were shaking all the time.
Therefore, ACTION_MOVE will be triggered all the time, and the View will be switched all the time.Berial (God B)Suggestions, added
When a value is used for judgment, a flag is added:

Yes, yes, but it still seems a little unsmooth and strange. Later I thought it would be a gesture class, which was handled directly in onFling.
That's why we have the above Code and run it ~
Of course, if you are not familiar with Gesture gestures, you can refer to the previous article:
Basic Android tutorial-3.8 Gesture (Gesture)

 

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.