Easy Tutorial
❮ Wx Xcx Repo Cglibcode Generation Library Intro ❯

2.5.6 Basic Usage of ViewFlipper (Flip View)

Category Android Basic Tutorial

Introduction to This Section:

>

This section introduces ViewFlipper, which is a multi-page management control that comes with Android and can play automatically! Unlike ViewPager, which turns page by page, ViewFlipper is layered, and like ViewPager, it is often used to implement the guide page after entering the app or for image carousels. In this section, we will use ViewFlipper to write a simple image carousel example. Official API: ViewFlipper


1. Two Methods to Add Views to ViewFlipper

1) Static Import

>

So-called static import is like in the picture, adding each page to the middle of ViewFlipper!


2) Dynamic Import

>

Fill in the View through the addView method.


2. Some Commonly Used Methods

>


3. Usage Examples

1) Example 1: Implementing an Image Carousel with ViewFlipper (Static Import)

Effect Picture :

Implementation Code :

The layout of each page is a simple ImageView, which is not pasted here. First, let's post the two animations for entering and leaving:

right_in.xml :

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="2000"
        android:fromXDelta="100%p"
        android:toXDelta="0" />

</set>

right_out.xml :

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="2000"
        android:fromXDelta="0"
        android:toXDelta="-100%p" />

</set>

Then is the activity_main.xml layout file:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ViewFlipper
        android:id="@+id/vflp_help"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:inAnimation="@anim/right_in"
        android:outAnimation="@anim/right_out"
        android:flipInterval="3000">

        <include layout="@layout/page_help_one" />

        <include layout="@layout/page_help_two" />

        <include layout="@layout/page_help_three" />

        <include layout="@layout/page_help_four" />

    </ViewFlipper>

</RelativeLayout>

Here we set flipInterval = 3000, which means switch every 3000ms. Finally, we just 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 with Gesture Slide Support (Dynamic Import)

Effect Picture :

Code Implementation :

Since we divide into entering the previous page and entering the next page, in addition to the two animations above, we add two more animations:

left_in.xml :

``` <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" >

&lt;translate
    android:duration="500"
    android:fromXDelta

}

return true; }

private ImageView getImageView(int resId){ ImageView img = new ImageView(this); img.setBackgroundResource(resId); return img; } }

Key Points Analysis :

>

  1. Here we add the View dynamically, which is just a simple ImageView. It can be expanded according to your own needs!
  2. I believe you have noticed that our gestures are not judged directly through onTouchEvent, and then the onTouch event is rewritten. The Action is judged, and if it is MotionEvent.ACTION_MOVE, then the following code is executed:

Later found that on the emulator, because it is a mouse, it will not shake frequently, but on the real machine, because the finger is always trembling. So ACTION_MOVE will always be triggered, and the View will keep switching. Later, considering the advice of Berial (B God), a value was added for judgment, that is, a flag was added:

It can be done, but it feels a bit not smooth, strange. Later thought about it and still use the gesture class, handle it directly in onFling. So there is the above code, which runs very well~ Of course, if you are not familiar with Gesture gestures, you can refer to a previous article I wrote: Android Basic Tutorial - 3.8 Gesture (Gesture)


4. Code Sample Download

ViewFlipperDemo.zip

ViewFlipperDemo2.zip


Summary of This Section:

>

Well, this section explains the basic use of ViewFlipper (flip view). In the future, when you do picture rotation and guide pages, You have one more choice~ Well, that's all, thank you~

-1.0 Android Basic Tutorial

-1.0.1 Latest Android Basic Tutorial Catalog for 2015

-1.1 Background and System Architecture Analysis

-1.2 Development Environment Construction

-1.2.1 Developing Android APP with Eclipse + ADT + SDK

-1.2.2 Developing Android APP with Android Studio

-1.3 Solving SDK Update Issues

-1.4 Genymotion Emulator Installation

-1.5.1 Git Tutorial on Basic Operations of Local Repositories

-1.5.2 Git on Using GitHub to Set Up a Remote Repository

-1.6 How to Play with 9 (Nine Sister) Pictures

-1.7 Interface Prototype Design

-1.8 Project Related Analysis (Various Files, Resource Access)

-1.9 Android Program Signature Packaging

-1.11 Decompiling APK to Obtain Code & Resources

-2.1 The Concept of View and ViewGroup

-2.2.1 LinearLayout (Linear Layout)

-2.2.2 RelativeLayout (Relative Layout)

-2.2.3 TableLayout (Table Layout)

-2.2.4 FrameLayout (Frame Layout)

-2.2.5 GridLayout (Grid Layout)

-2.2.6 AbsoluteLayout (Absolute Layout)

-2.3.1 TextView (Text Box) Detailed Explanation

-2.3.2 EditText (Input Box) Detailed Explanation

-2.3.3 Button (Button) and ImageButton (Image Button)

-2.3.4 ImageView (Image View)

-2.3.5 RadioButton (Radio Button) & Checkbox (Checkbox)

-[2.3.6 ToggleButton (Toggle Button) and Switch (Switch)](android-tutorial-toggle

WeChat Follow

❮ Wx Xcx Repo Cglibcode Generation Library Intro ❯