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
>
setInAnimation: Set the animation used when the View enters the screen.
setOutAnimation: Set the animation used when the View exits the screen.
showNext: Call this method to display the next View in the ViewFlipper.
showPrevious: Call this method to display the previous View in the ViewFlipper.
setFlipInterval: Set the time interval between View switches.
setFlipping: Start switching all Views using the time interval set above, and the switching will be cyclic.
stopFlipping: Stop the View switch.
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" >
<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 :
>
- Here we add the View dynamically, which is just a simple ImageView. It can be expanded according to your own needs!
- 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
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.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.5 RadioButton (Radio Button) & Checkbox (Checkbox)
-[2.3.6 ToggleButton (Toggle Button) and Switch (Switch)](android-tutorial-toggle
5.2.1 Fragment Example: Implementing a Bottom Navigation Bar (Method 1)
5.2.2 Fragment Example: Implementing a Bottom Navigation Bar (Method 2)
5.2.3 Fragment Example: Implementing a Bottom Navigation Bar (Method 3)
5.2.4 Fragment Example: Bottom Navigation Bar + ViewPager for Page Swiping
5.2.5 Fragment Example: A Simple Implementation of a News (Shopping) App List Fragment
6.2 Data Storage and Access: SharedPreferences for Saving User Preferences
6.3.1 Data Storage and Access: An Introduction to SQLite Database
[8.1.3 A Summary of 13 Android Drawables Part 3](android-tutorial
11.0 "2015 Latest Android Basic Tutorial" Completion Celebration~
12.2 DrySister Beauty Viewing App (First Edition) - 2. Parsing Backend Data
12.4 DrySister Beauty Viewing App (First Edition) - 4. Adding Data Caching (Integrating SQLite)